:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;color:#283831;background:#eeede5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;padding:0 4vw;transition:background .8s,color .8s}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #35483c30;font-size:11px;letter-spacing:.16em}.edition{font-weight:600}.divider{margin:0 18px;opacity:.4}.chapter{letter-spacing:.2em}main{position:relative;height:calc(100svh - 151px);min-height:420px;max-height:1100px}.heading{position:absolute;top:36px;left:0;pointer-events:none;z-index:1;transition:opacity .55s}.eyebrow{font-size:9px;letter-spacing:.24em;color:#7f8274}h1{font:400 clamp(44px,5vw,78px)/1.3 "Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.15em;margin:15px 0}h1 span{color:#b5764e}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}canvas:active{cursor:grabbing}canvas:focus-visible{outline:1px solid #a87653;outline-offset:-4px}.bottom{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.bottom p{font-size:12px;letter-spacing:.12em;color:#737868}.bottom button{pointer-events:auto;border:1px solid #59634d70;border-radius:100px;padding:16px 24px;background:#eeede5bb;color:inherit;font-size:12px;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,transform .2s}.bottom button:hover{background:#fff9ec;transform:translateY(-2px)}button span{margin-left:22px}button:focus-visible{outline:2px solid #b5764e;outline-offset:4px}footer{min-height:63px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #35483c30;color:#808477;font-size:9px;letter-spacing:.08em}.away-copy{position:absolute;top:36%;left:0;right:0;text-align:center;pointer-events:none;opacity:0;transition:opacity .8s}.away-copy span{font:400 40px "Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.45em}.away-copy p{margin-top:30px;color:#92a4a5;font-size:11px;letter-spacing:.3em}body.away{background:#14282d;color:#cbd5cd}body.away .heading{opacity:0}body.away .away-copy{opacity:1}body.away header,body.away footer{border-color:#bfcac820}body.away footer{color:#93a5a1}body.away #hint{color:#93a5a1}body.away button{border-color:#bfcac850;background:#14282d88}body.away button:hover{background:#294146}body.away canvas{cursor:default}#notice{position:fixed;bottom:60px;left:4vw;max-width:85vw;font-size:12px;background:#f9edcf;color:#604626;padding:12px 16px;z-index:3}#notice:empty{display:none}@media(max-width:600px){body{padding:0 6vw}header{height:68px;font-size:9px}.divider{margin:0 8px}.heading{top:24px}.eyebrow{font-size:8px}main{height:calc(100svh - 140px);min-height:440px}h1{font-size:44px}.bottom{bottom:20px;align-items:flex-start;flex-direction:column}.bottom p{margin:0 0 4px;font-size:11px}.bottom button{padding:13px 20px;align-self:flex-end}footer{min-height:72px;align-content:center;flex-wrap:wrap;gap:8px;font-size:8px}.keyboard{display:none}.away-copy{top:36%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

.controls{display:flex;gap:10px;align-items:center;pointer-events:auto}#sound{border-color:transparent;background:transparent;padding-left:12px;padding-right:12px;font-size:10px}#sound span{margin-left:7px}@media(max-width:600px){.controls{align-self:flex-end}#sound{padding-left:6px;padding-right:6px}}

