/* MOTION PHOTO — the record sleeve. The artwork is the sleeve, the song is the disc sliding out of it, the original
   image is the disc's centre label (press it to see the image). Cool mineral ground, one typeface (M PLUS 1),
   no accent colour: colour belongs to the artwork. The only constant motion is the disc turning while it plays. */
:root{--ground:#0B0D0E;--ground2:#15181A;--ink:#EDEBE6;--ink-rgb:237,235,230;--ink2:rgba(237,235,230,.78);--soft:rgba(237,235,230,.5);--line:rgba(237,235,230,.14);--paper:#1A1D20;--paper-rgb:26,29,32;--vinyl:#050607;--gold:#E9B97A;
  --gut:clamp(18px,4vw,56px);--font:"M PLUS 1",system-ui,sans-serif}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.85 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em}
/* the series' wordmark (same face as Text, Music, Mind, Ranvier Node) */
.brand b{font:400 17px/1 "Archivo Black",sans-serif;letter-spacing:0}
.logo{width:22px;height:22px;background:var(--ink);position:relative;border-radius:1px}
.logo i{position:absolute;right:-6px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--vinyl);box-shadow:inset 0 0 0 5px #2c3135,inset 0 0 0 6px var(--ground);}
.lnk{background:none;border:0;padding:4px 0;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line)}.lnk:hover{color:var(--ink);border-color:var(--ink)}

/* stage: sleeve + disc on the left, words on the right, one screen */
.stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(28px,6vw,96px);align-items:center;padding:84px var(--gut) 48px;max-width:1440px;margin:0 auto}
@media(max-width:900px){.stage{grid-template-columns:1fr;padding-top:76px}}
.record{position:relative;width:min(76%,calc(100vh - 170px));aspect-ratio:1}
@media(max-width:900px){.record{width:82%;margin:0 auto 0 0}}
.sleeve{position:relative;z-index:2;width:100%;height:100%;background:var(--paper);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 40px 60px -30px rgba(20,25,28,.55),0 12px 24px -12px rgba(20,25,28,.4)}
.disc{position:absolute;z-index:1;top:3%;left:28%;width:94%;aspect-ratio:1;border-radius:50%;background:var(--vinyl);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.disc .grooves{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,0) 1px 4px),conic-gradient(from 30deg,rgba(255,255,255,.08),rgba(255,255,255,0) 20%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08))}
.disc .center{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ground2);border:0;padding:0;overflow:hidden;box-shadow:0 0 0 6px #1d2022}
.disc .center::after{content:"";position:absolute;left:50%;top:50%;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ground)}
.disc .center img{width:100%;height:100%;object-fit:cover;display:block}
.hall .disc{left:22%}
.hall .record:hover .disc{left:30%}

/* hall sleeve = the drop target */
.hall .sleeve{cursor:pointer;display:grid;place-items:center;background:linear-gradient(160deg,#16191B,#0E1012)}
.hall .sleeve.over{outline:2px dashed var(--ink);outline-offset:-18px}
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--ink2);pointer-events:none}
.empty b{font-weight:300;font-size:clamp(20px,2.2vw,28px);color:var(--ink);letter-spacing:.02em}
.empty span:last-child{font-size:12.5px;color:var(--soft)}
.ring{width:54px;height:54px;border-radius:50%;border:1px solid var(--ink);margin-bottom:12px;position:relative}
.ring::before,.ring::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}.ring::before{width:16px;height:1px}.ring::after{width:1px;height:16px}
#pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.sleeve.has #pv{display:block}.sleeve.has .empty{display:none}.sleeve.has{cursor:default}
.clear{position:absolute;right:14px;bottom:14px;display:none;padding:6px 14px;border-radius:999px;border:0;background:rgba(var(--paper-rgb),.92);font-size:12px;color:var(--ink)}
.sleeve.has .clear{display:block}

