:root{font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;color:var(--ink);background:var(--paper);font-synthesis:none;
  --ink:#36372d;--paper:#eeeade;--seal:#9a4739;--green:#657343;--green-hover:#536139;
  --field-line:#7a7c68}
*{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(:lang(ja)) :where(button){word-break:auto-phrase}
.paper{position:fixed;inset:0;pointer-events:none;opacity:.12;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}
.brand{position:absolute;left:4.2vw;top:42px;z-index:2;display:flex;align-items:center;flex-direction:column;gap:22px}
.en-offer{position:absolute;z-index:5;top:156px;right:8px;display:flex;align-items:center;margin:0;font:.875rem system-ui,sans-serif}.en-offer a{color:#474c37;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-underline-offset:3px}.en-offer button{min-height:44px;min-width:44px;padding:0 10px;font-size:1rem}
html.night .en-offer a{color:#d9d3c1}
@media(min-width:801px){.en-offer{top:76px;right:8px}}
#prefs-btn{position:absolute;z-index:5;right:16px;top:20px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#5d604f}
#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")}
#prefs{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,#prefs .button{min-height:44px;padding:8px 16px;border:0;background:transparent;text-align:left;justify-content:flex-start;font-size:.875rem}
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-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.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:96px auto 4px;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}
.collection{margin:8px auto 14px;max-width:520px;color:#5f6252}
.collection summary{cursor:pointer;min-height:44px;display:list-item;list-style-position:inside;text-align:center;padding:10px 16px;font-size:0.875rem}
.collection .count{font-variant-numeric:tabular-nums;letter-spacing:0}
@media(max-width:800px){.draft-prompt{margin-top:116px}}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0;font-size:0.875rem;letter-spacing:.12em;color:#666759;flex-wrap:wrap;justify-content:center}
.steps li{padding:4px 8px;border-bottom:1px solid transparent;white-space:nowrap}
.steps li button{font:inherit;letter-spacing:inherit;color:inherit;padding:0;min-height:0;border-radius:0}
.steps li button{display:inline;line-height:inherit;vertical-align:baseline}
.steps li{position:relative}.steps li button::after{content:"";position:absolute;top:min(-8px,calc(50% - 22px));bottom:min(-8px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
.steps li.past{color:#5d6448}
.steps li[aria-current]{color:#36372d;border-bottom-color:var(--seal)}
.scene{width:min(calc(100svh - 420px),62vw,620px);min-width:260px;aspect-ratio:1;position:relative;flex-shrink:0;border-radius:18px;transition:background-color .9s linear}
.scene.kiln{background-color:#1c1512}
canvas{width:100%;height:100%;touch-action:pinch-zoom;display:block;cursor:grab;border-radius:18px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.finished #cv,body.marking #cv,body.glazing #cv,body.firing #cv{touch-action:pan-y pinch-zoom}
body.finished.mend-touch #cv{touch-action:pinch-zoom}
canvas:active{cursor:grabbing}
canvas:focus-visible{outline:2px solid #697747;outline-offset:4px}
.guidance{text-align:center;margin-top:10px;max-width:34em}
.guidance p{font-size:1rem;letter-spacing:.16em;margin:4px 0 8px}
.guidance>span{font-size:0.9375rem;color:#5f6252}
.status{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:0.875rem;letter-spacing:.1em;color:#5f6252}
.meter{width:140px;height:6px;background:#c6ccb3;position:relative;border-radius:3px}
#fill{display:block;height:100%;width:0;background:#738146;position:relative}
#band{position:absolute;top:-3px;bottom:-3px;background:#9a473955}
#band::after{content:attr(data-label);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:.875rem;line-height:1.2;letter-spacing:0;white-space:nowrap;color:#8a3d31}
.status.labeled{padding-bottom:1.3rem}
.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}
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,a:focus-visible,summary:focus-visible{outline:2px solid #52682f;outline-offset:3px}
button:disabled,#next[aria-disabled=true]{opacity:.4;cursor:default}
#air:disabled,#quench:disabled{opacity:1}
.primary{border:1px solid #6f7b4a;background:#f4f1e8}
.rep{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.hold{user-select:none;-webkit-user-select:none;touch-action:none;min-width:120px;justify-content:center}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.row.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;max-width:480px;margin-inline:auto}
.act{display:flex;justify-content:center;gap:8px;min-width:0}
.row.nav button{min-height:48px}
.act>button{flex:1 1 auto;max-width:240px;font-size:1rem;white-space:normal;line-height:1.3;background:var(--green);color:#fff;border:1px solid var(--green)}
@media(hover:hover){.act>button:hover{background:var(--green-hover)}}
.nav:has(#next.ready) .act>button{background:#f4f1e8;color:#4f5a32;border-color:#6f7b4a}
.act>#quench{background:#f4f1e8;color:#4f5a32;border-color:#6f7b4a}
.act>:is(#air,#quench){white-space:nowrap;padding-inline:12px}
#back{grid-column:1}#act{grid-column:2}#next{grid-column:3}
.row.nav:has(#next.ready){grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
.row.nav:has(#next.ready):not(:has(#act>button:not([hidden]))) #next{grid-column:2/4}
.row.nav:has(#next.ready):not(:has(#act>button:not([hidden]))) #act{display:none}
#next.ready{min-width:6em}
.next-bar{display:flex;flex-direction:column;align-items:center;align-self:stretch}
@media(orientation:portrait) and (max-width:1099px){
  body:not(.intro-on):not(.draft-on):not(.finished) .next-bar:has(>.nav:not([hidden])){position:fixed;left:0;right:0;bottom:0;z-index:4;background:var(--paper);border-top:1px solid #c8c4b4;box-shadow:0 -5px 18px rgba(70,55,35,.1);padding:8px 12px max(6px,env(safe-area-inset-bottom))}
  body:not(.intro-on):not(.draft-on):not(.finished) .next-bar>.nav{margin-top:0}
  body:not(.intro-on):not(.draft-on):not(.finished):has(.next-bar>.nav:not([hidden])){padding-bottom:calc(80px + 1.8rem + env(safe-area-inset-bottom))}
  html:has(body:not(.intro-on):not(.draft-on):not(.finished) .next-bar>.nav:not([hidden])){scroll-padding-bottom:calc(80px + 1.8rem + env(safe-area-inset-bottom))}
  .next-bar .next-note{min-height:0;margin:2px 0 0;line-height:1.5;max-width:100%;box-sizing:border-box}
}
.next-note{min-height:1.8em;margin:4px 0 0;font-size:0.875rem;color:#5f6252;text-align:center;text-wrap:balance}
.next-bar .next-note:has(rt:not(.k)),html.kana .next-bar .next-note:has(rt){padding-top:.6rem;line-height:2.1}
.note{font-size:0.875rem;line-height:1.8;color:#5f6252;text-align:center;max-width:34em}
.sliders{display:flex;flex-direction:column;gap:4px;width:min(90vw,320px)}
.range{display:grid;grid-template-columns:5em 1fr;align-items:center;font-size:0.875rem;color:#5f6252}
.range input{width:100%;min-height:44px;accent-color:#738146}
.done{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.field{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:#5f6252;margin-top:8px}
.field input{font:1rem 'Yu Mincho','Hiragino Mincho ProN',serif;min-height:44px;padding:8px 10px;border:1px solid var(--field-line);border-radius:8px;background:#fbf9f1;color:#36372d;width:min(80vw,260px)}
.shelf{margin-top:36px;width:min(96vw,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{display:flex;justify-content:safe center;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.bowl-item{flex:none;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:#666759}
.bowl-item[aria-current] span{color:#36372d;border-bottom:1px solid var(--seal)}
.shelf-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin-top:10px}
.shelf-actions button,.shelf-actions .button{font-size:0.875rem;min-height:44px;padding:6px 10px}
#shelf-io-status{flex-basis:100%;min-height:1.5em;font-size:0.875rem;color:#5f6252}
footer{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;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){.brand{left:18px;top:24px;gap:14px}h1{font-size:32px}.roman{display:none}.seal{font-size:14px}
  main{padding:0 10px 40px}.steps{gap:0}.scene{width:min(92vw,560px)}
  .glazing .scene{position:sticky;top:0;z-index:2;background:var(--paper)}.guidance p{letter-spacing:.08em}
  button,.button{padding:9px 10px;font-size:0.875rem}.group{padding:2px 4px}}
@media(max-width:370px){button,.button{padding:8px 7px}}
@media(max-width:800px) and (orientation:portrait){.scene{width:max(260px,min(92vw,560px,calc(100svh - 360px)))}}
@media(max-width:800px) and (orientation:portrait){.intro-on .scene{aspect-ratio:1/.8;overflow:hidden}.intro-on .scene>#cv{height:auto;aspect-ratio:1;margin-top:-20%}}
@media(max-width:800px) and (orientation:portrait){body.finished .scene{margin-bottom:-14vw}body.finished #cv:focus-visible{outline:none}body.finished .scene:has(#cv:focus-visible)::after{content:'';position:absolute;inset:-4px -4px calc(14vw - 4px);border:2px solid #697747;border-radius:22px;pointer-events:none}html.night body.finished .scene:has(#cv:focus-visible)::after{border-color:#b7c48e}}
@media(max-width:800px) and (orientation:portrait) and (max-height:700px){:is(html.big,html.kana) .scene{min-width:0;width:max(190px,min(92vw,560px,calc(100svh - 400px)))}}
.scene.toko{background:radial-gradient(circle at 50% 56%,#322d27,#191512 74%);box-shadow:inset 0 0 44px #0000007a;border-radius:18px}
.ki::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--seal);margin-left:5px;flex:none}
.kisetsu{font-size:0.75rem;letter-spacing:.08em;color:var(--seal);margin-left:4px}
.view{gap:6px}
.carve{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.pad{width:160px;height:160px;border-radius:10px;touch-action:none;cursor:crosshair;border:1px solid #cbbd9f}
@media(max-width:800px){.brand{flex-direction:row;gap:10px}.brand h1{writing-mode:horizontal-tb;font-size:26px;letter-spacing:.2em}.steps{margin:70px 0 8px;flex-wrap:wrap;justify-content:center}.steps li{white-space:nowrap}}
footer>[data-i18n=footer_l],footer>#chaen{flex:1 0 100%;justify-content:center;text-align:center}
.family-label{flex:1 0 100%;margin:0;text-align:center;font-size:0.875rem;letter-spacing:.2em;color:#5f6252}a.family-label{display:block;padding:12px 0}
@media(max-width:800px){footer{row-gap:6px;align-items:baseline}}
rt{font-size:max(.55em,.625rem);letter-spacing:0;font-family:system-ui,sans-serif}
.term{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:0.875rem;color:#5f6252;text-underline-offset:4px}
.status.in #band{background:#9a4739aa}
.status.warn #fill{background:var(--seal)}
.status.warn{color:#8a3a2e}
.bowl-item.pinned span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--seal);margin-right:4px;vertical-align:middle}
@media(max-width:800px){.steps li{padding:4px 6px;letter-spacing:.04em}.big .steps li{padding-inline:3px;letter-spacing:0}}
@media(max-width:800px){.big:lang(en) .steps{font-size:.76rem}}
@media(max-width:370px){.steps li{padding:4px 3px}}
@media(max-width:370px){html.big.bigger .steps{font-size:.8rem;gap:0;letter-spacing:0}html.big.bigger .steps li{padding-inline:1px}html.kana.big.bigger .steps{font-size:.72rem}}
@media(max-width:370px){html.kana .steps{gap:0;letter-spacing:0}html.kana .steps li{padding-inline:1px}html.kana .steps rt{font-size:.5rem;letter-spacing:-.04em}}
@media(max-width:370px){:root:lang(en) .steps{gap:0}:root:lang(en) .steps li{padding-inline:2px}}
@media(max-width:370px){:root:lang(en) .steps li+li,html.big .steps li+li,html.kana .steps li+li{background:linear-gradient(#c9c4b1,#c9c4b1) left 55%/1px 1em no-repeat}}
.revisit{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:4px 0 0}
.revisit button{font-size:0.875rem;min-height:44px;padding:6px 12px;border:1px solid #7a7c68;background:#f4f1e88c}
@media(hover:hover){.revisit button:hover{background:#dce0c8}}
.finished #tools,.finished .row.nav,.finished #next-note{display:none}
.finished .guidance p,.finished .guidance>span{line-height:1.7}
.finished .guidance :is(p,span):has(rt){line-height:2}
body.finished nav.family{display:none}
.done .note a{color:#474c37;text-underline-offset:4px}
.done .note a{display:inline-flex;align-items:center;min-height:44px}
.about{margin-top:26px;width:min(92vw,440px);font-size:.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{margin-top:26px;width:min(92vw,440px);font-size:0.875rem;color:#5f6252}
.real summary{cursor:pointer;text-align:center;letter-spacing:.12em;padding:12px 8px;min-height:44px}
.real ol{line-height:1.9;padding-left:1.4em}
.share{gap:14px;font-size:0.875rem;letter-spacing:.12em;color:#76776a}
.share a{color:inherit;text-underline-offset:4px}
.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:13px system-ui,sans-serif;min-height:44px;padding:12px 48px 12px 10px;border:1px solid var(--field-line);border-radius:10px;background:#fbf9f1;color:#36372d;width:100%;text-overflow:ellipsis}
#gift-url:focus-visible{outline:2px solid #52682f;outline-offset:1px}
#gift-copy{position:absolute;right:0;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}
#gift-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}
#gift-dialog::backdrop{background:#2a2c2073}
#gift-dialog form{text-align:left}
#gift-dialog .kicker{display:block;font-size:0.875rem;letter-spacing:.3em;color:#686b58;margin:0;font-weight:inherit}
#gift-dialog .note{margin:8px 0 0;text-align:left;text-wrap:pretty}
#gift-dialog .field{flex-direction:column;align-items:stretch;gap:4px;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}
#gift-dialog .row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:14px}
dialog button.primary:not(#reset-go){background:var(--green);border-color:var(--green);color:#fbfaf2}@media(hover:hover){dialog button.primary:not(#reset-go):hover{background:var(--green-hover)}}
#reset-go{color:var(--seal);border-color:var(--seal)}
#gift-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:.75rem 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)}
.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:#36372d}
.guidance>span{display:block}.guidance p,.guidance>span{text-wrap:balance}.note{text-wrap:pretty}
:lang(ja) .guidance p,:lang(ja) .guidance>span,:lang(ja) .note,:lang(ja) .journey,:lang(ja) .letter,:lang(ja) .io-hint{word-break:auto-phrase}.io-hint{text-wrap:pretty}
.tools>button:not(.primary),.tools .moves>button,.row.view button:not(.primary),.done .row>button:not(.primary),#back{border:1px solid #7a7c68;background:#f4f1e88c}
@media(hover:hover){.tools>button:not(.primary):hover,.tools .moves>button:hover,.row.view button:not(.primary):hover,.done .row>button:not(.primary):hover,#back:hover{background:#dce0c8}}
@media(max-width:800px){.tools button,.row button,.row .button{font-size:0.875rem}}
@media(max-width:370px){.tools button,.row button,.row .button{font-size:0.8125rem}}
.tools .moves{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex-basis:100%}
#shape-pick::after{content:'\25BE';margin-inline-start:4px;font-size:.8em}#shape-pick[aria-expanded=true]::after{content:'\25B4'}
.tools .moves>#shape-pick.quiet,html.night .tools .moves>#shape-pick.quiet{border-color:transparent;background:none}
.done .keep-row{margin-top:10px}
.done .pass-row{margin-top:2px;width:min(92vw,420px)}
.done .view{margin-top:4px}
.done .pass-row,.done .view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(92vw,420px)}
.done .pass-row>#use,.done .view>.save-row{grid-column:1/-1}
.done .pass-row>*,.done .view>button{width:100%;justify-content:center}
.done .pass-row>[hidden],.done .view>[hidden]{display:none}
.done .view>#haiken,.done .view>#save{grid-column:auto}
.done .view>button:not(.primary):not(.hold){border-color:transparent;background:none;text-decoration:underline;text-underline-offset:4px;font-size:.875rem}
.done .view>#haiken,.done .view>#save{letter-spacing:.02em;padding-inline:2px;white-space:nowrap}
@media(max-width:24rem){.done .view>#haiken,.done .view>#save{grid-column:1/-1}}
html.big .done .view>#haiken,html.big .done .view>#save{grid-column:1/-1}
.done .view>#save:has(+#mend:not([hidden])){grid-column:auto}
.done .pass-row:has(>#gift[hidden])>#again{grid-column:1/-1}
.done .gift-keep{width:min(92vw,420px);margin-top:0}.done .gift-keep>#keep:not(.quiet){width:100%;justify-content:center}
.sound-ask{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin:12px 0 0;font-size:0.875rem;color:#5f6252}.sound-ask[hidden]{display:none}
.sound-ask button{border:1px solid #7a7c68;background:#f4f1e88c}
.sound-ask>span{flex-basis:100%;text-align:center}
.save-row{flex-basis:100%;justify-content:center;gap:6px}.save-row[hidden]{display:none}
#done-status{margin:6px 0 0;min-height:1.8em}
.family a,.family>span{display:inline-flex;flex-direction:column;align-items:center;line-height:1.3}
.family small{font-size:0.875rem;letter-spacing:.06em;color:#666759}
.family [aria-current]>span{border-bottom:1px solid var(--seal)}
.fill,.done .row>.fill{background:var(--green);color:#fff;border:1px solid var(--green)}
@media(hover:hover){.fill:hover,.done .row>.fill:hover{background:var(--green-hover)}}
#pull.now{background:var(--seal);color:#fff;border-color:var(--seal);box-shadow:0 0 0 3px #9a473933}
@media(prefers-reduced-motion:no-preference){#pull.now{animation:pulse 1.1s ease-in-out 4}
#pull.now.hold{animation-iteration-count:infinite}}
@media(prefers-reduced-motion:reduce){.scene{transition:none}#pull.now{box-shadow:none}}
@keyframes pulse{50%{box-shadow:0 0 0 9px #9a473926}}
#next.ready{background:var(--green);color:#fff;border-color:var(--green)}
@media(prefers-reduced-motion:no-preference){#next.ready{animation:pulse-g 1.4s ease-in-out 3}}
@keyframes pulse-g{50%{box-shadow:0 0 0 8px #6573432e}}
.more-done{margin-top:10px;text-align:center}
.more-done summary{cursor:pointer;font-size:0.875rem;letter-spacing:.12em;color:#5f6252;padding:12px;min-height:44px;box-sizing:border-box}
.more-done .keep-row{margin-top:4px}
.intro{width:min(92vw,440px);box-sizing:border-box;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;text-align:center;
  border-radius:18px;background:rgba(244,241,232,.95);box-shadow:0 8px 28px rgba(70,55,35,.14)}
.intro[hidden]{display:none}.intro-pre .intro[hidden]{display:flex!important}
#intro-title{margin:0;font-size:1.25rem;font-weight:400;letter-spacing:.12em;text-wrap:balance}
.intro-sub{margin:0;font-size:0.9375rem;color:#5f6252;word-break:keep-all;text-wrap:balance}
#intro-go{font-size:1rem;padding:10px 26px}
.intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.intro-actions button:not(.fill){border:1px solid #b9b4a0;background:#f7f4ea}
.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}}
@media(prefers-reduced-motion:no-preference){.intro:not([hidden]){animation:rise .18s ease-out}}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}
ruby{position:relative}
rt{line-height:1}rt>span{position:absolute;left:50%;bottom:100%;margin-bottom:.2em;translate:-50% 0;white-space:nowrap;line-height:1}
.steps,.guidance p,.guidance>span,.note,.io-hint{line-height:2}
.steps li{padding-top:8px}
button,.button{min-width:44px;justify-content:center}
.steps li button{min-width:0}
footer a{display:inline-flex;align-items:center;min-height:44px}
.intro-on #tools,.intro-on .row.nav,.intro-on #status-row,.intro-on .guidance,.intro-on #next-note,.intro-on #kotsu{display:none}
.draft-on #tools,.draft-on .row.nav,.draft-on #status-row,.draft-on .guidance,.draft-on #next-note,.draft-on #kotsu{display:none}
html.big{font-size:118.75%}
html.big.bigger{font-size:137.5%}
.journey{display:flex;flex-direction:column;align-items:center;width:min(92vw,420px);margin:6px 0 2px;padding:9px 12px 4px;border-block:1px solid #d3cfbf;font-size:0.875rem;color:#4f5940;text-align:center}
#journey{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
#journey span:nth-child(n+4){flex-basis:100%;color:#5f6252}
.journey a{display:inline-flex;align-items:center;min-height:44px;font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:0.875rem;color:#474c37;text-underline-offset:4px}
.memory-list{display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;margin:0;padding:10px 16px;border:1px solid #d3cfbf;border-radius:10px;background:#f4f1e88c;font-size:0.875rem;text-align:left}
.review .memory-list{margin:8px 0 0}.review ul+.memory-list{margin-top:6px}
.memory-list dt{color:#666759}.memory-list dd{margin:0;color:#36372d}
.pad:focus-visible{outline:2px solid #52682f;outline-offset:3px}
.saijiki{margin:4px auto 14px;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,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
#saijiki li{display:flex;flex-direction:column;align-items:center;padding:4px 0 6px;border-radius:10px;border:1px solid transparent;color:#666759;font-size:0.875rem}
#saijiki li.got{color:#36372d;background:#f4f1e8}
#saijiki li.prev .mk{font-size:0.75rem;line-height:1.85}
#saijiki li[aria-current]{border-color:var(--seal)}
#saijiki .mk{font-size:1rem;line-height:1.4}
.saijiki .note{margin:6px auto 0;font-size:0.875rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.io-hint{flex-basis:100%;padding:0 8px;font-size:0.875rem;color:#5f6252}
.shelf.empty #shelf-title,.shelf.empty #shelf-save,.shelf.empty .io-hint,.shelf.empty .shelf-actions>[data-i18n=shelf_load]{display:none}
.shelf.empty.transfer #shelf-save{display:inline-flex}
.shelf.empty.transfer #shelf-title{display:block}
.shelf.empty:not(.transfer){margin-top:4px}
.shelf.empty.transfer .io-hint{display:block}
.shelf.empty.transfer .shelf-actions>[data-i18n=shelf_load]{display:inline-flex}
.sekki{margin:0;font-size:0.875rem;letter-spacing:.2em;color:#67685d;writing-mode:vertical-rl}
.class-badge{padding:4px 3px;border:1px solid var(--seal);border-radius:4px;color:var(--seal)}
@media(min-width:801px){.sekki rt>span{left:100%;top:50%;bottom:auto;translate:0 -50%;writing-mode:vertical-rl;padding-left:1px}}
@media(max-width:800px){.sekki{writing-mode:horizontal-tb;letter-spacing:.1em}
  .brand #sekki>ruby:first-child rt>span{left:0;translate:none}}
.letter{margin:4px 0 2px;font-size:1rem;letter-spacing:.12em;color:#36372d;text-align:center;max-width:24em}
.keep-row-quiet{margin:14px 0 0;text-align:center}
.quiet{font-size:0.875rem;color:#6a5d4f;text-decoration:underline;text-underline-offset:4px}
.zukan{margin:4px auto 14px;max-width:520px}
.keiki{margin:4px auto 14px;max-width:520px}
.keiki h3{font-size:0.875rem;font-weight:500;letter-spacing:.2em;color:#686b58;margin:6px 0}
#keiki{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left;font-size:0.875rem;line-height:1.5}
#keiki li{padding:6px 12px;border:1px solid #d3cfbf;border-radius:8px;color:#5f6252}
#keiki li.got{background:#f4f1e88c;color:#3c4030}
#keiki b{font-weight:500}#keiki span{display:block;color:#474c37}
#review-note{margin:4px 0 8px;text-align:left}
#prefs :is(#easy,#slow-kiln,#steady,#voice,#kana,#night,#sound-top)::before{content:"";display:inline-block;overflow:hidden;box-sizing:border-box;flex:none;font-size:.8em;line-height:1;text-align:center;padding-top:.05em;width:1.3em;height:1.3em;margin-right:.75em;border:1.5px solid #657343;border-radius:3px}
#prefs :is(#easy,#slow-kiln,#steady,#voice,#kana,#night,#sound-top)[aria-pressed=true]::before{content:"✓";content:"✓"/"";background:#657343;color:#fff}
html.night #prefs :is(#easy,#slow-kiln,#steady,#voice,#kana,#night,#sound-top)::before{border-color:#b7c48e}
#prefs #reset{margin-top:4px;border-top:1px solid #d8d4c6;border-radius:0;color:var(--seal)}
html.night #prefs #reset{border-top-color:#4a4a40}
#prefs :is(#easy,#slow-kiln,#steady,#voice,#kana,#night,#sound-top)[aria-pressed=true]{background:transparent;color:inherit;box-shadow:none}
.zukan h3{font-size:0.875rem;font-weight:500;letter-spacing:.2em;color:#686b58;margin:6px 0}
#zukan-count{font:0.875rem system-ui,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums}
#zukan{border-collapse:collapse;margin:0 auto;font-size:0.875rem;color:#666759;width:100%;table-layout:fixed}
#zukan th{font-weight:400;padding:4px 2px;line-height:1.3;overflow-wrap:anywhere}
:lang(en) #zukan th{overflow-wrap:normal;hyphens:auto}
#zukan td{text-align:center;padding:4px 2px}
#zukan td.got{color:#36372d;background:#f4f1e8}
#zukan td.new{position:relative;color:var(--seal)}#zukan td.new::after{content:'';position:absolute;inset:3px 22%;border:2px solid var(--seal);border-radius:3px;opacity:.85;transform:rotate(-3deg);animation:zukan-stamp .4s ease-out both}
@keyframes zukan-stamp{0%{opacity:0;transform:scale(1.7) rotate(-8deg)}60%{opacity:.95;transform:scale(.94) rotate(-3deg)}100%{opacity:.85;transform:scale(1) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){#zukan td.new::after{animation:none}}
.qr-wrap{margin-top:8px;font-size:0.875rem}
.qr-wrap summary{min-height:44px;display:list-item;list-style-position:inside;padding:12px 0;box-sizing:border-box;cursor:pointer;color:#5f6252}
#g-qr{display:block;width:100%;max-width:320px;aspect-ratio:1;height:auto;margin:4px auto 0;image-rendering:pixelated;touch-action:auto;cursor:default}#g-qr[hidden]{display:none}
#zukan td:has(button){padding:0}#zukan td button{width:100%;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
@media(min-width:1100px) and (min-height:640px){
  main{display:grid;grid-template-columns:minmax(0,600px) minmax(340px,440px);justify-content:center;column-gap:48px;align-items:start;padding-top:28px}
  main>*{grid-column:2;justify-self:center}
  main>.steps{grid-column:1/-1;grid-row:1}
  main>.draft-prompt{margin-top:0}
  main>.scene{grid-column:1;grid-row:2/span 20;position:sticky;top:24px;width:min(calc(100svh - 120px),600px)}
  main>.next-bar{justify-self:stretch}
  main>.shelf{width:100%}
}
.intro-family{margin:0;max-width:21em;font-size:.875rem;line-height:1.5;color:#4f5244;text-align:center;text-wrap:pretty}
.real>p{font-size:.875rem;line-height:1.7;margin:8px 12px}
.real summary,footer a,.family a{min-height:44px}
.family a,footer a{display:inline-flex;align-items:center;justify-content:center}
.sweet-pic:not([hidden]){display:block;width:64px;height:64px;margin:0 auto 2px}
.more-done .real{margin:6px auto 0}
.more-done .term{margin-top:2px}
#load{font-size:1rem;padding:10px 26px}
:root:lang(en) *{letter-spacing:.02em!important}
:root:lang(en) .shelf h2{text-indent:0}
@media(prefers-contrast:more){
  :root{--ink:#26271f}
  .guidance,.status,.note,.next-note,.roman,.steps,.real,.real summary,footer,.family small,.sekki,.journey,#sub{color:#3c4030}
  button,.button{color:#2f3423}
  .family{border-color:#8a8c79}
}
.gift-view .steps,.carry-view .steps{visibility:hidden}
.field>span{white-space:nowrap}.field input{min-width:0;flex:0 1 auto}
.kotsu,.review{width:min(92vw,440px);margin:6px auto 0;color:#5f6252;font-size:.875rem}
.kotsu summary,.review summary{cursor:pointer;text-align:center;letter-spacing:.1em;padding:12px 8px;min-height:44px;box-sizing:border-box}
.kotsu ul,.review ul{list-style:none;margin:0;padding:10px 16px;border:1px solid #d3cfbf;border-radius:10px;background:#f4f1e88c;line-height:1.75;text-align:left}
.kotsu li+li,.review li+li{margin-top:6px}
.kotsu li{display:grid;grid-template-columns:max-content 1fr}
.kotsu b,.review b{color:var(--ink);font-weight:600;margin-right:.6em}
.review li{display:grid;grid-template-columns:1.4em 4.2em 1fr;align-items:baseline}
.review .grade{color:#52682f}.review .g1{color:#6e5f3c}.review .g0{color:var(--seal)}
.review li.focus{background:#efe6d6;border-radius:6px;margin-left:-6px;margin-right:-6px;padding:2px 6px}
:root:lang(en) .review li{grid-template-columns:1.4em 4.6em 1fr}
button,.button{transition:background-color .15s ease-out,color .15s ease-out,transform .15s ease-out}
button:active:not(:disabled):not([aria-disabled=true]),.button:active{transform:translateY(1px)}
.group{box-shadow:inset 0 1px 0 #ffffff70}
.guidance p{text-wrap:balance}.guidance>span{text-wrap:pretty}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}button:active:not(:disabled):not([aria-disabled=true]),.button:active{transform:none}}
@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}
.steps li[aria-current]{border-bottom:2px solid Highlight}
.meter{border:1px solid CanvasText}
#fill,#band{forced-color-adjust:none}
#fill{background:Highlight}
}
#saijiki li{position:relative}
#saijiki .trio{position:absolute;top:1px;right:3px;font-size:.6875rem;line-height:1;color:var(--seal)}
.install button{min-height:44px}
@media(orientation:landscape) and (max-height:500px){main{display:block;min-height:0;padding:12px 64px 40px calc(84px + min(76svh,40vw) + 16px)}main .scene{position:fixed;left:84px;top:50%;translate:0 -50%;width:min(76svh,40vw);height:auto;margin:0}footer{margin-left:calc(84px + min(76svh,40vw))}.shelf,.intro{width:100%}main *{max-width:100%;box-sizing:border-box}}
#prefs-btn::after{content:attr(data-cap);position:absolute;left:50%;top:40px;translate:-50% 0;font-size:0.6875rem;letter-spacing:.06em;line-height:1;white-space:nowrap;color:#5d604f}
.stamp{position:absolute;right:9%;bottom:9%;width:3.2em;height:3.2em;display:grid;place-items:center;font:600 22px 'Yu Mincho','Hiragino Mincho ProN',serif;color:#f4f1e8;background:var(--seal);border-radius:4px;pointer-events:none;opacity:0;z-index:1}
.stamp.on{animation:stamp .6s ease-out both}
@keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-8deg)}35%{opacity:.95;transform:scale(.94) rotate(-3deg)}55%{opacity:.95;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1) rotate(-3deg)}}
@media(prefers-reduced-motion:no-preference){.steps li[aria-current]{animation:step-in .35s ease-out}}
@keyframes step-in{from{border-bottom-color:transparent}}
@media(prefers-reduced-motion:reduce){.stamp{display:none}}
.gift-view #mei{display:none}
.shelf-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0 0 8px;font-size:0.875rem;color:#5f6252}
.shelf-filter select{min-height:44px;font:inherit;padding:0 8px;border:1px solid var(--field-line);border-radius:8px;background:#f4f1e8;color:#36372d}
.bowl-item small{display:block;font-size:0.6875rem;color:#5f6252;letter-spacing:0}
#shelf-full{text-align:center}
#setup{width:min(94vw,540px)}.setup-preview{display:flex;align-items:center;gap:18px;margin:12px 0}.setup-preview canvas{width:123px;height:123px;flex:0 0 123px;border-radius:0;touch-action:auto;cursor:default}.setup-preview a{color:#52682f;text-underline-offset:4px}
#setup select{min-height:44px;font:inherit}
#reset-dialog{width:min(92vw,420px)}
@media(max-width:520px){.setup-preview{align-items:flex-start;flex-direction:column}}
.intro-actions{margin-top:6px}
html:not(.kana) rt.k{display:none}
html.kana .row.nav button,html.kana .tools button{padding-top:14px}
html.night{--ink:#ece6d6;--paper:#1d1b17;--seal:#e88a72;color-scheme:dark}
html.night :is(.field input,#gift-url,#record-dialog input,#record-dialog textarea){color:var(--ink)}
html.night body.finished .guidance{position:relative;pointer-events:none}
html.night .paper{opacity:.06}
html.night :is(.keiki h3,#keiki li,#keiki span,.guidance>span,.status,.note,.next-note,.roman,.steps,.steps li.past,.collection,.real,.kotsu,.review,footer,.family small,.family-label,.sekki,.field,.range,.io-hint,#shelf-io-status,.shelf h2,.saijiki h3,.zukan h3,#zukan,#saijiki li,.memory-list dt,.bowl-item .dt,.bowl-item small,.intro-sub,.intro-family,.more-done summary,.qr-wrap summary,.shelf-filter,.sound-ask,.journey,#journey span:nth-child(n+4),.quiet,#prefs-btn,#gift-dialog .kicker,#gift-dialog button[value=close]){color:#c9c2ae}
html.night #prefs-btn::after{color:#c9c2ae}
:root:lang(en) #prefs-btn::after{left:auto;right:0;translate:none}
#prefs-btn:focus-visible{outline-offset:-3px}
html.night button:disabled,html.night #next[aria-disabled=true]{opacity:.62}
html.night :is(button,.button,.memory-list dd,.letter,.bowl-item[aria-current] span,.steps li[aria-current],#saijiki li.got,#zukan td.got,.family [aria-current],.kotsu b,.review b){color:var(--ink)}
html.night :is(footer a,.journey a,.term,.done .note a,.setup-preview a){color:#d9d2bd}
html.night :is(.group,.tools>button:not(.primary),.tools .moves>button,.row.view button:not(.primary),.done .row>button:not(.primary),#back,#next:not(.ready),.revisit button,.sound-ask button,.intro-actions button:not(.fill),.shelf-filter select,.field input,.kotsu ul,.review ul,.memory-list,#gift-url){background:#27241f;border-color:#4a463b}
html.night :is(#saijiki li.got,#zukan td.got){background:#27241f;border-color:#4a463b}
html.night :is(.tools>button:not(.primary),.tools .moves>button,.row.view button:not(.primary),.done .row>button:not(.primary),#back,#next:not(.ready),.revisit button,.sound-ask button,.intro-actions button:not(.fill),.shelf-filter select,.field input,#gift-url){border-color:#7a7c68}
html.night :is(.field input,#gift-url,#record-dialog input,#record-dialog textarea,.shelf-filter select):is(input,textarea,select){border-color:var(--field-line)}
html.night .primary,html.night .nav:has(#next.ready) .act>button{background:#27241f;color:#b7c48e;border-color:#b7c48e}
html.night :is(.intro,.draft-prompt){background:#27241f;box-shadow:0 8px 24px #0006;border-color:#4a463b}
html.night :is(#prefs,dialog){background:#2b2822;border-color:#4a463b;color:var(--ink)}
html.night :is(.journey,.family,.next-bar){border-color:#4a463b}
@media(hover:hover){html.night :is(button,.button):hover,html.night .tools>button:not(.primary):hover,html.night #back:hover{background:#34302a}}
html.night button[aria-pressed=true]{background:#3a3f2c;color:#e3ebc4;box-shadow:inset 0 0 0 1px #8d9a62}
html.night :is(.fill,.act>button,#next.ready,dialog button.primary:not(#reset-go)){background:var(--green);color:#fff;border-color:var(--green)}
html.night #pull.now{color:#1d1b17}
html.night .stamp{color:#1d1b17}
html.night .tip{background:var(--ink);color:#1d1b17}
html.night .meter{background:#4a463b}html.night #fill{background:#9aa86a}
html.night .status.warn{color:var(--seal)}
html.night .review .grade{color:#b7c48e}html.night .review .g1{color:#d1b77c}html.night .review li.focus{background:#3a3329}
html.night .pad{border-color:#4a463b}
html.night .scene:not(.kiln):not(.toko){background:radial-gradient(circle at 50% 56%,#4a3d2a 0%,#2c251c 50%,transparent 72%)}
html.night .next-bar{border-top-color:#4a463b!important}
.steps rt>span{position:static;translate:none}.steps li{line-height:2.6;padding-top:2px}
main>*{min-width:0}
.guidance{width:100%;max-width:34em;padding-inline:6px;overflow-wrap:anywhere}
.guidance p,.guidance>span,.letter,.note,.mei,figcaption,.bowl-item span{overflow-wrap:anywhere}
.guidance ruby{white-space:normal}
.steps{max-width:100%}
.intro-on #phase{display:none}
.intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
#intro-go{flex:1 0 100%;justify-content:center;text-align:center}
html.big .intro-actions{column-gap:4px}html.big .intro-actions button:not(.fill){padding-inline:4px}
.intro-sample{font-size:.875rem;width:100%}.intro-sample summary{cursor:pointer;min-height:44px;padding:10px}
.intro-sample canvas{width:min(180px,100%);height:auto;margin:auto;touch-action:auto;cursor:default}
.intro-sample p{font-size:.875rem;line-height:1.8}
#prefs{max-width:calc(100vw - 16px);max-height:calc(100dvh - 92px);overflow:auto}
#prefs .prefs-group{font-size:.875rem;font-weight:400;line-height:inherit;color:#5f6252;margin:8px 10px 2px}
.storage-warning p{margin:0 0 8px}
.storage-warning{position:relative;z-index:5;border:1px solid var(--seal);background:var(--paper);padding:12px;max-width:520px;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}
.record-actions{margin:4px 0 0}.record-actions button{font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
#record-dialog,#compare-dialog,#import-preview{width:min(94vw,650px);max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #c8c8b9;border-radius:16px;padding:20px;background:#f4f1e8;color:var(--ink)}
#record-dialog{width:min(94vw,480px)}#import-preview{width:min(92vw,420px)}#import-preview::backdrop{background:#2a2c2073}
#record-dialog h2,#compare-dialog h2{font-size:1.125rem;margin:0 0 14px}
#record-dialog .field{flex-direction:column;align-items:stretch}
#record-dialog input,#record-dialog textarea{width:100%;max-width:100%;min-height:44px;font:inherit;line-height:1.7;padding:8px;border:1px solid var(--field-line);border-radius:8px;background:var(--paper);color:var(--ink)}
#record-dialog textarea{resize:vertical}#record-dialog .field>span{white-space:normal}
#record-dialog::backdrop,#compare-dialog::backdrop{background:#2a2c2073}
.compare-bowls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.compare-bowls figure{margin:0;min-width:0;text-align:center;font-size:.875rem}
.compare-bowls canvas{width:100%;height:auto;touch-action:auto;cursor:default}
#compare-pick{font:inherit;min-width:0;max-width:100%;min-height:44px}
.shelf-navigation{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.875rem}
.archive{margin-top:14px;font-size:.875rem}.archive summary,.mend-guide summary{min-height:44px;padding:12px;cursor:pointer}
.archive-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:6px}
.archive-list button{white-space:normal;border:1px solid #7a7c68;border-radius:10px;overflow-wrap:anywhere}
#zukan td button{max-width:100%}#keiki button{font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
#backup-contents{display:block}.shelf.empty:not(.transfer) #backup-contents{display:none}
#gift-keep:empty,.record-actions:has(button[hidden]){display:none}
.done .row button,.done .row .button{white-space:normal;max-width:100%}
.bowl-item{max-width:180px}.bowl-item span{max-width:100%;white-space:normal}
.scene.close-look{overflow:hidden}.scene.close-look #cv{transform:scale(1.45);transform-origin:50% 56%}
.work-target{position:absolute;z-index:2;pointer-events:none;border:2px solid var(--seal);border-radius:50%;width:44%;height:10%;left:28%;top:38%;opacity:.8}
.work-target[data-part=foot]{top:70%;width:30%;left:35%}.work-target[data-part=body]{top:55%;height:18%}.work-target[data-part=mark]{width:20%;left:40%;height:17%}
.mend-guide{font-size:.875rem;max-width:32em}
html.night #prefs .prefs-group{color:#c9c2ae}
html.night :is(#record-dialog,#compare-dialog,#import-preview){background:#2b2822;border-color:#4a463b}
html.night .archive-list button{border-color:#7a7c68}
@media(max-width:520px){.brand{right:72px;max-width:calc(100% - 90px);align-items:flex-start;gap:8px}.brand #sekki{min-width:0;white-space:normal;line-height:1.6;font-size:.8125rem;overflow-wrap:anywhere}.brand .seal{flex:none}.brand h1{flex:none}.intro-sub{word-break:normal;overflow-wrap:anywhere}.field>span{white-space:normal}#done{width:100%}.steps{column-gap:0}.guidance{max-width:100%}.mend-guide{width:100%}.compare-bowls{gap:4px}#compare-dialog .field{flex-direction:column;align-items:stretch}}
@media(max-width:370px){html.big .steps{font-size:.875rem;row-gap:4px;column-gap:0}html.big .steps li{padding-inline:2px;letter-spacing:0}.steps{margin-top:100px}#prefs-btn{right:10px}.scene{min-width:0;max-width:100%}button,.button{font-size:.875rem}}
@media(min-width:1100px) and (min-height:640px){main>#storage-warning{grid-column:2}}
@media(prefers-reduced-motion:reduce){.work-target{display:none}}
.gift-lid{position:absolute;z-index:3;pointer-events:none;left:14%;right:14%;top:20%;height:56%;border-radius:6px;
  background:linear-gradient(90deg,transparent 46%,#7d3a2f 46% 54%,transparent 54%),repeating-linear-gradient(90deg,#dac7a3 0 7px,#cdb791 7px 9px,#ddcaa7 9px 16px);
  box-shadow:0 10px 22px rgba(60,40,20,.28),inset 0 0 0 3px #c2ab82;animation:lid-open 1.1s .4s ease-in forwards}
@keyframes lid-open{to{transform:translateY(-75%) rotate(-5deg);opacity:0}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.gift-lid{display:none}}
#draft-preview{width:100px;height:100px;margin:auto;touch-action:auto;cursor:default}
#draft-stage{margin:0 auto 6px}.signature-note{flex-basis:100%;margin:0;font-size:.875rem}
.backup-help{flex-basis:100%;font-size:.875rem;max-width:36em}.backup-help summary{min-height:44px;padding:12px;cursor:pointer}
.shelf.empty:not(.transfer) .backup-help{display:none}
.shelf.empty:not(.transfer) :is(#shelf,.shelf-actions){display:none}
#collection-status:empty{margin:0}
#seasonal-next{margin:6px auto}#seasonal-try{white-space:normal;max-width:100%;text-decoration:underline;text-underline-offset:3px}
#mend-progress{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:min(60%,20rem);height:.5rem;margin:0;accent-color:var(--green);pointer-events:none}
.shelf.few .backup-help,.shelf.few #shelf-io-hint{display:none}
.mei-choices{justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.mei-choices>span{font-size:.875rem;color:#5f6252}
.mei-choices button{min-height:44px;padding:0 14px;border:1px solid #7a7c68;border-radius:999px;background:transparent;color:inherit;font:inherit}
html.night .mei-choices button{border-color:#7a7c68}html.night .mei-choices>span{color:#c9c2ae}
html.night :focus-visible,html.night #gift-url:focus-visible{outline-color:#b7c48e}
#done button:has(rt:not(.k)),html.kana #done button:has(rt){padding-top:16px;padding-bottom:6px}
html.night .act>#quench{background:#27241f;color:#b7c48e;border-color:#b7c48e}
input,select,textarea,.field input,#record-dialog input,#record-dialog textarea,.shelf-filter select,#setup select,#compare-pick{font-size:max(1rem,16px)}
@media(max-width:800px){html:has(body.glazing){scroll-padding-top:calc(min(92vw,560px) + 8px)}}
#g-bowl{float:right;width:84px;height:84px;margin:0 0 4px 8px}
.real h3{font-size:1rem;margin:1.2em 0 .3em}.real .faq dt{font-weight:600;margin-top:.6em}.real .faq dd{margin:0}
.notfound>*{max-width:100%}
@media(min-width:801px) and (max-height:500px){.steps{flex-wrap:nowrap;gap:0;letter-spacing:.04em}.steps li{padding-inline:5px}}
html:not([data-ready]):not(.intro-pre) .guidance{min-height:104px}html:not([data-ready]):not(.intro-pre) #status-row{min-height:21px}
html:not([data-ready]):not(.intro-pre) #kotsu[hidden]{display:block!important;visibility:hidden}
@media(min-width:801px){html:not([data-ready]) .next-bar .next-note{position:absolute;min-height:0}}
#saijiki:empty{min-height:7.125rem}
.hub-top{position:absolute;z-index:5;top:20px;right:68px;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}
.hub-short{display:none}
html.night .hub-top{border-color:#5d604f;background:#2a2b24;color:#e3dccb}
@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:.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;font-size:.6875rem;letter-spacing:.06em;line-height:1;white-space:nowrap}
  html.night .hub-top{background:transparent;color:#c9c2ae}
  html[lang="en"] .hub-top{right:calc(18px + 5.2em)}
  @media(max-width:360px){.hub-short{display:none}}
  html.head-tight .hub-short{display:none}html.head-tight[lang="en"] .hub-top{right:64px}html.head-tight[lang="en"] .sekki{max-width:calc(100vw - 216px)}
  .sekki{max-width:calc(100vw - 216px)}html[lang="en"] .sekki{max-width:calc(100vw - 170px - 4.55rem);letter-spacing:0}}
@media(forced-colors:active){.hub-top::before{forced-color-adjust:none;background:LinkText}}
.hub-top:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(min-width:801px) and (max-width:1100px){main>.steps{padding-inline-end:180px}}
@media(max-width:800px) and (orientation:landscape){.en-offer{top:72px;left:8px;right:auto}}
h1 a{position:relative}.h1-en{position:absolute;top:calc(100% - 4px);left:50%;translate:-50% 0;writing-mode:horizontal-tb;font-family:Georgia,serif;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% - 6px)}}