/* 2026-10-26: visual layer only. System fonts and local image assets. */
:root{--ink:#34312d;--muted:#6d5e54;--line:#d9cec3;--paper:#faf6ef;--accent:#914e3d;--peach:#eddbcf}
body{background:var(--paper);color:var(--ink)}
header{background:var(--paper);padding:26px 6%;border-color:var(--line)}
.brand{letter-spacing:.16em}.brand span{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;letter-spacing:.12em}
.trial{background:#eddbcf;color:#594337}.save{color:var(--muted)}
aside{background:#f3ece3}nav a{border-color:var(--line)}nav a[aria-current=page]{color:var(--accent);background:#ead8cb;border-radius:2px}
.eyebrow,.number{color:#875f4f}.eyebrow{letter-spacing:.18em}
h1,h2,h3{font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;font-weight:400}
main{max-width:1120px}main.welcome{max-width:1440px;padding:56px 6% 64px}
.portrait-hero{grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);gap:6%;align-items:center}
.hero-copy>.eyebrow{font-size:11px;letter-spacing:.19em;margin:0 0 22px}
.hero-copy h1{font-size:clamp(34px,3.7vw,55px);line-height:1.65;letter-spacing:.03em;margin:0 0 22px;max-width:none}
.hero-description{font-size:16px;line-height:1.9;margin:0 0 26px}
.hero-photo img{height:540px;border-radius:1px;object-position:center;box-shadow:0 16px 40px #55412b10}
.hero-photo figcaption{display:block;font:italic 13px/1.6 Georgia,serif;margin-top:12px;text-align:right;color:var(--muted)}
.hero-starts{display:grid;gap:12px}
button{border-color:#b59c8a;border-radius:4px;background:#fffcf7;color:var(--ink);transition:background .15s ease}
button:hover{background:#f1e2d7}button.primary,button.primary:hover{background:var(--accent);border-color:var(--accent);color:#fffaf5}button.primary:hover{background:#7d4233}
.hero-start{display:grid;grid-template-columns:minmax(0,1fr) 22px;text-align:left;gap:5px 8px;min-width:0;width:100%;padding:17px 21px;min-height:85px;border-radius:5px}
.hero-start.secondary{background:#eeddd0;border-color:#c6a38f;color:#59392e}.hero-start.secondary:hover{background:#e6cdbc}
.start-label{font-size:16px;line-height:1.6;font-weight:600}.start-description{font-size:12px;line-height:1.7;grid-column:1}.start-arrow{grid-column:2;grid-row:1/3;align-self:center;font-size:22px;font-weight:400}
.hero-caption{font-size:12px;line-height:1.85;margin:12px 0 0;color:var(--muted)}
.entry-flow{margin:60px 0 36px;padding:34px 36px;background:#f0e4d9;border:1px solid #e5d6c9;border-radius:2px}.entry-flow>h2{font-size:28px;margin:8px 0 25px}
.visual-steps li:not(:last-child):after,.visual-steps h3:before{color:#956652}.sharing-note{border-color:#d9c5b4}.step-icon{border-color:#946a57;background:#fffaf2}.step-icon.write:before,.step-icon.keep:after{border-color:#946a57}.step-icon.write:after{background:#946a57;border-color:#f0e4d9}.step-icon.talk:after{border-color:#946a57;background:#f0e4d9}
.welcome .edition-picker button.edition-card,.edition-picker button.edition-card{background:#fffcf7;border-color:#c9b8a9;border-radius:3px}
.welcome .edition-picker button[aria-pressed=true],.edition-picker button[aria-pressed=true]{background:#f0dfd2;border:2px solid #91634d;box-shadow:none}.edition-picker button[aria-pressed=true]::after{color:#824a38}
.start-card,.guide-callout,.prompt-panel{background:#fffcf7;border-color:var(--line);border-radius:3px}.start-card{padding:28px}.notice,.context{background:#f1e7dd;border-color:#a67b62}.intro-line{margin:30px 0;color:var(--muted)}
textarea,#answer{background:#fffdf9;border-color:#bca99b;border-radius:3px;line-height:2;box-shadow:inset 0 2px 6px #77604b05}
.progress progress::-webkit-progress-bar{background:#e3d7ca}.progress progress::-webkit-progress-value{background:#98604b}.progress progress::-moz-progress-bar{background:#98604b}
input[type=checkbox]{accent-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #82432e;outline-offset:4px}
.question-grid button[aria-current=step]{background:#eddbcf;border:2px solid #914e3d}.guide-callout a{display:inline-block;padding:10px 0;min-height:44px}
@media(max-width:1000px) and (min-width:761px){main.welcome{padding:40px 4%}.portrait-hero{gap:4%;grid-template-columns:1.15fr 1fr}.hero-copy h1{font-size:34px}.hero-photo img{height:520px}.start-label{font-size:14px}.hero-start{padding:15px}.layout{grid-template-columns:210px minmax(0,1fr)}main:not(.welcome){padding:38px 30px}}
@media(max-width:760px){
 header{padding:18px 20px}.brand span{font-size:18px}body:has(main.welcome) header{padding:16px 22px;gap:6px}body:has(main.welcome) .save{font-size:11px}
 main.welcome{padding:26px 24px 44px}.portrait-hero{gap:0;display:flex;flex-direction:column}.hero-copy{display:contents}.hero-copy>.eyebrow{order:0;margin:0 0 12px;font-size:10px}.hero-copy h1{order:1;font-size:34px;line-height:1.6;margin:0 0 20px;letter-spacing:.015em}.hero-photo{order:2;margin:0 0 20px}.hero-photo img{height:190px;border-radius:1px;object-position:50% 54%}.hero-photo figcaption{font-size:11px;margin-top:6px}.hero-description{order:3;font-size:14px;margin:0 0 20px}.hero-starts{order:4;gap:10px}.hero-start{min-height:88px;padding:15px 16px}.start-label{font-size:14px}.start-description{font-size:11px}.hero-caption{order:5;font-size:11px;line-height:1.8;margin:12px 0 0}
 .entry-flow{margin:36px 0 28px;padding:24px 17px}.entry-flow>h2{font-size:23px}.visual-steps{gap:14px}.visual-steps p{font-size:12px}.visual-steps h3{font-size:13px}.sharing-note{font-size:12px}.welcome .edition-picker{gap:12px}.welcome .edition-picker button.edition-card{padding:20px 13px}.welcome .edition-name{font-size:13px}.start-card{padding:24px}main:not(.welcome){padding:30px 22px 48px}#question-heading{font-size:23px}nav a[aria-current=page]{border-radius:2px}
}
@media(max-width:360px){main.welcome{padding-left:18px;padding-right:18px}.hero-copy h1{font-size:29px}.hero-photo img{height:165px}.hero-start{padding:14px 12px}.start-label{font-size:13px}.start-description{font-size:10px}.brand span{font-size:15px;margin-left:10px}.visual-steps{gap:12px}.visual-steps p{font-size:11px}.welcome .edition-picker{gap:8px}.edition-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}