:root{--ink: #0d0b08;--muted: rgba(16, 13, 10, .74)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#e7ddc7;font-family:Hiragino Mincho ProN,Yu Mincho,Songti SC,"Noto Serif JP",serif;-webkit-font-smoothing:antialiased;color:var(--ink);touch-action:none}#root{height:100%}#stage{position:fixed;top:0;right:0;bottom:0;left:0}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.title{position:absolute;top:6vh;left:0;right:0;text-align:center;mix-blend-mode:multiply;opacity:.92}.title h1{font-size:clamp(40px,8vw,88px);font-weight:500;letter-spacing:.3em;text-indent:.3em}.title .latin{margin-top:.7em;font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:clamp(9px,1.4vw,12px);letter-spacing:.55em;text-indent:.55em;color:var(--muted);text-transform:uppercase}.instruction{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;mix-blend-mode:multiply;color:var(--muted);transition:opacity 1.2s ease}.instruction .jp{display:block;font-size:clamp(13px,2vw,17px);letter-spacing:.32em;text-indent:.32em}.instruction .en{display:block;margin-top:.95em;font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:clamp(9px,1.3vw,11px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;opacity:.8}.instruction.gone{opacity:0}.palette{display:flex;flex-wrap:wrap;gap:clamp(.7em,2vw,1.5em);justify-content:center;align-items:flex-start;max-width:92vw;margin:0 auto;pointer-events:auto}.swatch{pointer-events:auto;background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.45em;font-family:Hiragino Mincho ProN,Yu Mincho,Songti SC,serif;color:var(--muted);opacity:.55;transition:opacity .25s ease,transform .25s ease}.swatch .chip{width:clamp(18px,3.6vw,26px);height:clamp(18px,3.6vw,26px);border-radius:50%;box-shadow:inset 0 0 0 1px #1c1a171f,0 1px 3px #281e0f38;transition:box-shadow .25s ease,transform .25s ease}.swatch .name{font-size:clamp(11px,1.6vw,14px);letter-spacing:.1em}.swatch .en{font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:9px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;opacity:.85}.swatch:hover{opacity:.85}.swatch.selected{opacity:1}.swatch.selected .chip{box-shadow:inset 0 0 0 2.5px #f7f2e6f2,0 0 0 2px var(--ink),0 2px 6px #281e0f59;transform:scale(1.12)}.swatch.selected .name{color:var(--ink)}.strokes{display:flex;gap:1.1em;justify-content:center;align-items:center;mix-blend-mode:multiply}.strokes .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(28,26,23,.45);background:transparent;transition:background .5s ease,transform .4s ease,opacity .4s ease}.strokes .dot.spent{background:var(--ink);border-color:var(--ink);transform:scale(.78);opacity:.85}.strokes .label{font-family:Helvetica Neue,system-ui,sans-serif;font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--muted);margin-left:.4em;text-transform:uppercase}.controls{display:flex;gap:clamp(2em,6vw,4em);justify-content:center;align-items:flex-end;pointer-events:auto}.ink-button{pointer-events:auto;background:none;border:0;padding:.2em .6em;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3em;color:var(--ink);font-family:Hiragino Mincho ProN,Yu Mincho,Songti SC,serif;text-shadow:0 0 9px rgba(247,242,230,.7),0 0 3px rgba(247,242,230,.6);transition:transform .35s ease,opacity .3s ease}.ink-button .kanji{font-size:clamp(23px,3.8vw,31px);letter-spacing:.08em;line-height:1}.ink-button .en{font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:10px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--muted)}.ink-button .brush-underline{width:86%;height:9px;margin-top:1px;color:var(--ink);opacity:.5;filter:drop-shadow(0 0 4px rgba(247,242,230,.6));transition:opacity .35s ease,transform .35s ease}.ink-button:hover{transform:translateY(-3px)}.ink-button:hover .brush-underline{opacity:.95;transform:scaleX(1.1)}.ink-button:disabled{opacity:.3;cursor:default}.ink-button:disabled:hover{transform:none}.sound-toggle{position:absolute;top:5vh;right:5vw;pointer-events:auto;width:40px;height:40px;border-radius:50%;background:#ffffff2e;border:1px solid rgba(28,26,23,.3);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease,background .25s ease}.sound-toggle:hover{background:#fff6}.sound-toggle .note{transition:opacity .25s ease}.sound-toggle.muted .note{opacity:.4}.sound-toggle .mute-x{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;overflow:visible;transition:opacity .3s ease}.sound-toggle.muted .mute-x{opacity:1}.fade-in-begin{opacity:0;pointer-events:none;transition:opacity 1.4s ease .2s,transform 1.1s ease}.fade-in-begin.shown{opacity:1;pointer-events:auto}.random-swatch .chip{background:conic-gradient(from 90deg,#9e2b25,#c39143,#5e8c6a,#4f6fa0,#745399,#d7472e,#9e2b25)}.dock{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:clamp(.7em,2vh,1.5em);padding:0 4vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(1em,3vh,2.5em));pointer-events:none}.brush{display:flex;gap:.9em;justify-content:center;align-items:center;pointer-events:auto;mix-blend-mode:multiply}.brush-label{font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:10px;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--muted)}.brush input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:clamp(120px,22vw,180px);height:2px;background:#1c1a174d;border-radius:2px;outline:none;cursor:pointer}.brush input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:0 1px 3px #281e0f4d;cursor:pointer}.brush input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--ink);cursor:pointer}.begin-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;mix-blend-mode:multiply;transition:opacity 1.2s ease}.begin-button.gone{opacity:0;pointer-events:none}.begin-inner{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(230px,34vw,330px);height:clamp(230px,34vw,330px);animation:ensoBreath 5s ease-in-out infinite;transition:transform .6s ease}.begin-button:hover .begin-inner{animation-play-state:paused;transform:scale(1.04)}@keyframes ensoBreath{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.enso{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.begin-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7em;color:var(--ink);text-align:center}.begin-text .jp{font-size:clamp(22px,4.2vw,34px);letter-spacing:.25em;text-indent:.25em}.begin-text .en{font-family:Helvetica Neue,Segoe UI,system-ui,sans-serif;font-size:clamp(9px,1.3vw,11px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;opacity:.7}@media (max-width: 680px){.title{top:4vh}.palette{gap:.55em .85em;max-width:96vw}.swatch{gap:.3em}.swatch .chip{width:20px;height:20px}.swatch .name{font-size:12px}.swatch .en{font-size:7.5px;letter-spacing:.1em;text-indent:.1em}.strokes .label{display:none}.controls{gap:14vw}.ink-button .kanji{font-size:26px}.brush input[type=range]{width:44vw}}