:root{--field-line:#7a7c68;--ink:#36372d;--paper:#eeeade;--seal:#9a4739;--green:#657343;--green-hover:#536139;font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;overflow-x:hidden;position:relative;background:var(--paper)}
[hidden]{display:none!important}
:where(p,li,summary,label,dd){text-wrap:pretty}
:where(:lang(ja)) :where(p,li,summary,label,dd){word-break:auto-phrase}
:where(button){text-wrap:balance}:where(:lang(ja)) :where(button){word-break:auto-phrase}
.journey span{text-wrap:pretty}:lang(ja) .journey span{word-break:auto-phrase}
.paper{position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.35' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
header{position:absolute;left:0;right:0;top:0;pointer-events:none}
.mast{position:absolute;left:4.2vw;top:42px;z-index:2;display:flex;align-items:center;flex-direction:column;gap:22px;pointer-events:none}
header a{pointer-events:auto}
#prefs-btn{position:absolute;z-index:5;right:16px;top:20px;pointer-events:auto;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#5d604f}
.hub-short{display:none}
.hub-top{position:absolute;z-index:5;top:20px;right:68px;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border:1px solid #c8c8b9;border-radius:999px;background:#f4f1e8;color:#474c37;font-size:.8125rem;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
html.night .hub-top{border-color:#5d604f;background:#2a2b24;color:#e3dccb}
#prefs-btn::before{content:"";display:block;width:22px;height:22px;margin:auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
.en-offer{position:absolute;z-index:5;top:72px;right:64px;display:flex;align-items:center;margin:0;font:.875rem system-ui,sans-serif}
.en-offer[hidden]{display:none}
body.working .en-offer,body.finished .steps:not([hidden])+.en-offer{display:none}
.en-offer a{color:#474c37;padding:12px 4px;text-underline-offset:3px}
.en-offer button{min-height:44px;min-width:44px;padding:0 10px;font-size:1rem;border:0;background:transparent;color:#5d604f}
html.night .en-offer a{color:#d8d2bf}
#prefs{pointer-events:auto;position:absolute;inset:78px 16px auto auto;margin:0;padding:6px;border:1px solid #c8c8b9;border-radius:12px;background:#f4f1e8;color:inherit;box-shadow:0 6px 20px rgba(60,64,48,.12)}
#prefs:popover-open{display:flex;flex-direction:column}
@supports not selector(:popover-open){[popover]{display:none}#prefs.open{display:flex;flex-direction:column;z-index:6}}
#prefs button{min-height:44px;padding:8px 16px;border:0;background:transparent;text-align:left;font-size:.875rem}
#prefs{max-height:calc(100dvh - 92px);overflow-y:auto;max-width:calc(100vw - 32px)}
#prefs button[aria-pressed]{position:relative;padding-left:44px}
#prefs button[aria-pressed],#prefs button[aria-pressed=true]{background:transparent;border:0;color:inherit;font-weight:inherit;box-shadow:none}
#prefs button[aria-pressed]::before{content:"";position:absolute;left:16px;top:50%;translate:0 -50%;width:18px;height:18px;box-sizing:border-box;border:1.5px solid #5f6252;border-radius:4px;font-size:13px;line-height:15px;text-align:center;font-weight:700;letter-spacing:0}
#prefs button[aria-pressed=true]::before{content:"✓";background:var(--green);border-color:var(--green);color:#fff}
html.night #prefs button[aria-pressed]::before{border-color:#c9c2ae}html.night #prefs button[aria-pressed=true]::before{background:#b7c48e;border-color:#b7c48e;color:#1f1d19}
#prefs .prefs-h{margin:0;font-weight:normal;padding:8px 16px 2px;font-size:.875rem;letter-spacing:.08em;color:#5d604f}
#prefs .prefs-h~.prefs-h{margin-top:4px;border-top:1px solid #dcd7c6;padding-top:10px}
.prefs-help{margin:0;padding:4px 16px 10px;max-width:300px;font-size:.875rem;line-height:1.6;color:#5f6252}
h1{writing-mode:vertical-rl;font-size:46px;font-weight:500;letter-spacing:.3em;margin:0}h1 a{color:inherit;text-decoration:none;display:inline-block;padding:10px 0}
h1 a{position:relative}.h1-en{position:absolute;top:calc(100% - 9px);left:50%;transform:translateX(-50%);writing-mode:horizontal-tb;font-size:.6875rem;font-weight:400;letter-spacing:.12em;line-height:1;white-space:nowrap;color:#5d604f}
html.night .h1-en{color:#c9c2ae}
@media(max-width:800px){.h1-en{top:calc(100% - 14px)}}
.roman{writing-mode:vertical-rl;font-family:Georgia,serif;font-size:12px;letter-spacing:.25em;color:#67685d}
.seal{font-size:17px;color:var(--seal);border:1px solid var(--seal);padding:3px;line-height:1.1}
main{min-height:100svh;display:flex;align-items:center;flex-direction:column;padding:28px 20px 90px}
.draft-prompt{z-index:3;width:min(92vw,420px);margin:10px auto;padding:16px;text-align:center;background:#fbf9f1;border:1px solid #b8bca4;border-radius:16px;box-shadow:0 8px 24px #3c402019}
.draft-prompt strong{font-size:1rem;font-weight:500}
.draft-what{display:block;margin-top:4px;font-size:.875rem;color:#5d5a4e}.draft-what:empty{display:none}
#draft-preview{display:block;width:96px;height:96px;margin:0 auto 6px}#draft-preview[hidden]{display:none}
body:has(#draft-prompt:not([hidden])) main{min-height:0}
.collection{margin:8px auto 14px;max-width:520px;color:#5f6252}
.collection summary{cursor:pointer;min-height:44px;display:list-item;text-align:center;padding:10px 16px;font-size:0.875rem}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0;font-size:0.875rem;letter-spacing:.12em;color:#67685d;flex-wrap:wrap;justify-content:center}
.steps li{padding:4px 8px;border-bottom:1px solid transparent;white-space:nowrap}
.steps li.past{color:#5d6448}
.steps li[aria-current]{color:var(--ink);border-bottom-color:var(--seal)}
.steps li button{position:relative;min-height:0;padding:0;border-radius:0;font:inherit;letter-spacing:inherit;color:inherit;vertical-align:baseline;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9bca6}
.steps li button::after{content:'';position:absolute;inset:-12px -3px}
.steps{position:relative;z-index:2}.steps li{min-width:44px;box-sizing:border-box;text-align:center}.steps li button{display:block;width:100%}
@media(hover:hover){.steps li button:hover{background:transparent;text-decoration-color:currentColor}}
.scene{width:min(calc(100svh - 420px),62vw,620px);min-width:260px;aspect-ratio:1;position:relative;flex-shrink:0}
canvas{width:100%;height:100%;touch-action:none;display:block;cursor:grab;border-radius:18px}
canvas:active{cursor:grabbing}
canvas:focus-visible{outline:2px solid #697747;outline-offset:4px}
.guidance{text-align:center;margin-top:10px;max-width:min(34em,100%);box-sizing:border-box}
.guidance p{font-size:1rem;letter-spacing:.16em;margin:4px 0 8px}
.guidance>span{font-size:0.875rem;color:#5f6252}
.status{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:0.875rem;letter-spacing:.1em;color:#5e624e}
.meter{width:140px;height:3px;background:#c6ccb3;position:relative}
#fill{display:block;height:100%;width:0;background:#738146;position:relative}
.tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:16px;max-width:min(96vw,720px)}
.group{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;border:1px solid #c8c8b9;border-radius:40px;padding:3px 8px;background:#f4f1e88c}
.next-sample{display:flex;gap:10px;margin:6px auto 0;padding:6px 16px 6px 8px;border:1px solid #d6cfb9;border-radius:28px;background:transparent;white-space:normal;text-align:left}
.next-sample[hidden]{display:none}
.next-sample canvas{width:44px;height:44px;flex:none}
html.night .next-sample{border-color:#5a5a48}
button,.button,summary{touch-action:manipulation}
button,.button{border:0;background:transparent;color:#474c37;padding:10px 12px;min-height:44px;font:0.875rem 'Yu Mincho','Hiragino Mincho ProN',serif;letter-spacing:.08em;cursor:pointer;white-space:nowrap;border-radius:25px;text-decoration:none;display:inline-flex;align-items:center}
@media(hover:hover){button:hover,.button:hover{background:#e7e8d6}}
button[aria-pressed=true]{background:#dce2c9;color:#34451b;box-shadow:inset 0 0 0 1px #98a270}
button:focus-visible,.button:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:not(canvas):focus-visible{outline:2px solid #52682f;outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
.primary{border:1px solid #6f7b4a;background:#f4f1e8}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.note{font-size:0.875rem;line-height:1.8;color:#5f6252;text-align:center;max-width:34em}
.done{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.field{display:flex;flex-direction:column;gap:4px;font-size:0.875rem;color:#5e624e;margin-top:8px}
.field input{font:0.9375rem 'Yu Mincho','Hiragino Mincho ProN',serif;min-height:44px;padding:8px 10px;border:1px solid var(--field-line);border-radius:8px;background:#fbf9f1;color:var(--ink);width:min(80vw,260px)}
.shelf{margin-top:36px;width:min(calc(100vw - 32px),760px);text-align:center}
.shelf h2{font-size:0.875rem;font-weight:500;letter-spacing:.4em;text-indent:.4em;color:#686b58;margin:0 0 8px}
#shelf,#sample-list{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
#shelf.fade-l,#sample-list.fade-l{--fl:28px}#shelf.fade-r,#sample-list.fade-r{--fr:28px}
#shelf{display:flex;justify-content:safe center;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 8px}
.bowl-item{flex-direction:column;gap:2px;padding:4px 6px;scroll-snap-align:start;font-size:0.875rem}
.bowl-item canvas{width:76px;height:76px;border-radius:0;touch-action:auto;cursor:pointer}
@media(hover:hover){.bowl-item:hover{background:rgba(214,220,190,.45);border-radius:4px}}
.bowl-item .dt{font-size:0.875rem;letter-spacing:.04em;color:#67685d}
.bowl-item[aria-current] span{color:var(--ink);border-bottom:1px solid var(--seal)}
footer{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;font-size:0.875rem;letter-spacing:.16em;color:#5f6252;margin:0 4.2vw 22px}
footer a{color:inherit;text-underline-offset:4px}
@media(max-width:800px){.mast{left:18px;top:24px;gap:14px}h1{font-size:32px}.roman{display:none}.seal{font-size:14px}
  main{padding:0 10px 40px}.steps{margin:92px 0 8px 44px;gap:0;flex-wrap:wrap;row-gap:2px;font-size:0.875rem;letter-spacing:.02em}.steps li{padding:4px 5px}.scene{width:min(92vw,560px)}.guidance p{font-size:0.875rem;letter-spacing:.08em}
  button,.button{padding:9px 10px;font-size:0.875rem}.group{padding:2px 4px}}
@media(max-width:370px){button,.button{font-size:0.875rem;padding:8px 7px;letter-spacing:.02em}}
canvas#cv{border-radius:50%}canvas#cv.square{border-radius:18px}
@media (prefers-reduced-motion:no-preference){canvas#cv.settle{animation:settle .4s cubic-bezier(.2,.7,.3,1)}}
.petal{position:absolute;top:-4%;z-index:3;pointer-events:none;opacity:0;--fall:78vw;animation:petal-fall 2.3s linear forwards;will-change:transform;filter:drop-shadow(1px 2px 1.5px rgba(60,35,15,.25))}
@media(min-width:801px){.petal{--fall:420px}}
@keyframes petal-fall{
 0%{opacity:0;transform:perspective(320px) translate(0,0) rotate(var(--r0)) rotate3d(var(--ax),var(--ay),0,0deg);animation-timing-function:ease-out}
 8%{opacity:var(--o,1)}
 25%{transform:perspective(320px) translate(calc(var(--sway) + var(--drift)*.25),0) rotate(calc(var(--r0) + var(--spin)*.25)) rotate3d(var(--ax),var(--ay),0,var(--tilt));animation-timing-function:ease-in-out}
 50%{transform:perspective(320px) translate(calc(var(--sway)*var(--s2,-.8) + var(--drift)*.5),0) rotate(calc(var(--r0) + var(--spin)*.5)) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*-.8));animation-timing-function:ease-in-out}
 75%{transform:perspective(320px) translate(calc(var(--sway)*var(--s3,.9) + var(--drift)*.75),0) rotate(calc(var(--r0) + var(--spin)*.75)) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*.9));animation-timing-function:ease-in-out}
 68%{opacity:var(--o,1)}
 86%{opacity:calc(var(--o,1)*var(--late,.6))}
 100%{opacity:0;transform:perspective(320px) translate(calc(var(--sway)*-.2 + var(--drift)),0) rotate(calc(var(--r0) + var(--spin))) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*-.3))}}
@keyframes petal-spin{
 0%{opacity:0;transform:perspective(320px) translate(0,0) rotate(var(--r0)) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*.5))}
 8%{opacity:var(--o,1)}
 33%{transform:perspective(320px) translate(calc(var(--sway)*.35 + var(--drift)*.33),0) rotate(calc(var(--r0) + var(--spin)*1.2)) rotate3d(var(--ax),var(--ay),0,var(--tilt))}
 66%{transform:perspective(320px) translate(calc(var(--sway)*-.3 + var(--drift)*.66),0) rotate(calc(var(--r0) + var(--spin)*2.4)) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*.6))}
 68%{opacity:var(--o,1)}
 86%{opacity:calc(var(--o,1)*var(--late,.6))}
 100%{opacity:0;transform:perspective(320px) translate(var(--drift),0) rotate(calc(var(--r0) + var(--spin)*3.4)) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*.9))}}
@keyframes petal-drift{
 0%{opacity:0;transform:perspective(320px) translate(0,0) rotate(var(--r0)) rotate3d(var(--ax),var(--ay),0,0deg);animation-timing-function:ease-out}
 8%{opacity:var(--o,1)}
 40%{transform:perspective(320px) translate(calc(var(--sway)*1.4 + var(--drift)*.5),0) rotate(calc(var(--r0) + var(--spin)*.4)) rotate3d(var(--ax),var(--ay),0,var(--tilt));animation-timing-function:ease-in}
 68%{opacity:var(--o,1)}
 86%{opacity:calc(var(--o,1)*var(--late,.6))}
 100%{opacity:0;transform:perspective(320px) translate(calc(var(--drift)*1.6),0) rotate(calc(var(--r0) + var(--spin))) rotate3d(var(--ax),var(--ay),0,calc(var(--tilt)*-.5))}}
@keyframes petal-drop{0%{translate:0 0;animation-timing-function:ease-in}14%{translate:0 calc(var(--fall)*.09)}100%{translate:0 var(--fall)}}
@media(prefers-reduced-motion:reduce){.petal{display:none}}
.swatch-row{display:flex;flex-direction:column;align-items:center;gap:4px}
.swatch-row .label{font-size:0.875rem;letter-spacing:.12em;color:#5e624e}
.swatches{gap:4px;padding:6px 8px}
.swatch{width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;border:1px solid #bdb8a3;box-shadow:inset 0 -3px 5px rgba(60,40,30,.12)}
.swatch[aria-pressed=true]{outline:2px solid #6f7b4a;outline-offset:2px}
.samples{margin-top:14px;width:min(96vw,720px);text-align:center}
.samples .label{font-size:0.875rem;letter-spacing:.12em;color:#5e624e}
#sample-list{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 8px}
.sample{flex-direction:column;gap:2px;padding:4px 6px;scroll-snap-align:start;font-size:0.875rem;min-width:76px}
.sample canvas{width:56px;height:56px;border-radius:0;touch-action:auto;cursor:pointer}
.sample small{font-size:0.875rem;color:var(--seal);letter-spacing:.05em}
.sample[aria-pressed=true]{background:#e3e6d2;color:#34451b;box-shadow:inset 0 0 0 1px #98a270}
.recipe-guide{margin:12px 0 2px;padding:14px;border-top:1px solid #d3cfbf;border-bottom:1px solid #d3cfbf;text-align:left;color:#4f5244}
.recipe-heading{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end}
.recipe-heading>span:first-child{grid-column:1/-1;font-size:0.875rem;color:#5f6252}
.recipe-heading h3{margin:0;font-size:1.1875rem;font-weight:500;text-wrap:balance}
#recipe-level{font-size:0.875rem;color:#68704f;font-variant-numeric:tabular-nums}
#recipe-story{margin:8px 0 10px;font-size:0.875rem;line-height:1.75;text-wrap:pretty}
#recipe-kicker:empty{display:none}
.recipe-now{padding:10px 12px;border-left:3px solid #7b8756;background:#f7f4eb}
.recipe-now>span{font-size:0.875rem;color:#68704f}
.recipe-now p{margin:3px 0 0;font-size:0.875rem;line-height:1.65;text-wrap:pretty}
.recipe-guide details{margin-top:8px}
.recipe-guide summary{min-height:44px;padding:9px 2px;cursor:pointer;font-size:0.875rem;color:#5e624e}
.recipe-guide ol{list-style:none;counter-reset:craft;margin:0;padding:0;display:grid;gap:5px}
.recipe-guide li{counter-increment:craft;position:relative;padding:7px 8px 7px 34px;border-radius:8px;font-size:0.875rem;line-height:1.55;color:#696b5d}
.recipe-guide li::before{content:counter(craft);position:absolute;left:9px;top:7px;width:18px;height:18px;border:1px solid #bdb9a9;border-radius:50%;font:0.75rem/16px system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums}
.recipe-guide li.past{color:#586043}.recipe-guide li.past::before{content:'✓';border-color:#8c9970}
.recipe-guide li[aria-current]{background:#ececdd;color:var(--ink)}.recipe-guide li[aria-current]::before{border-color:var(--seal);color:#7c372d}
.recipe-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.recipe-facts div{padding:8px;border:1px solid #d6d1c1;border-radius:8px;background:rgba(255,255,255,.26)}
.recipe-facts dt{font-size:0.875rem;color:#5f6252}.recipe-facts dd{margin:3px 0 0;font-size:0.875rem;line-height:1.5}
.real{margin-top:26px;width:min(92vw,440px);font-size:0.875rem;color:#5f6252}
.about{margin-top:26px;width:min(92vw,440px);font-size:0.875rem;color:#5f6252;text-align:center}.about h2{margin:0 0 6px;font-size:1rem;font-weight:500;letter-spacing:.12em}.about p{margin:0;line-height:1.75;text-wrap:pretty}
html.night .about{color:#c9c2ae}
.real summary{cursor:pointer;text-align:center;letter-spacing:.12em;padding:8px}
.real-body{padding:4px 12px 14px;border-left:1px solid #d3cfbf}
.real-body>p{line-height:1.75;text-wrap:pretty}.real ol{line-height:1.75;padding-left:1.4em}.real li+li{margin-top:5px}
.real-note{padding:9px 11px;background:#f4f1e8;border-radius:8px}.sources{font-size:0.875rem}.sources a{color:inherit;text-underline-offset:3px}
.faq{line-height:1.75}.faq dt{font-weight:600;margin-top:10px}.faq dd{margin:0 0 0 1em}
@media(max-width:800px){.mast{flex-direction:row;gap:10px}header h1{writing-mode:horizontal-tb;font-size:26px;letter-spacing:.2em}.steps{margin:70px 0 8px}}
.guidance>span,.status,.steps,.field{font-size:0.875rem}
.sample small{font-size:0.875rem}
main{padding-top:28px}
.workbench{width:min(1080px,90vw);display:grid;grid-template-columns:minmax(360px,600px) minmax(320px,420px);gap:clamp(24px,4vw,56px);align-items:start}
.stage{position:sticky;top:22px;display:flex;flex-direction:column;align-items:center;min-width:0}
.scene{width:min(56vw,560px);min-width:0;aspect-ratio:1}
.guidance{min-height:68px;text-wrap:pretty}
.guidance p{text-wrap:balance}
.status{min-height:20px}
#progress-text{min-width:3em;font-family:system-ui,sans-serif;font-variant-numeric:tabular-nums}
.workbench:has(>.control-panel[hidden]):has(>#done[hidden]){grid-template-columns:minmax(0,600px);justify-content:center}
.workbench>#done{align-self:center;margin-top:0}
.control-panel{align-self:center;min-width:0;padding:18px;border:1px solid #d0cbb9;border-radius:20px;background:rgba(244,241,232,.72);box-shadow:0 8px 24px rgba(70,55,35,.06)}
.tools{margin-top:12px;max-width:100%}
.tools>.action{flex-basis:100%;justify-content:center;margin-top:8px;border:1px solid #6f7b4a;background:#eef0df;font-size:1rem}
@media(hover:hover){.tools>.action:hover{background:#dce2c9}}
.nav{padding-top:12px;border-top:1px solid #d3cfbf}
.nav #next{min-width:148px;justify-content:center;background:var(--green);color:#fff;border-color:var(--green)}
@media(hover:hover){.nav #next:hover{background:var(--green-hover)}}
.nav #next:disabled{background:#d8d5ca;color:#4a4d3f;border-color:#cbc7b9;opacity:1}
.samples{margin:0;width:100%}
.samples summary{cursor:pointer;list-style:none;text-align:center;font-size:0.875rem;color:#5e624e;padding:8px;border-radius:12px}
.samples summary::-webkit-details-marker{display:none}
.samples summary::before{content:'＋';content:'＋' / '';display:inline-block;margin-right:7px}
.samples[open] summary::before{content:'▾';content:'▾' / ''}
#sample-list{max-width:100%}
.swatch-row{width:100%}
.swatches{max-width:100%;border-radius:18px}
.turn-hint{position:static;transform:none;width:max-content;max-width:96%;text-align:center;margin:8px auto;padding:4px 12px 4px 30px;border-radius:16px;background-color:#faf8f0;box-shadow:0 1px 4px rgba(60,45,30,.18);color:var(--ink);font-size:0.875rem;text-wrap:balance;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 7A6.5 6.5 0 1 0 16 12' fill='none' stroke='%2368704c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.5 2.5V7.5H11.5' fill='none' stroke='%2368704c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:9px center;background-size:16px}
.turn-hint[hidden]{display:none}
.zoom{position:absolute;bottom:2%;right:2%;z-index:3;display:flex;flex-direction:column;gap:6px}
.zoom[hidden]{display:none}
.zoom button{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;letter-spacing:0;border-radius:50%;border:1px solid #d0cbb9;background:rgba(250,248,240,.92);color:var(--ink);box-shadow:0 1px 4px rgba(60,45,30,.18)}
.zoom svg{display:block}
.zoom button:disabled{opacity:1;color:#b9b4a3;cursor:default}
.goal-scene{position:relative}
.gesture{position:absolute;inset:0;pointer-events:none;opacity:.72;transition:opacity 160ms ease-out,transform 160ms ease-out}
.gesture.done{opacity:0;transform:scale(.96)}
.gesture span,.gesture span::after{position:absolute;display:block;content:''}
.gesture.circle span{left:35%;top:34%;width:30%;height:30%;border:2px dashed rgba(104,112,76,.7);border-radius:50%}
.gesture.knead span{left:25%;top:27%}
.gesture.knead-in span{left:64%;top:60%;width:20%;height:20%;border:2px dashed rgba(104,112,76,.7);border-radius:50%}
.gesture.knead-in span::after{right:-5px;top:calc(50% - 4px);width:8px;height:8px;border-right:2px solid #5d6448;border-bottom:2px solid #5d6448;transform:rotate(45deg)}
.gesture.stack span{left:70%;top:66%;width:26%;border-top:2px dashed rgba(104,112,76,.75);transform-origin:left center;transform:rotate(-140deg)}
.gesture.stack span::after{width:9px;height:9px;border-left:2px solid #5d6448;border-bottom:2px solid #5d6448;right:-1px;top:-6px;transform:rotate(225deg)}
.gesture.circle span::after{right:-5px;top:calc(50% - 4px);width:8px;height:8px;border-right:2px solid #5d6448;border-bottom:2px solid #5d6448;transform:rotate(45deg)}
.gesture.inward span,.gesture.outward span,.gesture.score span{left:56%;top:49%;width:22%;border-top:2px dashed rgba(104,112,76,.75)}
.gesture.inward span::after,.gesture.outward span::after,.gesture.score span::after{width:9px;height:9px;border-left:2px solid #5d6448;border-bottom:2px solid #5d6448;transform:rotate(45deg);left:-1px;top:-6px}
.gesture.outward span,.gesture.score span{left:43%;transform-origin:left center}
.gesture.outward span::after,.gesture.score span::after{left:auto;right:-1px;transform:rotate(225deg)}
.gesture.score span{transform:rotate(-45deg);width:28%}
.gesture.cut span{left:50%;top:52%;width:calc(30% * var(--zoom,1));border-top:2px dashed rgba(104,112,76,.75);transform-origin:left center;transform:rotate(-45deg)}
.gesture.cut span::after{width:9px;height:9px;border-left:2px solid #5d6448;border-bottom:2px solid #5d6448;transform:rotate(225deg);right:-1px;top:-6px}
.gesture.tap span{left:46%;top:46%;width:8%;height:8%;border:2px dashed rgba(104,112,76,.75);border-radius:50%}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){
  body{padding-bottom:calc(142px + env(safe-area-inset-bottom))}
  body:has(.control-panel[hidden]){padding-bottom:0}
  main{padding-bottom:40px}
  .workbench{width:min(100%,620px);display:flex;flex-direction:column;gap:10px}
  .stage{position:static;width:100%}
  .scene{width:min(92vw,560px)}
  .control-panel{width:calc(100% - 16px);margin:0 8px;padding:12px;background:rgba(244,241,232,.92)}
  .nav{position:fixed;z-index:4;left:0;right:0;bottom:0;margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid #c8c4b4;box-shadow:0 -5px 18px rgba(70,55,35,.1)}
  .nav #next{flex:1;max-width:360px;min-height:48px;font-size:1rem}
  .nav #back{min-width:72px;justify-content:center}
  .tools:has(>.action)::before{content:'';position:fixed;z-index:2;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));height:66px;background:var(--paper);border-top:1px solid #d2cebf}
  .tools>.action{position:fixed;z-index:3;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),360px);min-height:48px;justify-content:center;margin:0;border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 3px 12px rgba(70,55,35,.12)}
  .tools>.action:first-child+.optional-tool{border-top:0;padding-top:0;margin-top:0}
  @media(hover:hover){.tools>.action:hover{background:var(--green-hover)}}
  .samples summary{min-height:44px}
  .guidance{padding:0 12px;min-height:72px}
  .shelf{margin-top:26px}
}
@media(max-width:430px) and (max-height:700px){
  .scene{width:min(60vw,250px)}
  .guidance{margin-top:2px}
  .guidance p{margin:2px 0 4px}
  .control-panel{padding-top:4px}
}
@media(max-width:430px){
  main{padding-left:6px;padding-right:6px}
  .control-panel{width:100%;margin:0}
  .swatches{padding:6px 5px;gap:3px}
  .recipe-guide{margin-left:-4px;margin-right:-4px;padding:12px 8px}.recipe-facts{grid-template-columns:1fr}
}
@media(max-width:430px) and (max-height:700px){
  .steps{margin-top:64px}
  .scene{width:200px;min-width:200px}
  .tools{width:100%;margin-top:6px}
  .swatch-row{width:100%}
  .swatches{width:100%;max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;border-radius:20px}
  .swatch{flex:0 0 29px;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.gesture,.finish-options #finish-label::before{transition:none}}
@media(max-width:800px){footer{row-gap:6px;align-items:baseline}
  footer{justify-content:center;text-align:center}
  footer>[data-i18n=footer_l],footer #chaen,footer #term,footer .footer-legal,footer .footer-run{flex:1 0 100%;justify-content:center}}
@media(pointer:coarse){footer a{display:inline-flex;align-items:center;min-height:44px}}
.welcome{margin:0 0 6px;padding:6px 14px;border:1px solid #d3cfbf;border-radius:14px;background:#f4f1e8}
.done-main .primary{font-size:1rem;min-height:50px;padding:10px 26px;background:var(--green);color:#fff;border-color:var(--green)}
@media(hover:hover){.done-main .primary:hover{background:var(--green-hover)}}
.done-main{gap:10px}
@media(max-width:430px){.done-main>.primary{order:-2}.done-main::before{content:"";flex-basis:100%;order:-1;margin-top:-10px}}
html[lang="en"] .done-record>p{flex-basis:100%}html[lang="en"] .done-record>p::before{content:none!important}
.done-main>:not(.primary){min-height:50px;padding:10px 18px;border:1px solid #6f7b4a;background:#f4f1e8;font-size:0.9375rem}
.done-main>[hidden]{display:none}
.share{gap:14px;font-size:0.875rem;letter-spacing:.12em;color:#5f6252}
.share a{color:inherit;text-underline-offset:4px}
.row.sub{margin-top:6px}
.row.sub .button,.row.sub button{font-size:0.875rem;color:#4f5244;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c}
.mei{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:6px}
.mei-note{margin:4px 0 0;text-align:center}
.mei button{min-height:44px;min-width:44px;padding:4px 12px;font-size:0.875rem;border:1px solid #d0cbb9;border-radius:18px;background:#f4f1e8}
.note.small{font-size:0.875rem;color:#5f6252;max-width:30em}
.bowl-item .badge{font-size:0.875rem;color:var(--seal);letter-spacing:.05em}
.family{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 14px;padding-bottom:6px;border-bottom:1px solid #d3cfbf;letter-spacing:.2em}
.family [aria-current]{color:var(--ink);border-bottom:1px solid var(--seal)}
footer{font-size:0.875rem}
@keyframes nudge{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.06);opacity:1}}
.gesture.nudge:not(.done){animation:nudge 1.4s ease-in-out 3}
.gesture.nudge.once:not(.done){animation-iteration-count:1}
.gesture.nudge.trace:not(.done) span{animation:trace 1.2s ease-out 1}
@keyframes trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dent{position:absolute;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;box-shadow:inset 0 2px 6px rgba(80,60,40,.38);animation:dent .65s ease-out forwards}
@keyframes dent{from{transform:scale(.5);opacity:.95}to{transform:scale(1.25);opacity:0}}
@media(prefers-reduced-motion:reduce){.gesture.nudge:not(.done),.gesture.nudge.trace:not(.done) span{animation:none;opacity:1}}
.share a{width:44px;height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#474c37;text-decoration:none;transition:background .15s,color .15s}
@media(hover:hover){.share a:hover{background:#dce0c8}}
.share a:focus-visible{outline:2px solid #52682f;outline-offset:3px}
@media(hover:hover){.share a[id$="-line"]:hover{color:#06c755}}
@media(hover:hover){.share a[id$="-fb"]:hover{color:#1877f2}}
@media(hover:hover){.share a[id$="-x"]:hover{color:#15141a}}
.copybox{position:relative;margin:10px 0;width:min(86vw,360px)}
#gift-url{font:0.875rem system-ui,sans-serif;padding:9px 46px 9px 10px;border:1px solid var(--field-line);border-radius:10px;background:#fbf9f1;color:var(--ink);width:100%;text-overflow:ellipsis}
#gift-url:focus-visible{outline:2px solid #52682f;outline-offset:1px}
#gift-copy{position:absolute;right:2px;top:50%;translate:0 -50%;width:44px;min-height:44px;padding:0;border-radius:8px;display:grid;place-items:center;color:#5b6d33}
@media(hover:hover){#gift-copy:hover{background:#e9e6da}}
#gift-copy svg{width:18px;height:18px}
#gift-copy .ok,#gift-copy.copied .cp{display:none}
#gift-copy.copied .ok{display:inline}
.nowrap{white-space:nowrap}
.phrase{display:inline-block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro-on .scene{display:grid;grid-template-columns:minmax(0,1fr);width:min(94vw,520px);min-width:0;aspect-ratio:auto}
.intro-on .scene>#cv{grid-area:1/1}
.intro-on .scene>.intro{grid-area:2/1;margin:12px 0 0}
.intro-on #cv{height:auto;aspect-ratio:1;align-self:center}
.intro-on #gesture{display:none}
#gesture.tilted{display:none}
.intro-on #cv{width:min(100%,56vw,40vh);justify-self:center}
.intro-family:not(.keep){display:none}
.done-extra{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:4px 0 0}.done-extra:not(:has(button:not([hidden]))){display:none}.done-extra button[hidden]{display:none}
@media(max-height:740px){.intro-on #cv{width:min(100%,38vw,18svh)}.intro{gap:6px;padding:12px 14px}.intro-on .scene>.intro{margin-top:8px}}
@media(min-width:801px){.intro-on .workbench{grid-template-columns:minmax(0,960px)}
  .intro-on .scene{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:center;gap:clamp(24px,4vw,48px);width:min(90vw,960px)}
  .intro-on .scene>.intro{grid-area:1/2;margin:0}.intro-on #cv{width:min(100%,calc(100svh - 220px))}}
.intro{position:relative;z-index:3;margin:6% 4%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 16px;text-align:center;
  border-radius:18px;background:rgba(244,241,232,.95);box-shadow:0 8px 28px rgba(70,55,35,.14)}
#intro-title{margin:0;font-weight:inherit;font-size:1.1875rem;letter-spacing:.12em;text-wrap:balance}
.intro-sub{margin:0;font-size:0.875rem;color:#5f6252;max-width:18em}
.intro-go{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.intro-go .primary{flex:1 0 100%;justify-content:center;text-align:center;background:var(--green);color:#fff;border-color:var(--green);font-size:1rem;padding:10px 20px}
@media(hover:hover){.intro-go .primary:hover{background:var(--green-hover)}}
.intro-go button:not(.primary){border:1px solid #b9b4a0;background:#f7f4ea}
html.big .intro-go{column-gap:6px}html.big .intro-go button:not(.primary){padding-inline:4px}
@media(prefers-reduced-motion:no-preference){.intro:not([hidden]){animation:rise .35s ease-out}}
@keyframes rise{from{opacity:.85;transform:translateY(6px)}to{opacity:1;transform:none}}
.tool-section{border:0;margin:0;padding:0;width:100%;min-width:0}
.tool-section legend{width:100%;padding:0;font-size:1rem;color:var(--ink);text-align:left;text-wrap:balance}
.tool-help{margin:4px 2px 8px;font-size:0.875rem;line-height:1.6;color:#5f6252;text-align:left;text-wrap:pretty}
.group.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:2px;border-radius:18px;padding:4px;width:100%}
.thumb{flex-direction:column;gap:1px;padding:4px 2px;min-height:44px;font-size:0.875rem;letter-spacing:.02em;justify-content:center;border-radius:12px;white-space:normal;line-height:1.3}
.thumb canvas{width:40px;height:40px;border-radius:0;touch-action:auto;cursor:pointer}
.shape-choices{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.shape-choices .thumb{min-height:92px;padding:5px 3px}
.thumb-name{font-weight:600;color:#3f4432}
.thumb-level{display:block;font-size:0.875rem;line-height:1.2;color:#5d6448;letter-spacing:0}
.shape-choices .thumb-level{white-space:normal;word-break:auto-phrase;letter-spacing:-.06em}
.thumb small{display:block;font-size:0.875rem;line-height:1.35;color:#585b4c;text-wrap:pretty}
.optional-tool{width:100%;margin-top:4px;border-top:1px solid #d3cfbf;padding-top:4px}
.tools>.optional-tool:first-child{border-top:0;padding-top:0;margin-top:0}
@media(max-width:800px){.nav>.next-note:empty{min-height:0;margin:0}}
.optional-tool summary{min-height:44px;padding:10px 4px;cursor:pointer;font-size:0.875rem;color:#4f5244;text-align:left}
.optional-tool[open] summary{color:var(--ink)}
.mold-choices{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))!important}
.mold-choices .thumb{min-height:88px}
.tools>.swatch-row+.swatch-row{margin-top:6px}
@media(max-width:430px){.shape-choices .thumb{min-height:72px}.shape-choices .thumb:not([aria-pressed=true]) small{display:none}.mold-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.more{margin:2px auto 0;max-width:100%;white-space:normal;font-size:0.875rem;color:#4f5244;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c}
.done .acts button{min-width:112px;justify-content:center;border:1px solid #b9b4a0;background:#f7f4ea;font-size:0.9375rem}
@media(hover:hover){.done .acts button:hover{background:#e7e8d6}}
.done-sub{gap:10px}
.done-sub .button{border:1px solid #6f7b4a;background:#f4f1e8;font-size:0.875rem}
.done-sub #again{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c;font-size:0.875rem}
.done-sub #again.primary{text-decoration:none;border:1px solid #6f7b4a;background:#eef0df;font-size:0.9375rem}
body:not(.finished) .scene>.letter{display:none}
.scene>.letter.card{position:absolute;left:0;bottom:2%;margin:0;max-width:calc(100% - 64px);padding:6px 12px;font-size:.9375rem;line-height:1.5;letter-spacing:.02em;transform:rotate(-3deg);box-shadow:0 1px 3px rgba(60,50,30,.18);pointer-events:none;z-index:2}
@media (prefers-reduced-motion:no-preference){#done>.letter:not([hidden]){animation:letter-open .6s cubic-bezier(.2,.7,.3,1)}}
@keyframes letter-open{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
.letter{margin:4px 0 10px;padding:10px 18px;font-size:1rem;letter-spacing:.08em;border-left:2px solid var(--seal);background:#f7f4ea;max-width:22em;overflow-wrap:anywhere}
@media(prefers-reduced-motion:no-preference){
  .scene.arrive{animation:arrive .45s cubic-bezier(.2,.8,.3,1)}
  .seal-ok:not([hidden]){animation:stamp .5s .25s both cubic-bezier(.3,1.4,.5,1)}}
@keyframes arrive{from{transform:translateY(-10px) scale(.97);opacity:.4}to{transform:none;opacity:1}}
@keyframes stamp{from{transform:scale(1.4);opacity:0}to{transform:none;opacity:1}}
.seal-ok{display:inline-block;padding:4px 12px;color:var(--seal);border:1px solid var(--seal);border-radius:4px;letter-spacing:.12em}
.saijiki{margin:4px auto 18px;max-width:520px}
.saijiki h3{font-size:0.875rem;font-weight:500;letter-spacing:.2em;color:#686b58;margin:6px 0}
#saijiki-count{font:0.875rem system-ui,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums}
#saijiki{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;list-style:none;margin:0;padding:0}
#saijiki li{display:flex;flex-direction:column;align-items:center;border-radius:10px;border:1px solid transparent;color:#5f6252}
#saijiki .saijiki-go{all:unset;box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;padding:4px 0 6px;border-radius:9px;cursor:pointer;color:inherit;font:inherit}
#saijiki .saijiki-go:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
#saijiki li canvas{width:36px;height:36px;opacity:.28;filter:grayscale(.7)}
#saijiki li.got{color:var(--ink);background:#f4f1e8}
#saijiki li.got canvas{opacity:1;filter:none}
#saijiki li[aria-current]{border-color:var(--seal)}
#saijiki .m{font-size:0.8125rem}
#saijiki .n{font-size:0.8125rem;line-height:1.3;text-align:center}
.note{font-size:0.875rem}
.note.small{font-size:0.875rem}
.recipe-heading>span:first-child,.recipe-now>span,.recipe-facts dt,.sources{font-size:0.875rem}
#recipe-story,.recipe-now p,.recipe-guide li,.recipe-facts dd{font-size:0.875rem}
.real{font-size:0.875rem}
.bowl-item .badge{font-size:0.875rem}
.swatch-row .label{font-size:0.875rem}
.family a,.family>[aria-current]{display:inline-flex;flex-direction:column;align-items:center;line-height:1.35;text-decoration:none}
.family a span{text-decoration:underline;text-underline-offset:4px}
.family small{font-size:0.875rem;letter-spacing:.06em;color:#5d604f}
.family [aria-current]{border-bottom:0}
.family [aria-current]>span{border-bottom:1px solid var(--seal)}
@media(max-width:800px){.steps{margin:22px 0 4px 96px;align-self:flex-end}}
@media(max-width:430px){.steps{margin:24px 0 2px 88px;font-size:0.875rem}.steps li{padding:4px 3px}.guidance{min-height:0;margin-top:4px}.status{margin-top:0}}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){
  .control-panel:has(#back[hidden]) .tools>.action{bottom:calc(8px + env(safe-area-inset-bottom));left:12px;transform:none;width:calc(40% - 16px);font-size:0.9375rem;white-space:normal;line-height:1.3;text-align:center}
  .control-panel:has(#back[hidden]) .tools:has(>.action)::before{display:none}
  .control-panel:has(#back[hidden]) .nav{padding-left:12px}
  .control-panel:has(#back[hidden]) .nav #next{margin-left:calc(40vw - 12px);font-size:0.875rem;line-height:1.35;white-space:normal;text-align:center}
  body:has(#back[hidden]){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){.control-panel:has(#back[hidden]) .tools>.action{z-index:5}}
@media(max-width:430px){.steps{margin-right:2px;margin-left:80px}}
@media(max-width:430px){.steps{margin-top:40px;margin-left:auto;margin-right:auto}}
.guidance{word-break:auto-phrase}
.sample{white-space:normal;width:88px;min-width:88px;text-align:center;line-height:1.3}
.sample small{overflow-wrap:anywhere}
.sample>span{overflow-wrap:anywhere;hyphens:auto}:lang(en) .sample>span{font-size:.875rem}
#saijiki .n{overflow-wrap:anywhere;hyphens:auto;padding:0 1px}
html[lang=en] #saijiki .n{font-size:0.75rem}
@media(max-width:430px){.swatches{padding:4px 5px}.tools>.swatch-row+.swatch-row{margin-top:2px}.control-panel{padding-top:8px}}
#sample-list{padding:6px 6px 8px}
#sample-list.all{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}
.thumb span{overflow-wrap:anywhere;hyphens:auto;max-width:100%}
html[lang=en] .thumb{font-size:0.875rem}
.recipe-guide,.note{word-break:auto-phrase}
.recipe-guide{margin-top:14px}
.thumb,.sample{word-break:auto-phrase}
.thumb span{overflow-wrap:break-word}
html[lang=en] .thumb span{hyphens:auto}
.thumbs .thumb canvas{border-radius:50%}
.intro-on .control-panel,.intro-on .guidance,.intro-on #status-row{display:none}
html.big{font-size:118.75%}
html.big.bigger{font-size:137.5%}
.next-note{min-height:1.8em;margin:4px 0 0;font-size:0.875rem;line-height:1.6;color:#5f6252;text-align:center;text-wrap:balance}
.journey{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;width:min(92vw,420px);margin:6px 0 2px;padding:9px 12px;border-block:1px solid #d3cfbf;font-size:0.875rem;line-height:1.5;color:#4f5940;text-align:center}
.journey .journey-ev{flex-basis:100%;font-weight:600;color:#8a3a2e}
#shelf-io-status{margin:8px auto 0;max-width:520px;font-size:0.875rem;line-height:1.5;color:#5f6252}#shelf-io-status:empty{display:none}
.import-preview{margin:8px auto 0;max-width:520px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.import-preview[hidden]{display:none}.import-preview p{flex-basis:100%;margin:0;font-size:0.875rem;line-height:1.5}
.has-ruby{line-height:2.2!important}
#sub.has-ruby{display:block;margin-top:2px}
rt{line-height:1;font-size:max(0.625rem,50%)}
.swatches{gap:0;padding:2px}
.swatch{width:44px;height:44px;min-height:44px;padding:0;border:0;box-shadow:none;background:transparent;justify-content:center}
.swatch::before{content:'';width:36px;height:36px;border-radius:50%;background:var(--c);border:1px solid #bdb8a3;box-shadow:inset 0 -3px 5px rgba(60,40,30,.12)}
.swatch[aria-pressed=true]{background:transparent}.swatch[aria-pressed=true]:not(:focus-visible){outline:0}
.swatch[aria-pressed=true]::before{outline:2px solid #6f7b4a;outline-offset:2px}
@media(hover:hover){.swatch:hover{background:#dce0c8}}
@media(max-width:430px){.swatches{padding:1px;gap:0}.control-panel{padding-left:8px;padding-right:8px}
  .control-panel:has(.swatch-row){padding-top:2px}.tools:has(>.swatch-row){margin-top:4px;row-gap:2px}.swatch-row{gap:0}.tools>.swatch-row+.swatch-row{margin-top:0}}
.sekki{margin:0;font-size:0.875rem;letter-spacing:.1em;color:#5d604f;writing-mode:vertical-rl}
@media(max-width:800px){.sekki{writing-mode:horizontal-tb}}
@media(max-width:360px){.steps{margin:64px 0 2px;justify-content:center}}
@media(max-width:430px){.sekki{letter-spacing:.02em;max-width:calc(100vw - 190px)}}
@media(max-width:430px){html.bigger .steps{margin-top:68px}}@media(max-width:360px){html.bigger .steps{margin-top:72px}}
#sample-list{scroll-padding-inline:6px}
.intro-sub{max-width:20em;word-break:auto-phrase}
#progress-text{display:none}
.journey-box{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(92vw,420px);margin:6px 0 2px;padding:9px 12px;border-block:1px solid #d3cfbf}
.journey-box .journey{border:0;margin:0;padding:0;width:100%}
.journey-box>.note:not([hidden])~.note{display:none}
.zukan-fix{margin:2px 0 4px;min-height:44px;padding:6px 8px;border:0;background:transparent;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c}html.night .zukan-fix{text-decoration-color:#4a463b}
.sources a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
.nav #back,.tools button.outline,#redo-shape,#pair-sample,#update-now{border:1px solid #b9b4a0;background:#f7f4ea}
@media(hover:hover){.tools button.outline:hover,#redo-shape:hover,#pair-sample:hover{background:#dce0c8}}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .control-panel:has(#back:not([hidden])) .tools>.action{bottom:calc(8px + env(safe-area-inset-bottom));left:92px;transform:none;width:calc((100vw - 112px) / 2);z-index:5;font-size:0.9375rem;white-space:normal;line-height:1.3}
  .control-panel:has(#back:not([hidden])) .tools:has(>.action)::before{display:none}
  .control-panel:has(#back:not([hidden])):has(.tools>.action) .nav{flex-wrap:nowrap;justify-content:flex-start}
  .control-panel:has(#back:not([hidden])):has(.tools>.action) .nav #next{min-width:0;margin-left:calc((100vw - 112px) / 2 + 8px);font-size:0.875rem;line-height:1.3;white-space:normal;text-align:center}
  .nav #back{min-width:72px;max-width:72px}
}
.welcome:has(>.welcome-kashi){display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;text-align:center}
.welcome-kashi{display:inline-block;flex:none;width:40px;height:40px;vertical-align:middle;border-radius:0;touch-action:auto;cursor:default}
.zukan{margin:6px auto 0;font-variant-numeric:tabular-nums}
.zukan-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;list-style:none;margin:6px 0 0;padding:0}
.zukan-go{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:100%;min-height:44px;border-radius:8px;cursor:pointer}
.zukan-go:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.zukan-grid canvas{width:36px;height:36px;opacity:.22;filter:grayscale(1) brightness(.6)}
.zukan-grid li.got .zukan-go{background:#f4f1e8}
.zukan-grid li.got canvas{opacity:1;filter:none}
html.night .zukan-grid li.got .zukan-go{background:#27241f}
html.night .zukan-grid li:not(.got) canvas{filter:grayscale(1) brightness(1.6)}
@media(prefers-reduced-motion:no-preference){.scene.settle{animation:settle .42s cubic-bezier(.3,1.5,.5,1)}}
@media(prefers-reduced-motion:no-preference){.scene.leaving{transition:transform .3s ease-in,opacity .3s ease-in;transform:translateY(28px);opacity:0}}
@keyframes settle{0%{transform:scale(1.035,.965)}60%{transform:scale(.99,1.01)}to{transform:none}}
.more-colors{display:block;margin:2px auto 6px;min-height:44px;font-size:.875rem;text-decoration:underline;text-underline-offset:3px;color:#4f5638}
.shelf.quiet>h2{display:none}
.shelf.quiet{margin-top:0}.shelf.quiet>#shelf:empty{display:none}
.finish-options{width:min(92vw,440px);margin:10px auto 4px;text-align:left;border:1px solid #d3cfbf;border-radius:12px;background:#f7f4ea;padding:0 14px 12px}
.finish-options:not([open]){padding-bottom:0}
.finish-options summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;cursor:pointer;font-size:.9375rem;color:var(--ink)}
.finish-options #finish-label::before{content:'▶';display:inline-block;margin-right:8px;font-size:.7em;transition:transform .2s}.finish-options[open] #finish-label::before{transform:rotate(90deg)}
.finish-options summary small{font-size:0.875rem;color:#5f6252;overflow-wrap:anywhere;text-align:right}
.finish-options .field{font-size:.875rem}
.finish-options .field input{font-size:1rem;width:100%}
.app-dialog{border:1px solid #c8c8b9;border-radius:18px;background:#f4f1e8;color:var(--ink);padding:22px 22px 18px;width:min(92vw,420px);max-height:calc(100dvh - 24px);overflow:auto;scrollbar-width:thin}
.app-dialog::backdrop{background:#2a2c2073}
#gift-dialog form{text-align:left}
#gift-dialog button.primary{background:var(--green);border-color:var(--green);color:#fbfaf2}@media(hover:hover){#gift-dialog button.primary:hover{background:var(--green-hover)}}
.app-dialog .kicker{display:block;margin:0;font-weight:inherit;font-size:0.875rem;letter-spacing:.3em;color:#686b58}
.app-dialog .note{margin:8px 0 0;text-align:left;text-wrap:pretty}
#gift-dialog .field{font-size:.875rem}
#gift-dialog .field input{font-size:1rem;width:100%}
#gift-dialog .copybox{width:100%;margin:14px 0 0}
#gift-dialog .share{justify-content:center;margin-top:6px}
.app-dialog .row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:14px}
.app-dialog button[value=close]{border-color:transparent;background:none;color:#5d6249}
#g-status:empty{display:none}
.tip{position:absolute;right:0;bottom:calc(100% + 4px);background:var(--ink);color:#fbfaf2;font:0.875rem system-ui,sans-serif;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none}.tip:empty{display:none}
#gift-copy.stale::after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--seal)}
.shelf-memory{margin:12px auto 0}
#again-from-shelf{border:1px solid #6f7b4a;background:#eef0df;font-size:.9375rem;white-space:normal;text-align:center}
.done-main #again-from-shelf.primary{background:var(--green);color:#fff;border-color:var(--green);font-size:1rem}
.intro-family{margin:0;max-width:20em;font-size:.875rem;line-height:1.5;color:#4f5244;text-wrap:pretty}
.seat-note{margin:0 auto 8px;font-size:.875rem;color:#4f5244;text-align:center}
@media(max-width:800px){.guidance p{font-size:1rem;letter-spacing:normal}}
.guidance>span,.next-note,#recipe-tip,.recipe-guide li,.real-body,.note.small{font-size:.875rem}
.real summary,.collection summary,.samples summary,footer a,.family a{min-height:44px}
.real summary,footer a,.family a{display:inline-flex;align-items:center;justify-content:center}
footer{font-size:0.875rem}
@media(max-width:800px){
  main:has(#done:not([hidden])) .steps{margin-top:72px}
  .workbench:has(>.control-panel[hidden]) .scene{width:min(62vw,232px)}
  .workbench:has(>.control-panel[hidden]) .guidance{min-height:0;margin-top:4px}
  .workbench:has(>.control-panel[hidden]) .guidance p{margin:2px 0 4px}
  .workbench:has(>.control-panel[hidden]) .guidance>span{font-size:.875rem}
  main:has(#done:not([hidden])) .done{margin-top:2px}
  main:has(#done:not([hidden])) .done-main{margin-top:8px}
}
@media(max-width:430px) and (max-height:700px){.workbench:has(>.control-panel[hidden]) .scene{width:min(56vw,210px)}}
.tools>.action.spent,.tools>.action.try{background:#f4f1e8!important;color:#4f5a32!important;border-color:#8a9468!important}
.tools>.action.lead{background:var(--green);color:#fff;border-color:var(--green)}
@media(hover:hover){.tools>.action.lead:hover{background:var(--green-hover)}}
.nav #next.quiet{background:#f7f4ea;color:#4f5a32;border-color:#8a9468}
@media(hover:hover){.nav #next.quiet:hover{background:#eef0df}}
.goal{position:absolute;top:0;right:0;z-index:2;width:56px;height:56px;min-height:0;padding:0;border:1px solid #d0cbb9;border-radius:50%;background:#f4f1e8;box-shadow:0 1px 4px rgba(60,45,30,.18);cursor:pointer}
#goal-dialog h2{margin:4px 0 10px;font-size:1.25rem}
#goal-cv{display:block;width:100%;aspect-ratio:1;touch-action:none;cursor:grab;border-radius:12px}
.goal canvas{width:100%;height:100%;display:block;border-radius:50%}
body.finished nav.family{display:none}
body.working nav.family,body.working .family-label{display:none}
body.working footer>[data-i18n=footer_l],body.working #chaen{display:none}
.sample{position:relative}
.sample .made{position:absolute;top:2px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:0.75rem;line-height:18px;letter-spacing:0}
.done .eat-row{margin-top:4px}
html[lang="en"] body *:not(h1):not(h1 *):not(.seal):not(.roman){letter-spacing:.02em!important;text-indent:0!important}
.real summary{display:list-item}
@media(min-width:801px){.intro-on .workbench{justify-content:center}}
@media(prefers-contrast:more){
  :root{--ink:#26271f}
  .guidance>span,.status,.note,.small,.next-note,.roman,.steps,.recipe-guide summary,.real,.real summary,.optional-tool summary,.samples summary,footer,.family small,#saijiki li,.recipe-heading>span:first-child{color:#3c4030}
  button,.button{color:#2f3423}
  .family,.journey-box,.control-panel{border-color:#8a8c79}
  .seal,.seal-ok{color:#83311f}
}
#intro-sample{white-space:normal;text-wrap:balance;text-align:center;line-height:1.35}
.row.sub:has(>[hidden]:only-child){display:none}
#done-status:empty{margin:0}
main:has(#done:not([hidden])) .real{margin-top:12px}
@media(max-width:430px) and (max-height:700px){html.big body:not(.intro-on) .scene{width:176px;min-width:176px}}
@media(min-width:801px){.control-panel{display:flex;flex-direction:column}.control-panel>.nav{order:1}.control-panel>#theme{order:3}.control-panel>#recipe-guide{order:4}}
.choosing:not(.intro-on) .stage,.choosing:not(.intro-on) #steps,.choosing:not(.intro-on) .nav,.choosing:not(.intro-on) #next-note{display:none}
html.booting .workbench,html.booting .workbench~*{visibility:hidden}
@media(min-width:801px){html.booting body.intro-on .workbench~*{visibility:visible}}
.choosing:not(.intro-on) .workbench{display:block;max-width:760px;margin-inline:auto}
.choosing:not(.intro-on) .control-panel{width:100%;box-sizing:border-box}
details#initial-choices>summary{text-align:center}
#initial-choices .shape-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#initial-choices .shape-choices button{width:100%;min-width:0}
@media(max-width:430px){#initial-choices .shape-choices{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px}#initial-choices .shape-choices .thumb{min-height:64px;padding:4px 1px;font-size:.875rem;letter-spacing:0;overflow-wrap:anywhere;hyphens:auto}#initial-choices .shape-choices .thumb canvas{width:44px;height:44px}}
@media(max-width:800px){.choosing:not(.intro-on) main{padding-top:92px}}
.recipe-guide h3,.recipe-guide h4{font-size:.9375rem;margin:18px 0 6px;color:var(--ink)}
#recipe-plan>p{font-size:.875rem;line-height:1.8}
.recipe-sources{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:0.875rem}
.recipe-sources a{display:inline-flex;align-items:center;min-height:44px;color:var(--green)}
@media(forced-colors:active){
#prefs-btn::before{forced-color-adjust:none;background:ButtonText}
button[aria-pressed=true]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important}
.swatch::before{forced-color-adjust:none}
.steps li[aria-current]{border-bottom:2px solid Highlight}
.recipe-guide li[aria-current]{outline:2px solid Highlight;outline-offset:-2px}
.meter{border:1px solid CanvasText}
#fill{forced-color-adjust:none}
#fill{background:Highlight}
}
.gesture.tap.kinton-leaf span{left:51%;top:62%}
#saijiki li{position:relative}
#saijiki .trio{position:absolute;top:1px;right:3px;font-size:.6875rem;line-height:1;color:var(--seal)}
.family-label{flex:1 0 100%;margin:0;text-align:center;justify-content:center;font-size:0.875rem;letter-spacing:.2em;color:#5f6252}
.footer-legal{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 18px}.footer-run{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 .5em}.footer-run>[hidden]{display:none}
.intro-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin:0}
.intro-alt #hub-home{display:inline-flex;align-items:center;min-height:44px;padding:4px 6px;font-size:.875rem;color:#4f5244;text-underline-offset:4px;text-decoration-color:#b9b39c}
html.night .intro-alt #hub-home{color:#c9c2ae}
@media (max-height:720px){html.big .intro-alt #hub-home{display:none}}
.intro-alt button{min-height:44px;padding:4px 6px;border:0;background:none;font-size:0.875rem;color:#4f5244;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c}
.intro-on .scene>.intro-picks{grid-area:3/1}
.intro-picks{margin:14px 0 0;text-align:center}
.intro-picks>p{margin:0 0 6px;font-size:0.875rem;color:#5f6252}
.intro-pick-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,5.5rem),1fr));gap:8px}
.intro-preview,.intro-pick{white-space:normal}
.intro-pick{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:6px 2px;border:1px solid #d0cbb9;border-radius:12px;background:#f7f4ea;font-size:0.875rem;line-height:1.3}
.intro-pick canvas{width:64px;height:64px}
@media(min-width:801px){.intro-on .scene:has(>.intro-picks:not([hidden])){grid-template-rows:1fr auto auto 1fr;row-gap:16px}.intro-on .scene:has(>.intro-picks:not([hidden]))>#cv{grid-row:1/span 4}.intro-on .scene:has(>.intro-picks:not([hidden]))>.intro{grid-area:2/2}.intro-on .scene>.intro-picks{grid-area:3/2;margin:0}.intro-pick canvas{width:52px;height:52px}
  .intro-on .scene:has(>.intro-picks:not([hidden]))>.goal{display:none}}
.intro-on .scene:has(#intro-preview:not([hidden]))>.goal{display:none}
.intro-pick span{overflow-wrap:anywhere;text-wrap:balance}
.ja-name,.sample small.ja-name{display:block;font-size:.875rem;color:#5f6252;letter-spacing:.1em}
html.night .ja-name,html.night .sample small.ja-name{color:#c9c2ae}
html.night .intro-pick{border-color:#4a463b;background:#27241f}
html.night .intro-alt button,html.night .intro-picks>p{color:#c9c2ae}
.g-mode{display:flex;gap:6px;margin:8px 0 4px}
.g-mode[hidden]{display:none}
.g-mode button{flex:1;min-height:44px;font-size:0.875rem;border:1px solid #b9b4a0;background:#f7f4ea}
.g-mode button[aria-pressed=true]{border-color:var(--green);background:#e6e9d4;color:var(--ink);font-weight:600}
.g-class{display:block;width:100%;min-height:44px;margin:0 0 4px;font-size:0.875rem;border:1px solid #b9b4a0;background:#f7f4ea}.g-class[hidden]{display:none}.g-class[aria-pressed=true]{border-color:var(--green);background:#e6e9d4;color:var(--ink);font-weight:600}
.finish-options .edit-sweet{display:block;margin:10px auto 0;min-height:44px;border:1px solid #b9b4a0;background:#f4f1e8;font-size:0.875rem}
.finish-options .edit-sweet[hidden]{display:none}
.journey .journey-left{font-weight:600;color:#4f5940}
.zukan-done{margin:0;font-size:0.875rem;color:#4f5244}
.zukan-done.grew{color:var(--seal)}
.seal-ok::before{content:'菓' / '';display:inline-block;margin-right:8px;width:1.5em;height:1.5em;line-height:1.5em;text-align:center;border-radius:3px;background:var(--seal);color:#fbfaf2;font-size:0.875rem;transform:rotate(-8deg);vertical-align:middle}
@media(prefers-reduced-motion:no-preference){.seal-ok:not([hidden])::before{animation:press-seal .6s .3s both cubic-bezier(.3,1.5,.5,1)}}
@keyframes press-seal{0%{transform:translateY(-14px) scale(1.8) rotate(-20deg);opacity:0}60%{transform:scale(.9) rotate(-6deg);opacity:1}100%{transform:rotate(-8deg);opacity:1}}
@media(max-width:800px){main:has(>#steps[hidden]) .workbench{margin-top:64px}}
@media(max-width:800px) and (min-height:740px){.workbench:has(>.control-panel[hidden]) .scene{width:min(76vw,290px)}}
.done-sub #keep-gift{border:1px solid #6f7b4a;background:#f4f1e8;font-size:.9375rem}
.shelf.quiet .collection{display:none}
.welcome-go{gap:8px;justify-content:center;margin:0 0 10px}
.welcome-go button{font-size:.9375rem;border:1px solid #6f7b4a;background:#f4f1e8;white-space:normal}
.welcome-go .primary,.draft-prompt .primary{background:var(--green);color:#fff;border-color:var(--green)}
.welcome-go{flex-direction:column;align-items:center}
.welcome-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px}
.welcome-go .welcome-alt button.twist{display:inline-flex;align-items:center;gap:6px}.welcome-go .welcome-alt .twist-art{width:28px;height:28px;flex:none}
.welcome-go .welcome-alt button{min-height:44px;padding:6px 8px;border:0;background:transparent;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c}
@media(hover:hover){.welcome-go .primary:hover,.draft-prompt .primary:hover{background:var(--green-hover)}}
.journey .journey-bowl{display:inline-flex;align-items:center;gap:6px}
.bowl-band{forced-color-adjust:none;display:inline-block;width:28px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 1px #0002}
.journey .journey-gift{flex-basis:100%}
.qr-wrap{margin-top:8px;font-size:.875rem}
.qr-wrap summary{min-height:44px;box-sizing:border-box;display:list-item;width:fit-content;padding:11px 16px;border:1px solid #b9b4a0;border-radius:25px;background:#f7f4ea;color:#474c37;cursor:pointer;list-style-position:inside}
#g-qr{display:block;width:100%;max-width:320px;aspect-ratio:1;height:auto;margin:4px auto 0;image-rendering:pixelated}
#g-qr[hidden]{display:none}
@media print{body.print-shelf *{visibility:hidden}body.print-shelf .shelf,body.print-shelf .shelf *{visibility:visible}body.print-shelf .shelf{position:absolute;inset:0 0 auto;margin:0}body.print-shelf #shelf-io-status,body.print-shelf #import-preview,body.print-shelf #shelf-note{display:none}body.print-today #shelf .bowl-item:not(.today){display:none}}
.install button{min-height:44px}
@media(orientation:landscape) and (max-height:500px){body:not(.intro-on) .workbench{width:calc(100vw - 156px);margin-left:100px;grid-template-columns:min(72svh,38vw,100vw - 450px) minmax(0,1fr);gap:16px}.stage{top:4px}body:not(.intro-on) .stage .scene{width:100%}
  .intro-on .workbench{width:calc(100vw - 156px);margin-left:100px;grid-template-columns:minmax(0,1fr)}
  .intro-on .scene{grid-template-columns:min(52svh,34vw) minmax(0,1fr);align-items:center;gap:16px;width:100%}
  .intro-on .scene>.intro{grid-area:1/2;margin:0}.intro-on #cv{width:100%}}
#pair-cv{display:block;width:100%;aspect-ratio:2;margin-top:8px}
#dough-cv{display:block;width:100%;aspect-ratio:4/3;margin-top:8px;border-radius:12px;background:#e7e1d0;touch-action:none}
.dough-steps{display:flex;gap:4px;margin:10px 0 0;padding:0;list-style:none;font-size:.875rem;color:#5d604f}.dough-steps li{flex:1;padding-top:4px;border-top:3px solid #d6d0bd}.dough-steps li.on{border-color:var(--green);color:var(--ink)}.dough-steps li.ok{border-color:#9fae74}
#dough-dialog .row{justify-content:space-between}
html.night #dough-cv{background:#36322a}html.night .dough-steps{color:#c9c2ae}
.pair-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pair-list button{min-height:44px;font-size:0.875rem}
.fly{position:fixed;z-index:30;pointer-events:none;transform-origin:center}
.hands-row{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 2px 6px;font-size:0.875rem;line-height:1.5;color:#5f6252;text-align:left}
.hands-row span{flex:1 1 12em}
.short-note{flex-basis:100%}
#prefs-btn::after{content:attr(data-cap);position:absolute;left:-16px;right:-16px;display:flex;justify-content:center;justify-content:safe center;direction:rtl;top:40px;font-size:0.875rem;letter-spacing:.02em;line-height:1.2;white-space:nowrap;color:#5d604f}
.steps li[aria-current]{position:relative}
#steps.has-beats{padding-bottom:9px}
.beats{position:absolute;left:50%;top:calc(100% + 3px);translate:-50% 0;display:flex;gap:3px;align-items:center;pointer-events:none}
.beats i{display:block;width:7px;height:7px;border-radius:4px;border:1.5px solid #6f6c5c}
.beats i.past{background:#6f7b4a;border-color:#6f7b4a}
.beats i.now{width:16px;background:var(--seal);border-color:var(--seal)}
.beats i.flash{animation:beat-flash .5s ease-out}
@keyframes beat-flash{0%{transform:scale(1.9);box-shadow:0 0 0 3px rgba(111,123,74,.35)}100%{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.beats i.flash{animation:none}}
.beat{display:block;font-size:.875rem;letter-spacing:.12em;color:#5f6252;margin-top:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:not(.kana) rt.k{display:none}
html.night{--ink:#ece6d6;--paper:#1d1b17;--seal:#e88a72;color-scheme:dark}
html.night .paper{opacity:.06}
html.night a{color:#d9d2bd}
html.night .stage{isolation:isolate}
html.night .stage::before{content:"";position:absolute;inset:-24px 0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(232,170,96,.16),rgba(232,170,96,.05) 60%,transparent)}
html.night #prefs-btn{color:#c9c2ae}
html.night #prefs{border:1px solid #4a463b;background:#2b2822}
html.night #prefs .prefs-h{color:#c9c2ae;border-color:#4a463b}
html.night .roman{color:#c9c2ae}
html.night .draft-prompt{background:#27241f;border:1px solid #4a463b}
html.night .draft-what{color:#cfc8b6}
html.night .collection,html.night .prefs-help{color:#c9c2ae}
html.night .steps{color:#c9c2ae}
html.night .steps li.past{color:#b7c48e}
html.night .steps li button{text-decoration-color:#4a463b}
html.night canvas:focus-visible{outline:2px solid #b7c48e}
html.night .guidance>span{color:#c9c2ae}
html.night .status{color:#c9c2ae}
html.night .meter{background:#343826}
html.night .group{border:1px solid #4a463b;background:rgba(39,36,31,0.54902)}
html.night button,html.night .button{color:#b7c48e}
@media(hover:hover){html.night button:hover,html.night .button:hover{background:#343826}}
html.night button[aria-pressed=true]{background:#343826;color:#b7c48e;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3)}
html.night button:focus-visible,html.night .button:focus-visible,html.night summary:focus-visible,html.night a:focus-visible,html.night [tabindex]:not(canvas):focus-visible{outline:2px solid #b7c48e}
html.night .primary{border:1px solid #b7c48e;background:#27241f}
html.night .note{color:#c9c2ae}
html.night .field{color:#c9c2ae}
html.night .field input{border:1px solid var(--field-line);background:#27241f}
html.night .shelf h2{color:#c9c2ae}
@media(hover:hover){html.night .bowl-item:hover{background:rgba(52,56,38,0.45)}}
html.night .bowl-item .dt{color:#c9c2ae}
html.night footer{color:#c9c2ae}
html.night .swatch-row .label{color:#c9c2ae}
html.night .swatch{border:1px solid #4a463b}
html.night .swatch[aria-pressed=true]{outline:2px solid #b7c48e}
html.night .samples .label{color:#c9c2ae}
html.night .sample[aria-pressed=true]{background:#343826;color:#b7c48e;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3)}
html.night .recipe-guide{border-top:1px solid #4a463b;border-bottom:1px solid #4a463b;color:#c9c2ae}
html.night .recipe-heading>span:first-child{color:#c9c2ae}
html.night #recipe-level{color:#b7c48e}
html.night .recipe-now{border-left:3px solid #b7c48e;background:#27241f}
html.night .recipe-now>span{color:#b7c48e}
html.night .recipe-guide summary{color:#c9c2ae}
html.night .recipe-guide li{color:#c9c2ae}
html.night .recipe-guide li::before{border:1px solid #4a463b}
html.night .recipe-guide li.past{color:#b7c48e}
html.night .recipe-guide li.past::before{border-color:#b7c48e}
html.night .recipe-guide li[aria-current]{background:#343826}
html.night .recipe-guide li[aria-current]::before{color:#e88a72}
html.night .recipe-facts div{border:1px solid #4a463b;background:rgba(39,36,31,0.26)}
html.night .recipe-facts dt{color:#c9c2ae}
html.night .real{color:#c9c2ae}
html.night .real-body{border-left:1px solid #4a463b}
html.night .real-note{background:#27241f}
html.night .control-panel{border:1px solid #4a463b;background:rgba(39,36,31,0.72)}
html.night .tools>.action{border:1px solid #b7c48e;background:#27241f}
@media(hover:hover){html.night .tools>.action:hover{background:#343826}}
html.night .nav{border-top:1px solid #4a463b}
html.night .nav #next:disabled{background:#343826;color:#c9c2ae;border-color:#4a463b}
html.night .samples summary{color:#c9c2ae}
html.night .turn-hint{background-color:#27241f}
html.night .zoom button{border:1px solid #4a463b;background:rgba(39,36,31,0.92)}
html.night .zoom button:disabled{color:#b7c48e}
html.night .gesture.circle span{border:2px dashed #b7c48e}
html.night .gesture.knead-in span{border:2px dashed #b7c48e}
html.night .gesture.knead-in span::after{border-right:2px solid #b7c48e;border-bottom:2px solid #b7c48e}
html.night .gesture.stack span{border-top:2px dashed #b7c48e}
html.night .gesture.stack span::after{border-left:2px solid #b7c48e;border-bottom:2px solid #b7c48e}
html.night .gesture.circle span::after{border-right:2px solid #b7c48e;border-bottom:2px solid #b7c48e}
html.night .gesture.inward span,html.night .gesture.outward span,html.night .gesture.score span{border-top:2px dashed #b7c48e}
html.night .gesture.inward span::after,html.night .gesture.outward span::after,html.night .gesture.score span::after{border-left:2px solid #b7c48e;border-bottom:2px solid #b7c48e}
html.night .gesture.cut span{border-top:2px dashed #b7c48e}
html.night .gesture.cut span::after{border-left:2px solid #b7c48e;border-bottom:2px solid #b7c48e}
html.night .gesture.tap span{border:2px dashed #b7c48e}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){html.night .control-panel{background:rgba(39,36,31,0.92)}}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){html.night .nav{border-top:1px solid #4a463b}}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){html.night .tools:has(>.action)::before{border-top:1px solid #4a463b}}
html.night .welcome{border:1px solid #4a463b;background:#27241f}
html.night .done-main>:not(.primary){border:1px solid #b7c48e;background:#27241f}
html.night .share{color:#c9c2ae}
html.night .row.sub .button,html.night .row.sub button{color:#c9c2ae;text-decoration-color:#4a463b}
html.night .mei button{border:1px solid #4a463b;background:#27241f}
html.night .note.small{color:#c9c2ae}
html.night .family{border-bottom:1px solid #4a463b}
html.night .share a{color:#b7c48e}
@media(hover:hover){html.night .share a:hover{background:#343826}}
html.night .share a:focus-visible{outline:2px solid #b7c48e}
@media(hover:hover){html.night .share a[id$="-line"]:hover{color:#c9c2ae}}
@media(hover:hover){html.night .share a[id$="-fb"]:hover{color:#c9c2ae}}
@media(hover:hover){html.night .share a[id$="-x"]:hover{color:#ece6d6}}
html.night #gift-url{border:1px solid var(--field-line);background:#27241f}
html.night #gift-url:focus-visible{outline:2px solid #b7c48e}
html.night #gift-copy{color:#b7c48e}
@media(hover:hover){html.night #gift-copy:hover{background:#343826}}
html.night .intro{background:rgba(43,40,34,0.95)}
html.night .intro-sub{color:#c9c2ae}
html.night .intro-go button:not(.primary){border:1px solid #4a463b;background:#2b2822}
html.night .tool-help{color:#c9c2ae}
html.night .thumb-name{color:#b7c48e}
html.night .thumb-level{color:#c9c2ae}
html.night .thumb small{color:#c9c2ae}
html.night .optional-tool{border-top:1px solid #4a463b}
html.night .optional-tool summary{color:#c9c2ae}
html.night .more{color:#c9c2ae;text-decoration-color:#4a463b}
html.night .done .acts button{border:1px solid #4a463b;background:#27241f}
@media(hover:hover){html.night .done .acts button:hover{background:#343826}}
html.night .done-sub .button{border:1px solid #b7c48e;background:#27241f}
html.night .done-sub #again{text-decoration-color:#4a463b}
html.night .done-sub #again.primary{border:1px solid #b7c48e;background:#27241f}
html.night .letter{background:#27241f}
html.night .saijiki h3{color:#c9c2ae}
html.night #saijiki li{color:#c9c2ae}
html.night #saijiki li.got{background:#27241f}
html.night .family small{color:#c9c2ae}
html.night .next-note{color:#c9c2ae}
html.night .journey{border-block:1px solid #4a463b;color:#b7c48e}
html.night .journey .journey-ev{color:#e88a72}
html.night #shelf-io-status{color:#c9c2ae}
html.night .swatch::before{border:1px solid #4a463b}
html.night .swatch[aria-pressed=true]::before{outline:2px solid #b7c48e}
@media(hover:hover){html.night .swatch:hover{background:#343826}}
html.night .sekki{color:#c9c2ae}
html.night .journey-box{border-block:1px solid #4a463b}
html.night .nav #back,html.night .tools button.outline,html.night #redo-shape,html.night #pair-sample,html.night #update-now{border:1px solid #4a463b;background:#27241f}
@media(hover:hover){html.night .tools button.outline:hover,html.night #redo-shape:hover,html.night #pair-sample:hover{background:#343826}}
html.night .more-colors{color:#b7c48e}
html.night .finish-options{border:1px solid #4a463b;background:#27241f}
html.night .finish-options summary small{color:#c9c2ae}
html.night .app-dialog{border:1px solid #4a463b;background:#2b2822}
html.night .app-dialog .kicker{color:#c9c2ae}
html.night .app-dialog button[value=close]{color:#b7c48e}
html.night #again-from-shelf{border:1px solid #b7c48e;background:#27241f}
html.night .intro-family{color:#c9c2ae}
html.night .seat-note{color:#c9c2ae}
html.night .tools>.action.spent,html.night .tools>.action.try{background:#27241f!important;color:#b7c48e!important;border-color:#b7c48e!important}
html.night .nav #next.quiet{background:#27241f;color:#b7c48e;border-color:#b7c48e}
@media(hover:hover){html.night .nav #next.quiet:hover{background:#27241f}}
html.night .goal{border:1px solid #4a463b;background:#27241f}
@media(prefers-contrast:more){html.night .guidance>span,html.night .status,html.night .note,html.night .small,html.night .next-note,html.night .roman,html.night .steps,html.night .recipe-guide summary,html.night .real,html.night .real summary,html.night .optional-tool summary,html.night .samples summary,html.night footer,html.night .family small,html.night #saijiki li,html.night .recipe-heading>span:first-child{color:#b7c48e}}
@media(prefers-contrast:more){html.night button,html.night .button{color:#b7c48e}}
@media(prefers-contrast:more){html.night .family,html.night .journey-box,html.night .control-panel{border-color:#4a463b}}
@media(prefers-contrast:more){html.night .seal,html.night .seal-ok{color:#e88a72}}
html.night .recipe-sources a{color:#b7c48e}
html.night .family-label{color:#c9c2ae}
html.night .g-mode button{border:1px solid #4a463b;background:#27241f}
html.night .g-mode button[aria-pressed=true]{border-color:#b7c48e;background:#343826}
html.night .g-class{border:1px solid #4a463b;background:#27241f}
html.night .g-class[aria-pressed=true]{border-color:#b7c48e;background:#343826}
html.night .finish-options .edit-sweet{border:1px solid #4a463b;background:#27241f}
html.night .journey .journey-left{color:#b7c48e}
html.night .zukan-done{color:#c9c2ae}
html.night .done-sub #keep-gift{border:1px solid #b7c48e;background:#27241f}
html.night .welcome-go button{border:1px solid #b7c48e;background:#27241f}html.night .welcome-go .welcome-alt button{border:0;background:transparent;text-decoration-color:#4a463b}
html.night .qr-wrap summary{border:1px solid #4a463b;background:#27241f;color:#b7c48e}
html.night .hands-row{color:#c9c2ae}
html.night #prefs-btn::after{color:#c9c2ae}
html.night .beats i{border:1.5px solid #9b957f}
html.night .beats i.past{border-color:#b7c48e}
html.night .beat{color:#c9c2ae}
html.night .beats i.past{background:#b7c48e}
.g-send{margin:8px 0 4px}.g-send .primary{width:100%;min-height:48px;justify-content:center;text-align:center}
.g-add summary{display:list-item;min-height:44px;padding-top:10px;cursor:pointer;font-size:0.875rem;color:#4f5244}
html.night .g-add summary{color:#c9c2ae}
#tools .action{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nav{flex-wrap:wrap}.nav>.next-note{order:-1;flex:0 0 100%;margin:0;min-height:0}
.nav>.next-note:empty{display:none}
.draft-status{position:sticky;top:4px;z-index:6;padding:8px 12px;border:1px solid var(--seal);background:var(--paper)}
.storage-warning{position:sticky;top:4px;z-index:6;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--seal);background:var(--paper)}.storage-warning[hidden]{display:none}.storage-warning p{margin:0;flex:1 1 14em}
#work-size{position:absolute;top:0;left:0;z-index:2;display:flex;justify-content:center;align-items:center;width:auto;min-width:44px;min-height:44px;margin:0;padding:4px 10px;border-radius:22px;white-space:nowrap;font-size:.875rem;border:1px solid #b9b4a0;background:var(--paper)}
#work-size{left:-8px}.goal{right:-8px}
@media(min-width:801px){#work-size{left:auto;right:64px}}
.large-work .scene{width:min(92vw,620px)!important;min-width:0!important}
#change-undo{border:1px solid #b9b4a0;margin:8px auto}
#deco-move{border:0;background:transparent;gap:4px}#deco-move button{border:1px solid #b9b4a0}
.continue-acts{margin:4px 0;align-items:center}.continue-acts .next-sample{margin:0}
.continue-acts .primary{background:var(--green);color:#fff;border-color:var(--green)}.continue-acts button,#zukan-open{border:1px solid #b9b4a0}
#shelf-personal{margin-top:12px;border:1px solid #b9b4a0;border-radius:12px;padding:12px;min-width:0}#shelf-personal legend{font-size:.875rem}
#sweet-note{width:100%;box-sizing:border-box}#favorites-only{margin:4px auto 12px;border:1px solid #b9b4a0}
.shelf-star{position:absolute;top:4px;left:8px;color:var(--green)}
#again-dialog h2{font-size:1.125rem}#again-dialog .row{flex-direction:column}#again-dialog button{justify-content:center}
@media(max-width:900px) and (min-height:501px),(max-width:900px) and (orientation:portrait){
  .control-panel:has(#back:not([hidden])):has(.tools>.action) .nav{flex-wrap:wrap}
  body.working{padding-bottom:calc(128px + env(safe-area-inset-bottom))}
  .tools:has(>.swatch-row){margin-top:4px}
  .nav>.next-note{font-size:.875rem;line-height:1.4;text-wrap:balance;padding-bottom:4px}
}
html.night #shelf-personal,html.night .continue-acts button,html.night #zukan-open,html.night #change-undo,html.night #work-size,html.night #deco-move button,html.night #favorites-only{border-color:#706d58}
@media(orientation:landscape) and (max-height:500px){
  body.working{padding-bottom:calc(max(48px,var(--act-h,48px)) + 60px)}
  body.working .control-panel .nav{position:fixed;left:calc(min(72svh,38vw,100vw - 450px) + 116px);right:16px;bottom:0;z-index:5;padding:8px;background:var(--paper);display:flex;flex-wrap:wrap;gap:4px}
  body.working .control-panel .nav>.next-note{flex:0 0 100%}
  body.working .control-panel .nav #next{margin-left:0;min-width:100px}
  body.working .control-panel{--dock:calc(100vw - min(72svh,38vw,100vw - 450px) - 152px)}
  body.working .control-panel .tools>.action{position:fixed;z-index:6;bottom:8px;left:calc(min(72svh,38vw,100vw - 450px) + 124px);width:calc(var(--dock) / 2);min-height:48px;margin:0;white-space:normal;line-height:1.3;text-align:center}
  body.working .control-panel:has(.tools>.action) .nav{justify-content:flex-end}
  body.working .control-panel:has(.tools>.action) .nav #next{width:calc(var(--dock) / 2);min-height:max(48px,var(--act-h,48px))}
  body.working .control-panel:has(.tools>.action) .nav #back:not([hidden]){width:72px;margin-right:auto}
  body.working .control-panel:has(#back:not([hidden])) .tools>.action{left:calc(min(72svh,38vw,100vw - 450px) + 204px);width:calc((var(--dock) - 80px) / 2)}
  body.working .control-panel:has(#back:not([hidden])):has(.tools>.action) .nav #next{width:calc((var(--dock) - 80px) / 2)}
}
.done:has(#finish-options[open]) #keep-quick{display:none}
.done:has(#finish-options[open]) #gift-keep-note{display:none}
body.working #update-bar{display:none}
#update-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px}
#update-bar[hidden]{display:none}
body.finished #sub.has-ruby{padding-top:6px}
.journey-box:not(:has(> :not([hidden]):not(:empty))){display:none}
@media(max-width:800px){html.bigger .steps{flex-wrap:wrap;row-gap:2px}}
@media(min-width:431px) and (max-width:800px){.steps{margin-right:60px}html.big .steps{margin:40px auto 2px}}
@media(min-width:431px) and (max-width:660px){.steps{margin:40px auto 2px}}
@media(max-width:800px){.en-offer{position:static;justify-content:center;margin:-6px 0 0}
  .steps[hidden]+.en-offer{position:absolute;top:88px;left:0;right:0;margin:0}}
@media(max-width:800px){footer{margin-bottom:calc(22px + var(--bar-over,0px))}}
.done-identity{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin:8px 0;font-size:.875rem}
.done-identity button,#return-work{border:1px solid #b9b4a0;min-height:44px}
#shelf-saved,#hand-line{margin:4px 0;font-size:.875rem}
#journey-details{width:100%}#journey-details>summary{min-height:44px;padding:12px;cursor:pointer;font-size:.875rem}
#gift-preview{margin-top:10px}#gift-preview>summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:.875rem}
#gift-preview p{overflow-wrap:anywhere;white-space:pre-wrap}
#method-dialog .recipe-guide{margin:0;border:0;padding:0;max-width:100%}
#method-dialog .recipe-now{display:none}#method-dialog .recipe-heading{margin-top:10px}
.app-dialog h2{font-size:1.125rem;text-wrap:balance}
#again-dialog .row{gap:8px}#again-dialog button{min-height:44px}
.shelf-filter{margin:8px auto 12px;font-size:.875rem}.shelf-filter label{display:flex;align-items:center;gap:10px;justify-content:center}
.shelf-filter select{font:inherit;min-height:44px;max-width:100%;padding:8px;background:var(--paper);color:var(--ink);border:1px solid var(--field-line);border-radius:8px}
html.night :is(.done-identity button,#return-work){border-color:#706d58}html.night .shelf-filter select{border-color:var(--field-line)}
#method-dialog :is(p,dd,li){overflow-wrap:anywhere}
@media(max-width:430px){#prefs-btn::after{top:35px}#work-size{font-size:.875rem}}
@media(orientation:landscape) and (max-height:500px){.app-dialog{max-height:calc(100dvh - 16px)}}
#work-size.fine-detail{border-color:var(--green);border-width:2px}
html.night #work-size.fine-detail{border-color:#b7c48e}
#finish-name{display:none}
.guidance,.next-note,.recipe-now,.prefs-help,.tool-help,.deco-state{font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;letter-spacing:normal}
.deco-state{display:block;margin-top:8px;font-size:.875rem;color:#5f6252}
html.night .deco-state{color:#c9c2ae}
#zukan-options{width:100%;font-size:.875rem}#zukan-options>summary{min-height:44px;padding:12px;cursor:pointer}
#shelf-replace{font:inherit;min-height:44px;width:100%;max-width:100%;background:var(--paper);color:var(--ink);padding:8px;border:1px solid var(--field-line);border-radius:8px}
#shelf-replace-go{white-space:normal;text-align:left;margin-top:16px}
#replace-work-dialog button{white-space:normal}
#recipe-context,#recipe-current-filling{text-align:left}
@media(max-width:430px){
  .swatches{display:grid;grid-template-columns:repeat(4,44px);justify-content:center;gap:2px 10px;width:auto;max-width:100%;overflow:visible;padding:1px 10px}
  .swatch{width:44px;min-width:44px;min-height:44px}
  #tools>.action,.nav button,.intro-alt button{font-size:.875rem}
}
@media(max-width:430px) and (min-height:701px){
  body.working:has(#tools>.swatch-row) .scene{width:min(66vw,260px);min-width:0}
  html.big body.working:has(#tools>.swatch-row) .scene{width:min(60vw,230px)}
  html.bigger body.working:has(#tools>.swatch-row) .scene{width:min(56vw,210px)}
}
@media(min-width:801px) and (min-height:501px){
  body.finished .workbench:has(>.control-panel[hidden]){grid-template-areas:"scene ." "scene guide" "scene done" "scene .";grid-template-rows:1fr auto auto 1fr;row-gap:12px}
  body.finished .workbench:has(>.control-panel[hidden])>.stage{display:contents}
  body.finished .workbench:has(>.control-panel[hidden])>.stage>.scene{grid-area:scene;align-self:start}
  body.finished .workbench:has(>.control-panel[hidden])>.stage>.guidance{grid-area:guide;margin:0}
  body.finished .workbench:has(>.control-panel[hidden])>#done{grid-area:done;align-self:start}
}
.done-record{margin:10px 0;text-align:center;font-size:.875rem}
.done-record{display:flex;flex-wrap:wrap;justify-content:center;gap:0}.done-record>p:not([hidden],.zukan-done)~p:not([hidden],.zukan-done)::before{content:'・'}.done-record>.zukan-done{flex-basis:100%}.done-record>p{margin:4px 0}.done-record:has(>p:not([hidden])){padding:8px 0}
#pair-caption{text-wrap:balance}#pair-list button{white-space:normal}
.real-checklist{text-align:left}.field input{scroll-margin-block:80px}
@media(min-width:801px) and (min-height:501px){
 body.finished .workbench:has(>.control-panel[hidden]){grid-template-areas:"scene ." "scene guide" "scene done" "turn ."}
 body.finished .stage>.turn-hint{grid-area:turn;align-self:start}
}
#done-name:focus,#shelf-title:focus{outline:2px solid var(--green);outline-offset:4px}
.personal-editor{margin:16px 0;padding:12px;border:1px solid currentColor;border-radius:12px;text-align:left}
.personal-editor h3{margin:0 0 12px;font-size:1rem;font-weight:500}
.personal-editor #shelf-personal{margin:12px 0}
#personal-status:empty{display:none}
.pair-identities{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;font-size:.875rem;line-height:1.6;text-align:center}
.pair-identities span{overflow-wrap:anywhere}
.pair-zoom{justify-content:center;align-items:center;flex-wrap:wrap}
#pair-scale{font-variant-numeric:tabular-nums;min-width:3em}
#gift-preview-art{display:block;width:min(100%,240px);height:auto;margin:12px auto}
.shape-effect{display:block;font-size:.875rem;line-height:1.5;font-weight:400;white-space:normal}
#shelf-search-wrap{flex-wrap:wrap;gap:12px}
#shelf-search-wrap label{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
#shelf-search{min-width:0;width:min(15em,100%);box-sizing:border-box;min-height:44px;padding:8px;font:inherit;background:var(--paper);color:var(--ink);border:1px solid var(--field-line);border-radius:8px}
#prefs>details{border-top:1px solid #c8c8b9}#prefs>details>summary{min-height:44px;padding:12px 16px;cursor:pointer;font-size:.875rem}
.prefs-group{display:flex;flex-direction:column}.view-controls{width:100%;max-width:440px;margin:4px auto;text-align:center;font-size:.875rem}.view-controls>summary,#again-options>summary{min-height:44px;padding:12px;cursor:pointer}.view-controls .row{justify-content:center;gap:6px}.view-controls button{min-width:44px;min-height:44px;font-size:.875rem}
#again-main{flex-direction:column;align-items:stretch}#again-options{margin:8px 0}#again-variants{justify-content:flex-start}#gift-box:has(#gift-copy[hidden]) input{padding-right:12px}
#g-share.stale{outline:2px solid var(--seal);outline-offset:2px}html.night #prefs>details{border-color:#4a463b}
@media(min-width:801px) and (min-height:501px){
 body.finished .workbench:has(>.control-panel[hidden]){grid-template-areas:"scene ." "scene guide" "scene done" "turn ." "view .";grid-template-rows:1fr auto auto auto auto}
 body.finished .stage>#turn-controls{grid-area:view;align-self:start}
}
.done{min-width:0;width:100%}.done>.journey-box,.done>.finish-options{min-width:0;max-width:100%}
.finish-group-label{margin:14px 0 6px;font-size:.875rem;color:var(--ink);text-align:center}
#real-materials,#real-method{min-height:44px;max-width:100%;white-space:normal}
.real-body button{max-width:100%;white-space:normal}
#recipe-portion:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:430px) and (orientation:portrait){
 body.working[data-work="simple"] .workbench:not(.large-work):not(:has(#tools>.swatch-row)) .scene{width:min(76vw,max(180px,calc(100svh - 360px)),300px);min-width:0}
 html.big body.working[data-work="simple"] .workbench:not(.large-work):not(:has(#tools>.swatch-row)) .scene{width:min(70vw,max(160px,calc(100svh - 400px)),270px)}
 html.bigger body.working[data-work="simple"] .workbench:not(.large-work):not(:has(#tools>.swatch-row)) .scene{width:min(64vw,max(150px,calc(100svh - 440px)),240px)}
 html[lang="en"] .intro-pick-list{gap:6px}
 html[lang="en"] .intro-pick-list button{padding-inline:4px;hyphens:none}
 html[lang="en"] .intro-pick-list span{overflow-wrap:normal;hyphens:manual;letter-spacing:0}
}
.work-result{position:absolute;z-index:2;width:28px;height:28px;margin:-14px;pointer-events:none;border:2px solid var(--green);border-radius:50%;background:transparent;opacity:.85;animation:work-result-in 180ms ease-out}
.work-result::after{content:'✓';position:absolute;right:-12px;top:-12px;width:18px;height:18px;border-radius:50%;background:var(--paper);text-align:center;font:14px/18px system-ui;color:var(--ink)}
@keyframes work-result-in{from{opacity:0;transform:scale(.8)}to{opacity:.85;transform:scale(1)}}
.work-result.still{animation:none}
@media(prefers-reduced-motion:reduce){.work-result{animation:none}}
.done-identity .done-record{flex-basis:100%;margin:0}.done-identity .done-record:has(>p:not([hidden])){padding:0}
.album-note{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;padding:12px;border:1px solid currentColor;border-radius:8px}
.album-choice{display:flex;align-items:center;gap:10px;min-height:44px;text-align:left;margin-block:12px}.album-choice input{width:24px;height:24px;flex-shrink:0}
@media(max-width:360px){
 html[lang="en"] .intro-pick-list{grid-template-columns:1fr}
 html[lang="en"] .intro-pick-list button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:6px 10px;text-align:left}
 html[lang="en"] .intro-pick-list canvas{width:44px;height:44px}
 html[lang="en"] .intro-pick-list span{font-size:.875rem;text-wrap:pretty}
 html[lang="en"] .sample{width:104px;min-width:104px}
 html[lang="en"] .sample>span{hyphens:none;overflow-wrap:normal;font-size:.875rem}
}
@media(max-width:430px){
 html.big[lang="en"] .intro-pick-list{grid-template-columns:1fr}
 html.big[lang="en"] .intro-pick-list button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:6px 10px;text-align:left}
 html.big[lang="en"] .intro-pick-list canvas{width:44px;height:44px}
 html.big[lang="en"] .intro-pick-list span{font-size:.875rem;text-wrap:pretty}
}
.intro-preview{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px auto;min-height:44px;padding:0 12px;border:0;background:none;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9b39c;cursor:pointer}
.intro-preview[hidden]{display:none}
.intro-preview canvas{width:64px;height:64px;cursor:pointer;touch-action:auto}
#album-preview{display:block;width:min(100%,400px);height:auto;aspect-ratio:1;margin:12px auto;cursor:default;touch-action:auto}
.again-help{display:block;margin:-4px 0 8px;font-size:.875rem;line-height:1.5;color:var(--ink)}
#welcome .welcome-memory{display:block;flex-basis:100%;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px;font-size:.875rem}
@media(min-width:801px){body.choosing #sample-list .sample{width:128px;min-width:128px}body.choosing #sample-list .sample canvas{width:104px;height:104px}}
@media(min-width:801px) and (min-height:501px),(orientation:landscape) and (max-height:500px){
 body.working:not(.intro-on) .workbench{grid-template-areas:"scene ." "scene guide" "scene status" "scene panel" "scene .";grid-template-rows:1fr auto auto auto 1fr;row-gap:8px}
 body.working:not(.intro-on) .workbench>.stage{display:contents}
 body.working:not(.intro-on) .stage>.scene{grid-area:scene;position:sticky;top:22px;align-self:start}
 body.working:not(.intro-on) .stage>.guidance{grid-area:guide;margin:0;max-width:none;min-height:0}
 body.working:not(.intro-on) .stage>.status{grid-area:status;margin:0;justify-content:center}
 body.working:not(.intro-on) .workbench>.control-panel{grid-area:panel;align-self:start}
}
@media(orientation:landscape) and (max-height:500px){body.working:not(.intro-on) .stage>.scene{top:4px}body.working:not(.intro-on) .workbench{grid-template-rows:auto auto auto auto 1fr}}
body:has(#draft-prompt:not([hidden])) #welcome{display:none}
html[lang="en"] .steps{column-gap:6px}
.real-photo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.real-photo[hidden]{display:none}
.real-photo img{display:block;flex:0 0 100%;max-width:min(100%,320px);max-height:240px;margin:0 auto;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px rgba(70,55,35,.15)}
.real-photo img[hidden]{display:none}
.real-photo .note{flex:0 0 100%;margin:0}
@media (prefers-reduced-motion:no-preference){canvas#cv.flip{animation:flip .5s ease-in-out}}
@keyframes flip{0%{transform:none}45%{transform:scaleY(.06)}to{transform:none}}
#finish-options.split:not(.personal) .personal-editor,#finish-options.personal>:not(summary):not(.personal-editor){display:none}
@media(min-width:801px) and (min-height:501px){main{padding-inline:calc(4.2vw + 88px)}.workbench{max-width:100%;grid-template-columns:minmax(300px,600px) minmax(300px,1fr)}.scene{max-width:100%}}
.zukan-line{flex-basis:100%;text-align:center}.zukan-line>p{display:inline;margin:0}.zukan-line>#zukan-open{margin-left:8px}.zukan-line:not(:has(>:not([hidden]))){display:none}
.zukan-line>#zukan-open{border:0;background:none;padding:0 4px;min-height:44px;display:inline;vertical-align:baseline;text-decoration:underline;text-underline-offset:4px;font-size:.875rem;color:inherit}
.continue-acts:has(>#next-sample:not([hidden])) #again-quick:not(.primary){border:0;background:none;padding:0 6px;min-height:44px;text-decoration:underline;text-underline-offset:4px;order:1}
.eat-row #eat.primary{font-size:1rem;min-height:50px;padding:10px 26px;background:var(--green);color:#fff;border-color:var(--green)}
@media(hover:hover){.eat-row #eat.primary:hover{background:var(--green-hover)}}
.zukan-season::before{content:"\A";white-space:pre}
html.intro-early #intro[hidden],html.intro-early #intro-preview[hidden]{display:flex!important}
html.booting body.intro-on #intro{visibility:visible}
.notfound main{justify-content:center;text-align:center;gap:6px}.notfound h1{writing-mode:horizontal-tb;font-size:1.5rem;letter-spacing:.12em}.notfound h2{font-size:1.125rem;font-weight:500;margin:18px 0 0}.notfound p{line-height:1.75}
.notfound main>*{max-width:100%;overflow-wrap:anywhere}
   それでも 1 語が札に入らないとき（字 200% の幅 320px）だけは折る（break-word。頁を横に送らせない）
html[lang="en"] :is(.thumb,.sample,.intro-pick) span{overflow-wrap:break-word;hyphens:manual;word-break:normal}
html[lang="en"] .sample{width:104px;min-width:104px}
html.big[lang="en"] .sample{width:6.5rem;min-width:6.5rem}
@media(max-width:430px){html[lang="en"] #initial-choices .shape-choices{grid-template-columns:repeat(3,minmax(0,1fr))!important}html[lang="en"] #initial-choices .shape-choices .thumb{overflow-wrap:break-word;hyphens:manual}html.big[lang="en"] #initial-choices .shape-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:800px){.hub-top{right:64px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#5d604f;font-size:0.875rem;letter-spacing:.02em}
  .hub-top::before{content:"";display:block;width:22px;height:22px;margin:auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
  .hub-long{display:none}.hub-short{display:block;position:absolute;left:-12px;right:-12px;top:40px;text-align:center;line-height:1.2;white-space:nowrap}
  html.night .hub-top{background:transparent;color:#c9c2ae}}
@media(max-width:800px){html[lang="ja"] .hub-top{right:max(64px,calc(18px + 3.3em))}}
@media(max-width:800px){html[lang="en"] .hub-top{right:calc(18px + 5.2em)}}
@media(max-width:430px){.hub-short{top:35px}.sekki{max-width:calc(100vw - 244px)}html[lang="en"] .sekki{max-width:calc(100vw - 184px - 5.2rem);font-size:.75rem;letter-spacing:0;line-height:1.1}}
@media(forced-colors:active){.hub-top::before{forced-color-adjust:none;background:LinkText}}
.sk-short{display:none}
@media(max-width:430px){.sk-long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sk-short{display:inline}}
@media(max-width:360px){html[lang="en"] .hub-short{display:none}}
@media(max-width:800px){header h1{flex-shrink:0;white-space:nowrap}}