:root { --paper:#eceae3; --ink:#1d1c17; --muted:#57534a; --line:#cfcbc0; font-family:"Yu Gothic","Hiragino Sans",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:.3em; }
button, summary, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
[hidden] { display:none!important; }
header, main, footer { width:min(1440px,92%); margin-inline:auto; }
header { min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:11px; letter-spacing:.08em; border-bottom:1px solid var(--line); }
.heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0 24px; }
h1 { margin:0; font-family:"Yu Mincho",serif; font-size:38px; font-weight:500; letter-spacing:.15em; }
h1 span { font:700 10px/1.5 Arial,sans-serif; letter-spacing:.22em; margin-left:22px; vertical-align:middle; }
.heading p { margin:0; font-family:"Yu Mincho",serif; letter-spacing:.2em; font-size:14px; }
.artwork { position:relative; height:clamp(330px,calc(100svh - 330px),640px); overflow:hidden; isolation:isolate; background:#ddd9cc; border-radius:2px; touch-action:pan-y; cursor:crosshair; }
#scene-root, #fallback { position:absolute; inset:0; width:100%; height:100%; }
#scene-root { opacity:0; transition:opacity .15s; }
.is-ready #scene-root { opacity:1; }
.is-ready #fallback { visibility:hidden; }
#fallback { transition:filter .2s,transform .2s; }
[data-material="vermilion"] #fallback { filter:hue-rotate(140deg) saturate(1.15); }
.has-wave #fallback { transform:skewY(-4deg) scale(.97); }
.stage-label,.stage-foot { position:absolute; left:28px; right:28px; display:flex; justify-content:space-between; gap:20px; z-index:2; font-size:11px; pointer-events:none; letter-spacing:.06em; }
.stage-label { top:25px; }
.stage-foot { bottom:25px; }
.stage-foot span:first-child { font:10px Arial,sans-serif; letter-spacing:.22em; }
.controls { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:22px 0; border-bottom:1px solid var(--line); }
.controls p { font-size:12px; line-height:2; margin:0 auto 0 0; }
button { font:inherit; color:inherit; font-size:12px; border:0; cursor:pointer; background:transparent; min-height:44px; padding:10px 15px; }
button:disabled { cursor:default; opacity:.5; }
.swatches { display:flex; border:1px solid #bab7aa; border-radius:99px; padding:3px; }
.swatches button { border-radius:99px; min-height:38px; min-width:64px; }
.swatches [aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.primary { background:var(--ink); color:var(--paper); border-radius:99px; padding-inline:24px; white-space:nowrap; }
.text-button { padding:8px 0; margin-inline:6px; text-decoration:underline; text-underline-offset:8px; }
.message { font-size:12px; line-height:1.8; }
details { margin:18px 0 25px; font-size:12px; line-height:2; }
summary { cursor:pointer; width:fit-content; min-height:35px; }
details p { max-width:62em; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 0 30px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.8; }
footer p { margin:0; }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip:focus { display:block; padding:12px; }
@media(max-width:680px) { header { min-height:58px; font-size:10px; } header span:last-child { display:none; } .heading { align-items:flex-start; flex-direction:column; gap:12px; padding:22px 0; } h1 { font-size:33px; } h1 span { margin-left:14px; } .heading p { font-size:12px; } .artwork { height:clamp(330px,calc(100svh - 410px),490px); } .stage-label,.stage-foot { left:18px; right:18px; font-size:10px; } .stage-label span:last-child { max-width:10em; text-align:right; } .stage-foot span:last-child { display:none; } .controls { gap:12px; } .controls p { width:100%; } .primary { flex:1; } footer { flex-wrap:wrap; } footer p { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }