@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;500;600&display=swap');
:root{--ink:#424a3a;--muted:#878b7c;--green:#65794e;--paper:#f5f3eb;--line:#e1e2d6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:hover{color:#617d3e}button:focus-visible,a:focus-visible,.tool:focus-visible{outline:2px solid #869c68;outline-offset:5px}header{height:100px;border-bottom:1px solid var(--line);padding:0 4.4%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink);font:23px 'Noto Serif JP',serif;letter-spacing:4px}.mark{border:1px solid #7c896c;border-radius:50%;height:43px;width:43px;display:grid;place-items:center;font-size:25px;padding-left:4px}.brand small{display:block;font:8px sans-serif;letter-spacing:3.3px;margin-top:6px}.header-note{font-family:'Noto Serif JP',serif;letter-spacing:2px;color:#8b907e;font-size:11px}nav{display:flex;gap:25px;align-items:center;font-size:11px}nav span{margin-left:12px;color:#89917b}#sound{border:1px solid #dadfce;border-radius:30px;padding:10px 16px}main{max-width:1580px;margin:auto;padding:38px 4.4% 0}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font:9px sans-serif;letter-spacing:2px;color:#89917c}h1{font:500 30px 'Noto Serif JP',serif;letter-spacing:4px;margin:12px 0}p{line-height:2}.topline p{font-size:11px;letter-spacing:1px;color:var(--muted);margin:12px 0 0}.season{display:flex;gap:20px;align-items:center;margin-right:13px}.season>span{writing-mode:vertical-rl;font:23px 'Noto Serif JP';letter-spacing:5px;border-right:1px solid #d8dccb;padding-right:20px}.season small{font-size:10px;color:var(--muted);line-height:2.2;letter-spacing:1px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:33px}.room-wrap{position:relative;align-self:start;border:1px solid #dddccf;border-radius:5px;background:#e6e4d3;overflow:hidden;box-shadow:0 8px 24px #4d5b3a05}.room-bar{height:43px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#f8f6eef0;font-size:10px;letter-spacing:1px}.room-bar i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#879a68;margin-right:8px}.room-bar button{font-size:10px;color:#7c836f}.room-bar button span{margin-left:10px}#room{display:block;width:100%;height:auto;touch-action:none}.scene-caption{height:39px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;background:#f8f6ee;font-size:9px;letter-spacing:1px;color:#8a8e7e}.scene-caption span:last-child{font-size:8px}.tool{cursor:pointer;outline:none;transition:filter .3s}.tool:hover,.tool:focus-visible{filter:drop-shadow(0 0 7px #fff9d3)}.tool-label{display:none;font:17px 'Noto Serif JP',serif;text-anchor:middle;fill:#414e36;paint-order:stroke;stroke:#f5eedb;stroke-width:5px;stroke-linejoin:round}.show-labels .tool-label{display:block}.tool.active{filter:drop-shadow(0 0 7px #fffbce)}.steam{animation:steam 6s ease-in-out infinite}#environment{transform-origin:50% 55%;transition:transform 1s}.bowing #environment{transform:scale(1.06) translateY(-15px)}.bow-shade{pointer-events:none;position:absolute;inset:43px 0 39px;background:#383e32;opacity:0;transition:opacity .8s}.bowing .bow-shade{opacity:.16}@keyframes steam{50%{opacity:.1;transform:translateY(-12px)}}aside{padding:6px 0}.lesson-heading{display:flex;align-items:center;justify-content:space-between}.lesson-heading>span:last-child{font:11px 'Noto Serif JP';color:#859171}h2{font:500 23px 'Noto Serif JP',serif;letter-spacing:2px;margin:16px 0 12px}.lesson-desc{font-size:11px;color:var(--muted);line-height:2.1;letter-spacing:.4px}.mode-switch{display:flex;background:#ebece2;border-radius:5px;padding:4px;margin:24px 0 20px}.mode-switch button{flex:1;padding:9px 0;font-size:10px;color:#8a8e80;border-radius:3px}.mode-switch .selected{background:#fffdf6;color:#5b6a49;box-shadow:0 1px 4px #46532d0b}ol{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:0}ol li{position:relative;display:flex;align-items:center;gap:13px;min-height:34px;font-size:11px;color:#a2a593;letter-spacing:1px}ol li:before{content:'';position:absolute;top:25px;left:10px;bottom:-7px;border-left:1px solid #dfe2d2}ol li:last-child:before{display:none}ol b{width:21px;height:21px;display:grid;place-items:center;border:1px solid #d9decb;border-radius:50%;font:9px sans-serif;background:var(--paper);z-index:1;font-weight:400}ol li.current{color:#5b7043}ol li.current b{border-color:#73865c;background:#73865c;color:#fff}ol li.done b{color:#7a8e63;background:#e8ecdf;border-color:#e8ecdf}ol li.current:after{content:'いま、ここ';margin-left:auto;font-size:8px;letter-spacing:0;color:#909c81}.instruction{background:#eeeee3;border:1px solid #e2e5d5;padding:18px;border-radius:5px;min-height:203px}.tiny{font-size:9px;color:#929a82;letter-spacing:1px}h3{font:500 16px 'Noto Serif JP';letter-spacing:1px;margin:10px 0}.instruction p{font-size:11px;color:#7e8671;margin:0 0 15px;line-height:1.9}.primary{display:block;width:100%;background:#6b7e55;color:#fffdf2;border-radius:3px;padding:12px 10px;font-size:11px;letter-spacing:1px;transition:background .2s}.primary:hover{background:#596d43;color:white}.primary:disabled{opacity:.6;cursor:wait}#keyboard-hint{display:block;font-size:8px;color:#969e88;text-align:center;margin-top:10px}.reset{display:block;margin:17px auto 0;font-size:10px;color:#8f9683}.meter{height:5px;background:#dbe0cc;border-radius:9px;margin:10px 0 5px;overflow:hidden}.meter i{height:100%;display:block;background:#7c975e;width:0;transition:width .2s}#meter-label{font-size:9px;color:#859272;display:block;margin-bottom:12px}footer{display:flex;justify-content:space-between;padding:24px 0 28px;font-size:9px;letter-spacing:1px;color:#989d8d}.footer-line{display:inline-block;width:25px;height:1px;background:#c4c9b6;vertical-align:middle;margin:0 12px}footer button{font-size:9px;color:#89917b}#toast{position:absolute;bottom:65px;left:50%;transform:translateX(-50%) translateY(8px);border-radius:30px;background:#f7f5e9f0;color:#5b6d48;box-shadow:0 4px 25px #35422910;padding:12px 22px;white-space:nowrap;opacity:0;transition:.25s;font-size:11px;pointer-events:none}#toast.visible{opacity:1;transform:translateX(-50%)}dialog{width:min(490px,90vw);border:1px solid #dadfcc;border-radius:8px;background:#faf8ef;color:var(--ink);padding:35px;box-shadow:0 25px 100px #26301c2a}dialog::backdrop{background:#333c2d55;backdrop-filter:blur(4px)}#close-modal{position:absolute;right:13px;top:9px;font-size:24px;color:#929780}dialog h2{margin-top:5px}dialog p{font-size:12px;color:#7e8671}dialog a{color:#65794e}dialog .stat{font:38px 'Noto Serif JP';color:#6b7e55;margin:20px 0}dialog label{display:flex;justify-content:space-between;padding:15px 0;align-items:center}dialog select{padding:7px;border:1px solid #dbe0cb;background:#fffdf6;color:#65794e}.no-motion *{animation:none!important;transition:none!important}@media(min-width:1400px){.game-layout{grid-template-columns:minmax(0,1fr) 310px;gap:40px}ol li{min-height:38px}.instruction{padding:22px}}@media(max-width:1000px){header{height:82px}.header-note{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 245px;gap:22px}main{padding:28px 3% 0}.topline{margin-bottom:25px}h1{font-size:25px}.instruction{padding:13px}ol li{min-height:29px}ol li:before{top:22px;bottom:-5px}.mode-switch{margin:16px 0}.lesson-desc{margin:8px 0}h2{font-size:21px}.lesson-heading .eyebrow{font-size:8px}}@media(max-width:740px){header{height:75px;padding:0 5%}.brand{font-size:19px;gap:10px}.brand small{font-size:6px}.mark{width:36px;height:36px}nav{gap:10px}nav button{font-size:10px}#journal{font-size:0}#journal:before{content:'お稽古帳';font-size:10px}#journal span{display:none}#sound{padding:8px 10px}main{padding:25px 4% 0}.topline{margin-bottom:23px}h1{font-size:22px;letter-spacing:2px}.topline p{font-size:9px;letter-spacing:0}.eyebrow{font-size:8px}.season{gap:9px;margin:0}.season>span{font-size:18px;padding-right:9px}.season small{display:none}.game-layout{display:flex;flex-direction:column;gap:22px}.room-wrap{width:100%}.room-bar{height:36px;padding:0 12px}.scene-caption{height:32px;padding:0 10px;font-size:8px}.scene-caption span:last-child{display:none}aside{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}.lesson-heading{grid-column:1/-1}aside>h2{grid-column:1;margin:10px 0}aside>.lesson-desc{grid-column:1;font-size:10px}.mode-switch{grid-column:1;margin:10px 0}ol{grid-column:1;grid-row:5/8}ol li{min-height:31px;font-size:10px;gap:9px}ol li.current:after{font-size:7px}.instruction{grid-column:2;grid-row:2/7;margin-top:10px;min-height:260px}.instruction h3{font-size:15px;line-height:1.7}.instruction p{font-size:10px}.reset{grid-column:2;grid-row:7;font-size:9px}footer{font-size:8px;gap:15px;line-height:2}footer button{font-size:8px}.footer-line{width:12px;margin:0 7px}#toast{font-size:9px;bottom:48px;padding:9px 13px}}

/* The room breathes; hands and props carry the foreground motion. */
#motion-hand{transition:opacity .22s;filter:drop-shadow(0 7px 5px #38402b13)}
#motion-stage{filter:drop-shadow(0 4px 3px #38402b18)}
.performing .tool{pointer-events:none}.performing #action{cursor:wait}
#tea{transform-origin:558px 531px;animation:tea-breath 7s ease-in-out infinite}
@keyframes tea-breath{50%{opacity:.94}}
.drifting-leaf{opacity:0;animation:leaf-drift 17s linear infinite}
@keyframes leaf-drift{0%{transform:translate(var(--leaf-x),var(--leaf-y)) rotate(0deg);opacity:0}10%{opacity:.8}75%{opacity:.7}100%{transform:translate(calc(var(--leaf-x) - 55px),315px) rotate(280deg);opacity:0}}
.bowing #environment{transform:translateY(-65px) scale(1.14);transform-origin:50% 75%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

:root{--paper:#fcfcf5;--ink:#304c42;--muted:#708778;--green:#478269;--line:#dce9dc}body{background:linear-gradient(135deg,#fffefa,#f3faf4)}header{background:#ffffffb3}.mark{border-color:#77a38a}.instruction{background:#eef8ee;border-color:#d7e9d7}.primary{background:#498368}.primary:hover{background:#326f55}.mode-switch{background:#e6f0e4}.room-bar,.scene-caption{background:#fffef5}.room-wrap{border-color:#d5e5d0;box-shadow:0 12px 45px #39734c0c}.game-layout{grid-template-columns:minmax(0,1fr) 270px}#language{font:12px inherit;color:#375e4b;background:#fffef7;border:1px solid #caddca;border-radius:20px;padding:9px 12px}#room{background:#f7fbef}html:not([lang="ja"]) h1{letter-spacing:0;font-size:29px}html:not([lang="ja"]) ol li{letter-spacing:0;font-size:10px}html:not([lang="ja"]) ol li.current:after{display:none}html:not([lang="ja"]) .brand{letter-spacing:1px;font-size:19px}html:not([lang="ja"]) .scene-caption{letter-spacing:0}html:not([lang="ja"]) .header-note{letter-spacing:0}html:not([lang="ja"]) #journal:before{content:none}html:not([lang="ja"]) #journal{font-size:10px}@media(max-width:740px){header{height:auto;min-height:80px;flex-wrap:wrap;gap:12px;padding:14px 4%}nav{gap:8px}#language{font-size:11px;padding:7px}.game-layout{display:flex}html:not([lang="ja"]) h1{font-size:23px}.header-note{display:none}}

/* Neutral daylight and white porcelain; green belongs to the tea and garden. */
:root{--paper:#ffffff;--ink:#30382f;--muted:#72786f;--line:#e7e8e2}body{background:#ffffff}header{background:#ffffff}.room-wrap{border-color:#e4e5de;box-shadow:0 7px 25px #222b1a06}.room-bar,.scene-caption{background:#fff}.instruction{background:#f7f8f3;border-color:#e4e8dc}.mode-switch{background:#f0f2eb}.mode-switch .selected{background:#fff}.primary{background:#497135}.primary:hover{background:#355a25}#language{background:#fff;border-color:#dfe3d9;color:#35452d}dialog{background:#fff}.tool.active{filter:drop-shadow(0 0 5px #ffffff)}#tea{animation:none}#bubbles{pointer-events:none}#rest-brush{filter:drop-shadow(0 2px 1px #57452c16)}

.sponsor-area{margin:160px auto 32px;max-width:970px;text-align:center;border-top:1px solid #e7e8e2;padding:24px 0}.sponsor-area[hidden]{display:none}.sponsor-area p{font-size:10px;color:#777}.sponsor-area #ad-slot{min-height:100px}

h1,h2,h3,.brand{font-family:'Yuji Syuku','Hiragino Mincho ProN',serif!important}#scroll-calligraphy{font-family:'Yuji Syuku','Hiragino Mincho ProN',serif;letter-spacing:0}#caddy-lid{transform-box:fill-box;transform-origin:center}.ritual-actions{display:grid;gap:9px}.ritual-actions .primary{margin-top:12px}.ritual-progress{display:flex;gap:5px;margin:22px 0}.ritual-progress i{flex:1;height:3px;background:#e5e9dc}.ritual-progress .done{background:#758f53}.ritual-note{font-size:11px;color:#7a8870;line-height:1.9}.support-hand{pointer-events:none}#bowl{will-change:transform}#room .tool:hover{filter:drop-shadow(0 1px 4px #fffae6)}