:root{--bg-base:#F4F6F8;--bg-card:#FFF;--depth-1:#3E4E60;--depth-2:#6B7E92;--depth-3:#A7B5C4;--release:#E8EDF2;--water:#5E8FA8;--settled:#9DB1A3;--text-primary:#35414E;--text-secondary:#7C8896;--border:#E1E6EB;--gradient-farewell:linear-gradient(180deg,#3E4E60 0%,#6B7E92 40%,#A7B5C4 75%,#E8EDF2 100%);--radius-card:12px;--radius-btn:10px;--shadow-card:0 2px 12px rgba(53,65,78,.06);--font-serif:Georgia,"Songti SC","Noto Serif SC","Noto Serif JP","Noto Serif KR",serif;--font-sans:ui-sans-serif,system-ui,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo",sans-serif;--transition-fade:.2s ease-out}:root{--bp-sm: 640px;--bp-md: 768px;--bp-lg: 1024px;--container-max: 672px;--tap-target: 44px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-text);background:var(--color-bg)}button,a,select,input,[role=button],summary{min-height:var(--tap-target)}a{color:var(--color-accent)}.container{max-width:var(--container-max);margin-inline:auto;padding:40px 20px 24px}.site-header{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start;justify-content:space-between}.title{margin:0;font-size:1.5rem;line-height:1.3}.subtitle{margin:8px 0 0;font-size:.8125rem;color:var(--color-text-muted)}.lang-switch select{font-family:inherit;font-size:1rem;min-height:var(--tap-target);padding:0 12px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.section{margin-top:24px}.card{padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.card p{margin:0 0 12px}.card p:last-child{margin-bottom:0}.card details{margin-top:12px}.card .btn{margin-top:12px}.user-id{font-family:var(--font-mono);font-size:.8125rem;color:var(--color-text-muted);margin:4px 0 12px}.grid-demo{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}@media(min-width:768px){.grid-demo{grid-template-columns:1fr 1fr}}.btn{font-size:.9375rem;padding:10px 16px;border:none;border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-on-accent);cursor:pointer;transition:opacity var(--motion-fast) var(--ease-standard)}.btn:hover{opacity:.88}.pre{font-family:var(--font-mono);font-size:.75rem;line-height:1.6;background:var(--color-code-bg);padding:12px;border-radius:var(--radius-md);overflow-x:auto;margin:12px 0 0}.error{font-size:.8125rem;color:var(--color-danger);margin:12px 0 0}.loading{margin-top:24px;color:var(--color-text-muted)}.footer{margin-top:40px;font-size:.75rem;color:var(--color-text-faint)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.section-title{margin:0 0 12px;font-family:var(--font-serif, Georgia, serif);font-size:1.25rem;font-weight:600;color:var(--text-primary, #35414E);line-height:1.5}.flow-intro{background:linear-gradient(180deg,var(--bg-card, #FFF),var(--release, #E8EDF2))}.privacy-note{font-size:.8125rem;color:var(--text-secondary, #7C8896)}.muted{color:var(--text-secondary, #7C8896)}.step-progress{display:flex;align-items:center;gap:12px;margin-bottom:12px}.step-count{font-size:.8125rem;color:var(--text-secondary, #7C8896);letter-spacing:.06em}.step-dots{display:flex;gap:6px}.step-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--border, #E1E6EB);transition:background var(--transition-fade, .2s ease-out)}.step-dots .dot.on{background:var(--depth-2, #6B7E92)}.guide{font-size:.9375rem;color:var(--text-secondary, #7C8896);border-left:3px solid var(--depth-3, #A7B5C4);padding-left:12px;margin:0 0 16px;line-height:1.8}.step-body{display:flex;flex-direction:column;gap:8px}.field-label{font-size:.9375rem;color:var(--text-primary, #35414E)}.field-label.optional{color:var(--text-secondary, #7C8896);font-size:.875rem}.textarea,.input{font-family:var(--font-sans, system-ui, sans-serif);font-size:1rem;line-height:1.7;color:var(--text-primary, #35414E);padding:10px 12px;border:1px solid var(--border, #E1E6EB);border-radius:var(--radius-btn, 10px);background:var(--bg-card, #FFF);width:100%}.textarea:focus-visible,.input:focus-visible{outline:2px solid var(--water, #5E8FA8);outline-offset:1px}.range-wrap{display:flex;flex-direction:column;gap:6px}.range-question{font-size:.9375rem;color:var(--text-primary, #35414E)}.range-current{font-family:var(--font-serif, Georgia, serif);font-size:1.375rem;color:var(--depth-2, #6B7E92)}.range-wrap input[type=range]{width:100%;accent-color:var(--water, #5E8FA8)}.range-labels{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--text-secondary, #7C8896)}.option-btn{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--border, #E1E6EB);border-radius:var(--radius-card, 12px);background:var(--bg-card, #FFF);cursor:pointer;transition:border-color var(--transition-fade, .2s ease-out),background var(--transition-fade, .2s ease-out)}.option-btn:hover{border-color:var(--depth-3, #A7B5C4)}.option-btn.selected{border-color:var(--depth-2, #6B7E92);background:var(--release, #E8EDF2)}.option-title{font-family:var(--font-serif, Georgia, serif);font-size:1.0625rem;color:var(--text-primary, #35414E)}.option-desc{font-size:.875rem;color:var(--text-secondary, #7C8896);line-height:1.6}.flow-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.flow-nav .btn{min-width:120px}.btn-ghost{background:transparent;color:var(--depth-2, #6B7E92);border:1px solid var(--border, #E1E6EB)}.btn-ghost:hover{background:var(--release, #E8EDF2);opacity:1}.btn-small{font-size:.8125rem;padding:6px 10px;min-height:36px}.done-view{display:flex;flex-direction:column;gap:8px}.quadrant-card{margin:8px 0;padding:16px;border-radius:var(--radius-card, 12px);background:linear-gradient(180deg,var(--release, #E8EDF2),var(--bg-card, #FFF));border:1px solid var(--border, #E1E6EB)}.quadrant-tag{display:block;font-size:.75rem;letter-spacing:.04em;color:var(--text-secondary, #7C8896);margin-bottom:6px}.quadrant-title{margin:0 0 8px;font-family:var(--font-serif, Georgia, serif);font-size:1.125rem;color:var(--water, #5E8FA8)}.quadrant-body{margin:0;line-height:1.8;color:var(--text-primary, #35414E)}.quadrant-card .privacy-note{margin:10px 0 0}.archive-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.archive-head .section-title{margin-bottom:0}.archive-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.archive-item{padding:12px 14px;border:1px solid var(--border, #E1E6EB);border-radius:var(--radius-card, 12px);background:var(--bg-card, #FFF)}.archive-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.archive-name{font-family:var(--font-serif, Georgia, serif);font-size:1rem;color:var(--text-primary, #35414E)}.badge{font-size:.75rem;color:var(--settled, #9DB1A3);border:1px solid var(--settled, #9DB1A3);border-radius:999px;padding:2px 10px;white-space:nowrap}.archive-meta{margin:6px 0 10px;font-size:.8125rem;color:var(--text-secondary, #7C8896);display:flex;flex-wrap:wrap;gap:4px}