/* Two material states and the interval between them. */
body.realm-1{background:#272330;color:#e1d5c6}body.realm-1 header,body.realm-1 footer{border-color:#cbbcac30}body.realm-1 .eyebrow,body.realm-1 footer,body.realm-1 #hint{color:#b5a7b2}body.realm-1 .bottom button{background:#272330bb;border-color:#cbbcac60}body.realm-1 .bottom button:hover{background:#46364c}
body.away{background:#101d29;color:#d4d9d6}body.away .bottom button{background:transparent}body.away .chapter{color:#97a9b9}
:root{--world-hue:135;background:hsl(var(--world-hue) 20% 92%)}body{background:hsl(var(--world-hue) 20% 92%)}.bottom button{background:hsl(var(--world-hue) 20% 92% / .75)}body.realm-1{background:hsl(calc(var(--world-hue) + 25) 19% 17%)}body.realm-2{background:hsl(calc(var(--world-hue) - 18) 23% 13%);color:#dedacb}body.realm-2 header,body.realm-2 footer{border-color:#cbbcac30}body.realm-2 .eyebrow,body.realm-2 #hint,body.realm-2 footer{color:#aab6aa}body.realm-2 .bottom button{background:#23342e88;border-color:#baccbb60}
/* The interval is one shared image. Labels sit outside it, never as floating objects. */
body.away{background:hsl(calc(var(--world-hue) + 220) 26% 4%);color:#c4c6d3}
body.away header,body.away footer{border-color:#bec8e012}
body.away .chapter,body.away footer{color:#727987}
body.away #passage{display:none}body.away .heading{visibility:hidden}
.thresholds{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s .3s;display:flex;justify-content:center;align-items:flex-end;gap:36px;padding-bottom:87px}
body.away .thresholds{opacity:1}
.orbit-invitation{position:absolute;bottom:146px;left:0;right:0;text-align:center;color:#999dad;font:400 11px "Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.3em;pointer-events:none}
.portal{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;width:114px;border:0;background:transparent;color:#c4d8e0;cursor:pointer;font-family:inherit;letter-spacing:.22em}
.portal span{margin:0}.portal-rin{color:#e1c6a7}.portal-maku{color:#c6bfe3}
.portal-name{font-size:10px;opacity:.65;transition:opacity .3s}
.portal-action{font-size:9px;opacity:.25;transition:opacity .3s}
body.away .portal,body.away .portal:hover{background:transparent;border:0}
.portal:hover .portal-name,.portal:focus-visible .portal-name,.portal.is-near .portal-name{opacity:1}
.portal:hover .portal-action,.portal:focus-visible .portal-action,.portal.is-near .portal-action{opacity:.9}
.portal:focus-visible{outline:1px solid #c9d5d080;outline-offset:0;border-radius:4px}
body.away .bottom{justify-content:flex-end}
@media(max-width:600px){.thresholds{gap:4px;padding-bottom:85px}.portal{width:98px}.portal-name{font-size:9px}.orbit-invitation{bottom:150px;font-size:10px}.portal-action{opacity:.5}}
@media(prefers-reduced-motion:reduce){.thresholds,.portal-action,.portal-name{transition:none}}

#stir{display:none}body.away #stir{display:inline-block;font-size:10px;padding:12px 18px;border-color:#c3cddd30}body.away #stir:hover{background:#c3cddd12}

#body-input{display:none}body.away #body-input{display:inline-block;font-size:10px;padding:12px 14px;border-color:#c3cddd30}body.away #body-input:hover{background:#c3cddd12}#body-status{display:none;position:fixed;bottom:78px;left:4vw;right:4vw;margin:0;color:#9fa4b3;font-size:10px;letter-spacing:.05em;pointer-events:none}body.away #body-status:not(:empty){display:block}@media(max-width:600px){#body-status{bottom:126px;font-size:9px}.controls{gap:6px}body.away #body-input{padding:12px 10px}}

/* Every layer remains inside the same dark, material universe. */
:root,body,body.realm-1,body.realm-2{background:hsl(calc(var(--world-hue) + 220) 26% 5%);color:#d0d4d7}
body header,body footer,body.realm-1 header,body.realm-2 header,body.realm-1 footer,body.realm-2 footer{border-color:#bec8e018}
body .bottom button,body.realm-1 .bottom button,body.realm-2 .bottom button{background:#11192388;border-color:#c3cddd35}
body .bottom button:hover,body.realm-1 .bottom button:hover,body.realm-2 .bottom button:hover{background:#26313b88}
.heading{top:25px}.heading h1{font-size:clamp(30px,4vw,48px);color:#d9dcda;letter-spacing:.2em;margin:12px 0}.eyebrow,body.realm-1 .eyebrow,body.realm-2 .eyebrow{color:#8997a5}
body #hint,body.realm-1 #hint,body.realm-2 #hint{color:#97a0ab;font-size:10px}
.portal{padding:8px 4px;gap:7px}.portal-symbol{font:400 21px/1 Georgia,serif;opacity:.6}.portal:hover .portal-symbol,.portal:focus-visible .portal-symbol{opacity:1}.orbit-invitation{bottom:160px}
body.away #sound[aria-label="音をひらく"]{border:1px solid #b0c1ce45;border-radius:999px;padding:12px 16px;background:#17233066}
@media(max-width:600px){.heading{top:18px}.heading h1{font-size:30px}.orbit-invitation{font-size:10px;letter-spacing:.13em;bottom:159px}.portal-symbol{font-size:19px}body.away #sound[aria-label="音をひらく"]{padding:12px 8px}.controls{gap:4px}}

canvas:focus-visible{outline:1px solid #bed0df2c;outline-offset:-5px}

/* A composition starts with one invitation, then only the layers its player has made. */
[hidden],.portal[hidden]{display:none!important}
#genesis{position:absolute;left:50%;top:calc((100% - 180px)/2);transform:translate(-50%,-50%);border:0;background:transparent;color:#b6c1d0;cursor:pointer;display:flex;align-items:center;flex-direction:column;gap:28px;padding:35px;font:11px "Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.25em}
#genesis span{margin:0;white-space:nowrap}.seed-light{width:5px;height:5px;border-radius:50%;background:#e5edf6;box-shadow:0 0 12px 3px #aec9e977,0 0 50px 14px #8bb0df18;animation:seed-breathe 5s ease-in-out infinite}
#genesis:hover .seed-light,#genesis:focus-visible .seed-light{box-shadow:0 0 18px 6px #c3d8f7aa,0 0 65px 25px #8bb0df28}
@keyframes seed-breathe{50%{opacity:.45;transform:scale(.8)}}
.empty-universe #sound{display:none!important}
.empty-universe .keyboard{visibility:hidden}.empty-universe .orbit-invitation{opacity:.6}
.portal.unborn .portal-symbol{opacity:.3}.portal.unborn .portal-action{opacity:.8}.portal.unborn{border:1px dashed #b3c4d324!important;border-radius:12px}
@media(prefers-reduced-motion:reduce){.seed-light{animation:none}}

/* Keep assistance next to the current action; the artwork carries its own meaning. */
#editor-guide{max-width:440px;color:#aab4c0;font:11px/1.9 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.06em;margin:16px 0 0}
#chord-seed{pointer-events:auto;touch-action:none;display:flex;align-items:center;gap:16px;background:transparent;border:1px solid #dac6a12e;border-radius:99px;color:#d8c9ad;padding:12px 18px;margin-top:14px;font-size:10px;letter-spacing:.1em;cursor:grab}
#chord-seed span{margin:0}.chord-light{width:13px;height:13px;border-radius:50%;background:#e5d3a8;box-shadow:0 0 12px #dcc290aa,0 0 22px #d9be8455}
#chord-seed.selected{border-color:#e4c99199}#chord-seed:active{cursor:grabbing}
#chord-ghost{position:fixed;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:#bba880;box-shadow:0 0 22px #d9be8477;pointer-events:none;z-index:10}
#chord-ghost.valid{background:#fff0c5;box-shadow:0 0 13px #ffe9b9,0 0 32px #d9be8499}
body:not(.away) .bottom{align-items:flex-end}body:not(.away) #hint{max-width:380px;line-height:1.9;margin:0}
#passage.ready{border-color:#d4d7c77a;background:#d4d7c710}
@media(max-width:600px){#editor-guide{font-size:11px;max-width:290px;line-height:1.8;margin-top:8px}.heading h1{margin:8px 0}#chord-seed{padding:10px 14px;margin-top:10px}body:not(.away) .bottom{gap:12px}body:not(.away) #hint{max-width:none;width:100%;font-size:10px}.bottom #passage{padding:13px 15px}.bottom #passage span{margin-left:9px}}

/* One electronic control vocabulary; reserve the footer for future identity assets. */
:root{--interface-font:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--signal:#b9eaff}
header,.chapter,.edition,.portal,.controls button,#genesis,#chord-seed{font-family:var(--interface-font);font-weight:400}
header{letter-spacing:.18em;color:#a9b3c2}.chapter{font-size:9px;color:#788fa4!important}
.heading h1{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:200;font-size:clamp(30px,3.8vw,46px);letter-spacing:.14em}
.eyebrow{font-family:var(--interface-font);font-size:9px;letter-spacing:.24em;color:#859fb5!important}
#editor-guide{font-size:10px;letter-spacing:.045em;color:#91a0af;margin-top:12px}
body .bottom .controls button,body.realm-1 .bottom .controls button,body.realm-2 .bottom .controls button{border-radius:4px;background:#111b252b;border:1px solid #a1bed52e;font-size:10px;letter-spacing:.16em;padding:13px 18px;transition:border-color .2s,background .2s,box-shadow .2s}
body .bottom .controls button:hover{border-color:#b9eaff80;background:#7bc7fa0b;box-shadow:inset 0 0 14px #8dd2ff09;transform:none}
body .bottom .controls button[aria-pressed="true"]{border-color:#b9eaff69;color:#c5ebfa}
body .bottom #sound{border-color:transparent;background:transparent}
body .bottom #passage{border-color:#b9eaff5a}body .bottom #passage.ready{box-shadow:inset 2px 0 #b9eaff80}
.portal-name{font-size:9px;letter-spacing:.16em}.portal-action{font-size:10px;opacity:.65;letter-spacing:.22em}.portal-symbol{font-family:var(--interface-font);font-size:18px;opacity:.5}
.portal.unborn{border-radius:4px;border-style:solid!important;border-color:#b3c4d31c!important}
#genesis{font-family:var(--interface-font);font-size:10px;letter-spacing:.3em}#chord-seed{border-radius:4px;font-family:var(--interface-font);letter-spacing:.18em}
.orbit-invitation{font-family:inherit;font-size:10px;letter-spacing:.12em}.orbit-invitation:empty{display:none}
body #hint{font-size:10px;letter-spacing:.06em;color:#8e9dac}
footer{min-height:63px;border-top-color:#bec8e00c!important}.identity-slot{width:40px;height:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){body .bottom .controls button{padding:12px 11px!important;font-size:9px!important}.portal-name{font-size:8px}.portal{width:98px}.heading h1{font-size:30px}.controls{gap:7px}footer{min-height:72px}}

/* Pair the operational English with the familiar Japanese term. */
.controls small,.portal-action small,#genesis small,#chord-seed small{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;font-size:.85em;font-weight:400;letter-spacing:.06em;color:inherit;opacity:.58;white-space:nowrap}
.portal-name{white-space:nowrap;letter-spacing:.07em}.portal{width:130px}.thresholds{gap:24px}.portal-action{letter-spacing:.14em}
@media(max-width:600px){.portal{width:104px}.thresholds{gap:2px}.portal-name{font-size:8px}.portal-action{font-size:9px}body .bottom .controls button{padding:12px 9px!important;letter-spacing:.08em}.controls{gap:4px}.bottom button span{margin-left:8px}}

/* No prescribed first layer: any sound may begin the composition. */
body.empty-universe .thresholds{align-items:center;padding-bottom:180px}
body.empty-universe .orbit-invitation{top:calc((100% - 180px)/2 + 76px);bottom:auto;margin:0}
body.empty-universe .portal.unborn .portal-symbol{opacity:.85;text-shadow:0 0 18px #b1dbff60}