/* words */
.side{max-width:460px;position:relative;z-index:3}
h1{font-weight:200;font-size:clamp(24px,2.25vw,34px);line-height:1.3;letter-spacing:-.01em;margin:0 0 22px;white-space:nowrap}
@media(max-width:560px){h1{white-space:normal}}
.lede{font-size:14.5px;color:var(--ink2);margin:0 0 28px}
.label{border-left:2px solid var(--ink);padding:2px 0 2px 14px;margin:0 0 26px}
.label .lt{margin:0;font-weight:600;font-size:14px}.label .ls{margin:2px 0 0;font-size:13px;color:var(--ink2);line-height:1.7}.label .ls b{font-weight:600;color:var(--ink)}
.primary{display:block;width:100%;padding:16px 22px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:400;font-size:15px;letter-spacing:.06em;transition:transform .15s,background .2s}
.primary:hover{background:#121518}.primary:active{transform:scale(.99)}
.primary[disabled]{background:transparent;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.samples{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:12px;color:var(--soft)}
.samples button{width:44px;height:44px;padding:0;border:0;background:none;box-shadow:0 8px 14px -8px rgba(20,25,28,.5);transition:transform .15s}
.samples button:hover{transform:translateY(-2px)}
.samples img{width:100%;height:100%;object-fit:cover;display:block}

/* room */
.show canvas,.show img{position:absolute;inset:0;width:100%;height:100%;display:block}
.show img{object-fit:cover;opacity:0;transition:opacity .8s ease}
.show.orig img{opacity:1}
.room .disc{left:30%}
.room.playing .disc{left:40%}
.room.playing .disc .grooves,.room.playing .disc .center img{animation:turn 1.8s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.room .disc .center{cursor:pointer}
.room .disc .center[aria-pressed="true"]{box-shadow:0 0 0 6px var(--paper)}
.notes .kind{margin:0 0 6px;font-size:13px;color:var(--ink2)}
.notes h2{font-weight:200;font-size:clamp(26px,2.6vw,38px);line-height:1.3;margin:0 0 22px;letter-spacing:-.01em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 26px;font-size:13.5px}
.facts dt{color:var(--soft)}.facts dd{margin:0}
.player{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.play{width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.play span{width:0;height:0;border-left:13px solid var(--paper);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.play.on span{width:13px;height:13px;border:0;margin:0;background:var(--paper)}
.bar{flex:1;height:2px;background:var(--line);position:relative}.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.time{font-size:12px;color:var(--ink2);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.hint{font-size:12.5px;color:var(--soft);margin:0 0 20px}
.tools{display:flex;gap:10px;flex-wrap:wrap}
.tool{padding:10px 18px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.tool:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.proof{margin:20px 0 0;font-size:12px;color:var(--soft);line-height:1.7;word-break:break-all}.proof b{font-weight:400;color:var(--ink2)}

/* how it works (below the fold) */
.how{max-width:1440px;margin:0 auto;padding:40px var(--gut) 72px;border-top:1px solid var(--line)}
.is-room .how{display:none}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
@media(max-width:900px){.how ol{grid-template-columns:1fr 1fr}}
.how li{counter-increment:s}
.how li::before{content:counter(s);display:block;font-weight:200;font-size:34px;line-height:1;margin-bottom:12px}
.how b{display:block;font-weight:600;margin-bottom:4px}.how span{font-size:13px;color:var(--ink2);line-height:1.8}
.foot{margin:40px 0 0;font-size:12px;color:var(--soft)}

.busy{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(205,210,209,.88);backdrop-filter:blur(6px)}
.busy p{margin:0;font-size:13px;color:var(--ink2);letter-spacing:.04em}
.spin{width:46px;height:46px;border-radius:50%;background:var(--vinyl);box-shadow:inset 0 0 0 14px #23272a,inset 0 0 0 16px var(--ground);animation:turn 1.2s linear infinite}
@media(prefers-reduced-motion:reduce){.spin,.room.playing .disc .grooves,.room.playing .disc .center img{animation:none}.disc{transition:none}}

/* room: the disc is pulled far enough out that its centre label (the original image) shows and can be pressed */
.room .record{width:min(60%,calc(100vh - 190px))}
.room .disc{width:84%;top:8%;left:82%;transition:left .9s cubic-bezier(.2,.7,.2,1)}
.room.playing .disc{left:85%}
.room{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.notes h2{font-size:clamp(22px,2.1vw,32px)}
@media(max-width:900px){.room .record{width:58%}}

/* faces of the sleeve: what is saved and what is remade */
.left{display:flex;flex-direction:column;gap:22px;min-width:0}
.show #view{position:absolute;inset:0;width:100%;height:100%;display:block}
.faces{display:flex;flex-wrap:wrap;gap:4px 18px;width:min(60%,calc(100vh - 190px))}
.faces button{background:none;border:0;padding:4px 0;font-size:13px;color:var(--soft);border-bottom:1px solid transparent}
.faces button:hover{color:var(--ink)}
.faces button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.viewcap{font-size:13px;color:var(--ink2);margin:0 0 10px;line-height:1.75;min-height:3.5em}
.room .record{width:min(60%,calc(100vh - 240px))}
@media(max-width:900px){.faces{width:100%}}
@media(max-width:900px){
  .room{grid-template-columns:1fr}
  .room .record{width:min(64vw,calc(100vh - 240px))}
  .faces{width:100%;justify-content:flex-start}
  .left{flex-direction:column}
}
html,body{overflow-x:hidden}

.titlein{display:block;margin:0 0 18px}
.titlein span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.titlein small{display:block;font-weight:400;color:var(--soft);font-size:12px}
.titlein input{width:100%;padding:12px 2px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:300 18px/1.4 var(--font);color:var(--ink)}
.titlein input::placeholder{color:var(--soft)}
.titlein input:focus{outline:none;border-bottom-width:2px}

/* the analysis run: the process itself, shown as a piece (image -> scan -> bytes -> transform -> work) */
.run{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#0C0E0F}
.runbox{position:relative;width:min(92vw,86vh);aspect-ratio:1}
.runbox canvas{width:100%;height:100%;display:block}
.runcap{position:absolute;left:0;right:0;bottom:-46px;display:flex;justify-content:space-between;align-items:baseline;color:rgba(236,238,236,.9);font-size:14px}
.runcap b{font-weight:300;font-size:20px;letter-spacing:.04em}.runcap span{font-variant-numeric:tabular-nums;color:rgba(236,238,236,.6)}
.skip{position:absolute;top:-44px;right:0;background:none;border:0;color:rgba(236,238,236,.55);font-size:13px;padding:6px 0;border-bottom:1px solid rgba(236,238,236,.25)}
.skip:hover{color:#fff}

/* analysis under the sleeve: the art stays wordless inside the frame; the workings and the explanation sit below it */
.analysis{width:min(60%,calc(100vh - 240px));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;background:#0E1112;color:rgba(236,238,236,.85);padding:14px;border-radius:2px}
.analysis canvas{width:100%;height:auto;display:block}
.anacap{margin:0;font-size:12.5px;line-height:1.75;color:rgba(236,238,236,.72)}
@media(max-width:900px){.analysis{width:100%;grid-template-columns:1fr}}
.room .viewcap{display:none}

/* one width for the sleeve, the face tabs and the analysis panel, so their left edges and widths line up (CORN 10/14) */
.room{--sleeve:min(44vw,calc(100vh - 250px))}
.room .record{width:var(--sleeve);margin:0}
.room .faces,.room .analysis{width:var(--sleeve);margin:0}
.room .left{align-items:flex-start}
@media(max-width:900px){.room{--sleeve:min(62vw,calc(100vh - 250px))}.room .faces,.room .analysis{width:100%}}
.room figure.show{margin:0}
.room{--sleeve:min(33vw,calc(100vh - 250px))}

/* mood chips: the same song in another feel */
.moods{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.moods button{font:inherit;font-size:12px;line-height:1;padding:7px 10px;border:1px solid rgba(var(--ink-rgb),.25);border-radius:999px;background:transparent;color:var(--ink,#262B30);cursor:pointer}
.moods button small{font-size:10px;opacity:.55;margin-left:5px}
.moods button:hover{border-color:rgba(var(--ink-rgb),.6)}
.moods button[aria-pressed=true]{background:var(--ink,#262B30);color:var(--ground);border-color:var(--ink,#262B30)}
.moods button:focus-visible{outline:2px solid var(--ink,#262B30);outline-offset:2px}

/* seekable bar: a taller invisible hit area, the line thickens on hover */
.bar{cursor:pointer;touch-action:none}.bar::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.bar:hover,.bar:focus-visible{height:4px}.bar:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.bar i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .15s}.bar:hover i::after,.bar:focus-visible i::after{opacity:1}

/* second photo for blending */
.mix{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;width:100%;margin:6px 0 14px;padding:8px;border:1px dashed rgba(var(--ink-rgb),.35);border-radius:10px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.mix img{grid-row:1/3;width:44px;height:44px;object-fit:cover;border-radius:6px;background:rgba(var(--ink-rgb),.08)}
.mix img:not([src]){visibility:hidden}
.mix span{font-size:14px}.mix small{font-size:11px;opacity:.6}
.mix.has{border-style:solid}
.mix:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 24-hour slider: the track is the sky through a day */
.tod{margin:14px 0 6px}
.todhead{display:flex;align-items:baseline;gap:10px;font-size:12px}
.todhead span{opacity:.6}.todhead output{flex:1;font-size:14px}
.todhead button{font:inherit;font-size:11px;padding:4px 9px;border:1px solid rgba(var(--ink-rgb),.3);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.todhead button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
.tod input{width:100%;margin:8px 0 2px;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#1b2350 0%,#3c3470 18%,#e9a59a 26%,#ffe6b0 36%,#f4f4ee 52%,#ffc27e 70%,#e8705a 77%,#2a3d8f 86%,#1b2350 100%)}
.tod input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tod input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.tod.off input{opacity:.45}
.todscale{display:flex;justify-content:space-between;font-size:10px;opacity:.5}

.gear{width:18px;height:18px;fill:var(--ink);transition:transform .35s cubic-bezier(.3,1.4,.5,1);align-self:center}
.todwords{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 6px;min-height:22px;font-size:15px;font-weight:300;letter-spacing:.04em}
.todwords span{white-space:nowrap}
.tod.off .todwords{opacity:.5}

/* one quiet room: the sleeve, the disc and the title first; play and details fold away */
.fold{margin:12px 0 0;border-top:1px solid rgba(var(--ink-rgb),.15)}
.fold summary{list-style:none;cursor:pointer;padding:10px 0;font-size:14px;display:flex;align-items:baseline;gap:10px}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.fold[open] summary::after{transform:rotate(-135deg)}
.fold summary small{font-size:11px;opacity:.55}
.fold summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 「遊ぶ」に気づいてもらう: まだ開いたことがない間だけ、金の光がゆっくり横切り、左の点が脈打つ */
#foldPlay:not([open]):not(.seen) summary{position:relative;padding:10px 12px;margin:0 -12px;border-radius:12px;
  background:linear-gradient(100deg,transparent 0%,transparent 35%,rgba(233,185,122,.16) 50%,transparent 65%,transparent 100%) 0 0/250% 100% no-repeat,rgba(233,185,122,.05);
  box-shadow:inset 0 0 0 1px rgba(233,185,122,.35);animation:playSweep 3.4s ease-in-out infinite}
#foldPlay:not([open]):not(.seen) summary::before{content:"";width:7px;height:7px;border-radius:50%;background:#E9B97A;align-self:center;box-shadow:0 0 0 0 rgba(233,185,122,.6);animation:playDot 1.7s ease-out infinite}
@keyframes playSweep{0%{background-position:120% 0,0 0}60%,100%{background-position:-60% 0,0 0}}
@keyframes playDot{0%{box-shadow:0 0 0 0 rgba(233,185,122,.6)}80%,100%{box-shadow:0 0 0 9px rgba(233,185,122,0)}}
@media (prefers-reduced-motion:reduce){#foldPlay:not([open]):not(.seen) summary,#foldPlay:not([open]):not(.seen) summary::before{animation:none}}
.fold .facts{margin-top:0}

/* the scene recipe under the second photo */
.recipe{margin:-6px 0 14px;padding:12px 12px 10px;border-radius:10px;background:rgba(var(--ink-rgb),.06)}
.recipe .rhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font-size:12px;opacity:.75}
.recipe .rhead button{font:inherit;font-size:11px;padding:4px 10px;border:1px solid rgba(var(--ink-rgb),.35);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.recipe .rwords{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.recipe .rwords button{font:inherit;font-size:13px;padding:6px 10px;border:0;border-radius:6px;background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.recipe .rwords button:hover{background:var(--ink);color:var(--ground)}
.recipe .rwords button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.recipe .rnote{margin:8px 0 0;font-size:11px;opacity:.55}
#drop.making img{opacity:.55;transition:opacity .2s}
#mixLabel[data-p]::after{content:"　組み立て中 " attr(data-p);opacity:.6;font-size:12px}

/* entrance (CORN 10/14 "落ち着きすぎ"): the empty sleeve is a living sample — a photo turns into its work and keeps moving;
   the drop prompt sits as a small label at the foot; the ground takes a faint wash of the work's colour; the record turns */
body{transition:none}
body.is-hall{background:radial-gradient(ellipse 70% 60% at 30% 45%,var(--tint,transparent),transparent 70%),var(--ground)}
.showcase{position:absolute;inset:0;width:100%;height:100%;display:block}
.sleeve.has .showcase{display:none}
.hall .sleeve .empty{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);flex-direction:row;gap:10px;align-items:center;padding:10px 16px 10px 12px;border-radius:999px;background:rgba(var(--paper-rgb),.9);backdrop-filter:blur(6px);box-shadow:0 6px 18px -8px rgba(0,0,0,.4);white-space:nowrap}
.hall .sleeve .empty .ring{width:26px;height:26px;margin:0}
.hall .sleeve .empty .ring::before{width:10px}.hall .sleeve .empty .ring::after{height:10px}
.hall .sleeve .empty b{font-size:15px;font-weight:400}
.hall .sleeve .empty span:last-child{font-size:11.5px}
.hall .disc .grooves{animation:turn 14s linear infinite}
.hall h1{font-size:clamp(30px,3.7vw,58px);line-height:1.18;letter-spacing:-.02em;white-space:normal;margin-bottom:26px}
@media(prefers-reduced-motion:reduce){.hall .disc .grooves{animation:none}}
@media(max-width:600px){.hall .sleeve .empty span:last-child{display:none}.hall .sleeve .empty{bottom:14px}}

/* start page (CORN 10/14): one dark screen, the living work fills it, a large thin headline, one button */
body.is-start{background:#07080A;color:#EEF0EE}
body.is-start .how{display:none}
body.is-start .top{position:fixed;left:0;right:0;z-index:5}
body.is-start .brand{color:#EEF0EE}
body.is-start .logo{filter:invert(1)}
body.is-start #openTop{display:none}
.start{position:relative;height:100vh;height:100svh;overflow:hidden}
.start[hidden]{display:none}
#startCv{position:absolute;inset:0;width:100%;height:100%;display:block}
.start::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,10,.82) 0%,rgba(7,8,10,.55) 34%,rgba(7,8,10,0) 62%),linear-gradient(0deg,rgba(7,8,10,.7),rgba(7,8,10,0) 30%)}
.startText{position:absolute;z-index:2;left:var(--gut);bottom:clamp(48px,11vh,120px);max-width:min(860px,90vw)}
.startH{font-weight:200;font-size:clamp(34px,6vw,96px);line-height:1.06;letter-spacing:-.03em;margin:0 0 22px;color:#F4F5F3;white-space:normal}
.startLede{font-size:clamp(14px,1.1vw,16px);line-height:1.9;color:rgba(238,240,238,.72);margin:0 0 30px;max-width:34em}
.startCta{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.begin{font:inherit;font-size:16px;padding:16px 30px;border:0;border-radius:999px;background:#F4F5F3;color:#0B0D0F;cursor:pointer;transition:transform .2s,box-shadow .2s}
.begin:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(255,255,255,.45)}
.begin:focus-visible{outline:2px solid #F4F5F3;outline-offset:4px}
.lnk.light{color:rgba(238,240,238,.75);border-color:rgba(238,240,238,.35)}
.startNote{position:absolute;z-index:2;right:var(--gut);bottom:clamp(48px,11vh,120px);margin:0;font-size:12px;color:rgba(238,240,238,.55);text-align:right}
@media(max-width:700px){.start::after{background:linear-gradient(0deg,rgba(7,8,10,.88) 0%,rgba(7,8,10,.6) 45%,rgba(7,8,10,0) 75%)}.startNote{display:none}}
.startH br+*{display:inline}.startH{white-space:nowrap}
.startLede{max-width:30em}

/* start page v2 (CORN 10/14 "文字が微妙・アートが雑"): the headline stands vertically in Shippori Mincho, like the spine and
   caption of a Japanese record sleeve; the lede and the button sit at the foot; the caption reads like a museum label */
:root{--mincho:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;--warm:#EDEBE6}
.startText{position:absolute;inset:0;z-index:2;max-width:none;left:0;bottom:0;pointer-events:none}
.startText > *{pointer-events:auto}
.startH{position:absolute;left:var(--gut);top:clamp(92px,13vh,140px);writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;font-size:clamp(34px,4.6vw,72px);line-height:1.55;letter-spacing:.14em;color:var(--warm);margin:0;white-space:nowrap}
.startLede{position:absolute;left:var(--gut);bottom:calc(clamp(48px,10vh,104px) + 78px);margin:0;max-width:26em;font-size:14px;line-height:2;color:rgba(237,235,230,.66)}
.startCta{position:absolute;left:var(--gut);bottom:clamp(48px,10vh,104px)}
.begin{background:var(--warm);color:#121314;font-size:15px;letter-spacing:.04em;padding:15px 30px}
.startNote{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11.5px;color:rgba(237,235,230,.5)}
.startNote b{font-family:var(--mincho);font-weight:400;font-size:16px;letter-spacing:.08em;color:rgba(237,235,230,.86)}
.start::after{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 26%,rgba(0,0,0,0) 46%),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 34%)}
@media(max-width:700px){
  .startH{writing-mode:horizontal-tb;top:auto;bottom:calc(clamp(40px,8vh,80px) + 190px);font-size:clamp(30px,9vw,40px);line-height:1.4;letter-spacing:.06em}
  .startLede{bottom:calc(clamp(40px,8vh,80px) + 76px);font-size:13px;max-width:none;right:var(--gut)}
  .startCta{bottom:clamp(40px,8vh,80px)}
  .start::after{background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 48%,rgba(0,0,0,0) 72%)}}
.startH{font-size:clamp(30px,min(4.6vw,calc((100vh - 380px)/8.6)),72px)}

/* face tabs as a contact sheet: each a live thumbnail with its name under it */
.room .faces{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:14px}
.faces button{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;border:0;background:none;cursor:pointer;color:var(--soft);font-size:11px;line-height:1.35;text-align:left}
.faces button canvas{width:100%;aspect-ratio:1;display:block;background:#15181a;opacity:.8;transition:opacity .2s,transform .2s;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.faces button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faces button:hover canvas{opacity:1}
.faces button[aria-selected="true"]{color:var(--ink);border-bottom-color:transparent}
.faces button[aria-selected="true"] canvas{opacity:1;outline:2px solid var(--ink);outline-offset:2px}
.faces button:focus-visible canvas{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:600px){.room .faces{grid-template-columns:repeat(7,64px);overflow-x:auto;padding-bottom:6px}}
@media(max-width:700px){.startNote{display:none}}
/* start page v3 (CORN 10/14 "横の方がいい"): the Mincho headline lies horizontally; headline, lede and buttons stack at the bottom left */
.startText{position:absolute;inset:auto auto clamp(48px,10vh,104px) var(--gut);display:flex;flex-direction:column;align-items:flex-start;max-width:min(900px,88vw);pointer-events:auto}
.startH,.startLede,.startCta{position:static}
.startH{writing-mode:horizontal-tb;font-size:clamp(34px,5.2vw,86px);line-height:1.22;letter-spacing:.04em;margin:0 0 24px;white-space:nowrap}
.startLede{margin:0 0 30px;max-width:30em}
@media(max-width:700px){.startText{inset:auto var(--gut) clamp(40px,8vh,80px) var(--gut)}.startH{font-size:clamp(30px,9vw,40px);white-space:normal}.startLede{font-size:13px}}

/* night theme for the whole site (CORN 10/14 "start 以降もかっこよく"): one dark ground, warm white type, Mincho for titles,
   gold only where something is being read, chosen or played */
h1,.notes h2,#ctTitle{font-family:var(--mincho);font-weight:500;letter-spacing:.04em}
.hall h1{font-size:clamp(30px,3.6vw,56px)}
.disc{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.9)}
.disc .grooves{background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 4px),conic-gradient(from 30deg,rgba(233,185,122,.10),rgba(255,255,255,0) 20%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 70%,rgba(233,185,122,.10))}
.sleeve{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 70px -30px rgba(0,0,0,.95)}
.primary{background:var(--ink);color:var(--ground)}
.primary:disabled{opacity:.35}
.moods button[aria-pressed=true],.todhead button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#121314}
.bar i,.bar i::after{background:var(--gold)}
.play{background:var(--ink);color:var(--ground)}
.faces button[aria-selected="true"] canvas{outline-color:var(--gold)}
.label{border-left-color:var(--gold)}
.recipe .rwords button:hover{background:var(--gold);color:#121314}
body.is-start .logo{filter:none}
.logo i{box-shadow:inset 0 0 0 5px #2c3135,inset 0 0 0 6px var(--ink)}
.hall .sleeve .empty{background:rgba(11,13,14,.82);color:var(--ink)}
.topR{display:flex;align-items:center;gap:22px}
.langBtn{font-size:12px;letter-spacing:.06em}
body.is-start .langBtn{color:rgba(237,235,230,.75)}
.room .faces{scrollbar-width:thin;scrollbar-color:rgba(237,235,230,.25) transparent}.room .faces::-webkit-scrollbar{height:4px}.room .faces::-webkit-scrollbar-thumb{background:rgba(237,235,230,.25);border-radius:4px}.room .faces::-webkit-scrollbar-track{background:transparent}
/* the room is lit (CORN 10/14 "背景が暗すぎて何をしているのか分かりづらい"): a soft spotlight on the wall behind the record,
   a hairline frame and a lifted shadow for the sleeve, a visible sheen and rim on the vinyl */
body.is-room{background:radial-gradient(ellipse 55% 75% at 32% 46%,#2B3033 0%,#1A1D20 45%,#0B0D0E 85%)}
.room .sleeve{outline:1px solid rgba(237,235,230,.22);outline-offset:0;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 50px 90px -30px rgba(0,0,0,.95),0 0 120px -20px rgba(233,185,122,.12)}
.room .disc{background:radial-gradient(circle at 50% 50%,#1b1e20 0 30%,#0f1112 31% 100%);box-shadow:0 0 0 1px rgba(237,235,230,.16),0 0 0 6px rgba(0,0,0,.35),0 40px 80px -30px rgba(0,0,0,.95)}
.room .disc .grooves{background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.085) 0 1px,rgba(0,0,0,0) 1px 5px),conic-gradient(from 20deg,rgba(255,255,255,.16),rgba(255,255,255,0) 12%,rgba(233,185,122,.12) 30%,rgba(255,255,255,0) 45%,rgba(255,255,255,.14) 62%,rgba(255,255,255,0) 75%,rgba(233,185,122,.1) 90%,rgba(255,255,255,.16))}
.room .faces button canvas{box-shadow:0 0 0 1px rgba(237,235,230,.12),0 6px 14px -8px rgba(0,0,0,.6)}

.outs{margin-top:10px}
.out:disabled{opacity:.5;cursor:progress}