1225 lines
42 KiB
CSS
1225 lines
42 KiB
CSS
/* ————————————————————————————————————————————————
|
|
ZHILA · sound lies as relief
|
|
palette sampled from the reference: resin, ember, blood, bone, ash
|
|
one surface: no cards, no radii, no shadows — black pools and hairlines
|
|
———————————————————————————————————————————————— */
|
|
|
|
:root{
|
|
--resin:#0c0908;
|
|
--soot:#060404;
|
|
--ember:#e8432a;
|
|
--blood:#a8271a;
|
|
--bone:#efe4d4;
|
|
--ash:#9b8579;
|
|
--ash-2:#6d5b52;
|
|
--line:rgba(232,64,42,.20);
|
|
--line-soft:rgba(232,64,42,.12);
|
|
--hair:rgba(239,228,212,.10);
|
|
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
|
|
--serif:"Cormorant",Georgia,"Times New Roman",serif;
|
|
--rail-l:240px;
|
|
--rail-r:216px;
|
|
--pad:20px;
|
|
}
|
|
|
|
*,*::before,*::after{box-sizing:border-box;}
|
|
html,body{height:100%;}
|
|
|
|
body{
|
|
margin:0;
|
|
background:var(--resin);
|
|
color:var(--bone);
|
|
font-family:var(--mono);
|
|
font-weight:300;
|
|
font-size:11px;
|
|
line-height:1.5;
|
|
-webkit-font-smoothing:antialiased;
|
|
text-rendering:optimizeLegibility;
|
|
overflow:hidden;
|
|
}
|
|
|
|
::selection{background:var(--ember);color:#0a0706;}
|
|
|
|
button,input{font:inherit;color:inherit;}
|
|
button{background:none;border:0;padding:0;cursor:pointer;}
|
|
h1,h2,h3,p,ol,ul,pre{margin:0;padding:0;}
|
|
ol,ul{list-style:none;}
|
|
pre{font-family:inherit;}
|
|
svg{display:block;}
|
|
|
|
:focus-visible{outline:1px solid rgba(239,228,212,.75);outline-offset:3px;}
|
|
|
|
.sr{
|
|
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
|
|
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
|
|
}
|
|
|
|
/* ————— surface ————— */
|
|
|
|
#terrain{
|
|
position:fixed;inset:0;
|
|
width:100%;height:100%;
|
|
z-index:0;
|
|
opacity:0;
|
|
transform:scale(1.015);
|
|
transition:opacity 1.5s ease, transform 2.6s cubic-bezier(.2,.6,.2,1);
|
|
pointer-events:none;
|
|
}
|
|
body.is-ready #terrain{opacity:1;transform:scale(1);}
|
|
|
|
#breath{
|
|
position:fixed;inset:0;
|
|
width:100%;height:100%;
|
|
z-index:1;
|
|
pointer-events:none;
|
|
transition:opacity .8s ease;
|
|
}
|
|
body[data-view="quarry"] #breath{opacity:0;}
|
|
.quarry-dim{
|
|
position:fixed;inset:0;z-index:2;pointer-events:none;
|
|
opacity:0;transition:opacity .8s ease;
|
|
background:
|
|
radial-gradient(56% 38% at 50% 12%, rgba(232,64,42,.08), transparent 72%),
|
|
radial-gradient(120% 100% at 50% 45%, rgba(5,3,3,.5), rgba(3,2,2,.82));
|
|
}
|
|
body[data-view="quarry"] .quarry-dim{opacity:1;}
|
|
|
|
.vignette{
|
|
position:fixed;inset:0;z-index:2;pointer-events:none;
|
|
background:
|
|
radial-gradient(130% 95% at 50% 32%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%),
|
|
linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 14%);
|
|
}
|
|
|
|
.grain{
|
|
position:fixed;inset:0;z-index:3;pointer-events:none;
|
|
opacity:.05;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.shell{
|
|
position:relative;z-index:4;
|
|
height:100dvh;
|
|
display:grid;
|
|
grid-template-rows:46px clamp(280px,33vh,366px) minmax(0,1fr) 76px;
|
|
}
|
|
|
|
/* ————— top rail ————— */
|
|
|
|
.rail--top{
|
|
display:flex;align-items:center;gap:22px;
|
|
padding:0 var(--pad);
|
|
background:linear-gradient(to bottom, rgba(8,5,4,.9), rgba(8,5,4,.3));
|
|
border-bottom:1px solid var(--line-soft);
|
|
backdrop-filter:blur(3px);
|
|
}
|
|
|
|
.brand{
|
|
font-family:var(--serif);
|
|
font-weight:400;
|
|
font-size:17px;
|
|
line-height:1;
|
|
letter-spacing:.3em;
|
|
color:var(--bone);
|
|
text-decoration:none;
|
|
white-space:nowrap;
|
|
position:relative;
|
|
top:-1px;
|
|
margin-right:-2px;
|
|
}
|
|
.brand-v{
|
|
font-family:var(--mono);
|
|
font-size:7px;
|
|
letter-spacing:.08em;
|
|
color:var(--ash-2);
|
|
margin-left:4px;
|
|
position:relative;top:-7px;
|
|
}
|
|
|
|
.doc{display:flex;align-items:center;gap:14px;min-width:0;}
|
|
.doc-name{font-size:10px;letter-spacing:.05em;color:rgba(239,228,212,.78);white-space:nowrap;}
|
|
.doc-rule{width:1px;height:11px;background:var(--hair);}
|
|
.doc-meta{
|
|
display:flex;align-items:center;gap:8px;
|
|
font-size:8.5px;letter-spacing:.05em;color:rgba(155,133,121,.8);
|
|
white-space:nowrap;
|
|
}
|
|
.doc-dot{display:inline-block;width:1px;height:9px;background:rgba(239,228,212,.13);}
|
|
|
|
.views{
|
|
margin-left:auto;
|
|
display:flex;align-items:center;gap:9px;
|
|
padding-right:18px;
|
|
border-right:1px solid rgba(239,228,212,.09);
|
|
}
|
|
.view-btn{
|
|
font-size:9.5px;letter-spacing:.16em;
|
|
color:rgba(239,228,212,.4);
|
|
padding:4px 0;position:relative;
|
|
transition:color .35s ease;
|
|
}
|
|
.view-btn:hover{color:var(--bone);}
|
|
.view-btn.is-on{color:var(--bone);}
|
|
.view-btn.is-on::after{
|
|
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
|
|
background:var(--ember);
|
|
}
|
|
.mode{
|
|
display:flex;align-items:center;gap:11px;
|
|
padding-left:18px;
|
|
border-left:1px solid rgba(239,228,212,.09);
|
|
}
|
|
.mode-btn{
|
|
font-size:10px;letter-spacing:.17em;
|
|
color:rgba(239,228,212,.4);
|
|
padding:4px 0;
|
|
transition:color .35s ease;
|
|
position:relative;
|
|
}
|
|
.mode-btn:hover{color:var(--bone);}
|
|
.mode-btn.is-on{color:var(--bone);}
|
|
.mode-btn.is-on::before{
|
|
content:"";position:absolute;left:50%;top:-2px;
|
|
width:3px;height:3px;background:var(--ember);
|
|
transform:translateX(-50%);
|
|
box-shadow:0 0 8px rgba(232,64,42,.9);
|
|
}
|
|
.mode-slash{color:rgba(109,91,82,.55);font-size:9px;}
|
|
|
|
.net{
|
|
display:flex;align-items:center;gap:8px;
|
|
font-size:8.5px;letter-spacing:.1em;
|
|
color:rgba(155,133,121,.8);
|
|
min-width:122px;
|
|
white-space:nowrap;
|
|
}
|
|
.net-tag{color:rgba(239,228,212,.62);letter-spacing:.14em;}
|
|
.net-rule{width:1px;height:8px;background:rgba(239,228,212,.14);}
|
|
.led{
|
|
width:3px;height:3px;background:var(--ember);flex:0 0 auto;
|
|
box-shadow:0 0 8px rgba(232,64,42,.9);
|
|
}
|
|
body:not(.is-ready) .led{opacity:.2}
|
|
body.is-playing .led{animation:breathe 2.4s ease-in-out infinite;}
|
|
body[data-mode="hand"] .led{background:var(--ash-2);box-shadow:none;animation:none;}
|
|
|
|
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:1}}
|
|
|
|
/* ————— sky ————— */
|
|
|
|
.sky{
|
|
position:relative;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
padding:0 24px 26px;
|
|
min-height:0;
|
|
}
|
|
.sky-inner{
|
|
display:flex;flex-direction:column;align-items:center;
|
|
width:min(580px,72vw);
|
|
position:relative;
|
|
top:-4%;
|
|
}
|
|
|
|
.void-wrap{
|
|
position:relative;
|
|
width:clamp(112px,17vh,168px);
|
|
aspect-ratio:1;
|
|
margin-bottom:clamp(16px,2.6vh,30px);
|
|
}
|
|
#halo{
|
|
position:absolute;inset:-88px;
|
|
width:calc(100% + 176px);height:calc(100% + 176px);
|
|
pointer-events:none;
|
|
}
|
|
.void{
|
|
position:absolute;inset:0;
|
|
width:100%;height:100%;
|
|
border-radius:50%;
|
|
background:
|
|
radial-gradient(circle at 50% 43%, #000 0%, #030202 55%, #0d0706 88%, #1a0c08 100%);
|
|
border:1px solid rgba(239,228,212,.24);
|
|
color:var(--bone);
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
transition:border-color .4s ease, box-shadow .6s ease;
|
|
}
|
|
.void::after{
|
|
content:"";position:absolute;inset:6px;border-radius:50%;
|
|
border:1px solid rgba(232,64,42,.13);
|
|
pointer-events:none;
|
|
}
|
|
.void:hover,.void:focus-visible{
|
|
border-color:rgba(232,64,42,.55);
|
|
box-shadow:0 0 60px rgba(232,64,42,.18), inset 0 0 40px rgba(232,64,42,.06);
|
|
}
|
|
.void-word{
|
|
font-family:var(--serif);font-weight:300;
|
|
font-size:clamp(21px,3vh,30px);
|
|
line-height:1;letter-spacing:.04em;
|
|
color:rgba(239,228,212,.92);
|
|
margin-bottom:7px;
|
|
}
|
|
.void-label{
|
|
font-size:7.5px;letter-spacing:.26em;color:var(--ash-2);
|
|
}
|
|
.void-hint{
|
|
position:absolute;inset:0;border-radius:50%;
|
|
display:grid;place-items:center;
|
|
background:radial-gradient(circle,rgba(2,1,1,.94) 0 46%,rgba(2,1,1,.6) 100%);
|
|
font-size:9px;letter-spacing:.24em;color:var(--ember);
|
|
opacity:0;transition:opacity .28s ease;
|
|
}
|
|
.void:hover .void-hint,.void:focus-visible .void-hint{opacity:1;}
|
|
.void.is-pulsed{animation:void-pulse .9s cubic-bezier(.2,.7,.2,1);}
|
|
@keyframes void-pulse{
|
|
0%{box-shadow:0 0 0 0 rgba(232,64,42,.5), inset 0 0 30px rgba(232,64,42,.2);border-color:rgba(232,64,42,.9);}
|
|
100%{box-shadow:0 0 0 34px rgba(232,64,42,0), inset 0 0 0 rgba(232,64,42,0);border-color:rgba(239,228,212,.16);}
|
|
}
|
|
|
|
.invocation{
|
|
display:flex;align-items:flex-end;gap:16px;
|
|
width:100%;
|
|
padding-bottom:7px;
|
|
border-bottom:1px solid rgba(232,64,42,.3);
|
|
position:relative;
|
|
transition:border-color .4s ease;
|
|
}
|
|
.invocation::before{
|
|
content:"";position:absolute;left:-7%;right:-7%;top:-34px;bottom:-30px;
|
|
background:radial-gradient(ellipse at 50% 55%, rgba(6,4,3,.94) 0%, rgba(6,4,3,.72) 46%, rgba(6,4,3,0) 76%);
|
|
z-index:-1;pointer-events:none;
|
|
}
|
|
.invocation:focus-within{border-color:rgba(232,64,42,.85);}
|
|
.invocation::after{
|
|
content:"";position:absolute;left:50%;bottom:-1px;height:1px;width:0;
|
|
background:var(--ember);transition:width .5s cubic-bezier(.2,.7,.2,1);
|
|
}
|
|
.invocation:focus-within::after{width:100%;left:0;}
|
|
|
|
#prompt{
|
|
flex:1;min-width:0;
|
|
background:none;border:0;outline:none;
|
|
padding:2px 0 1px;
|
|
font-family:var(--serif);font-weight:300;font-style:italic;
|
|
font-size:clamp(20px,2.8vh,26px);
|
|
line-height:1.25;letter-spacing:.005em;
|
|
color:var(--bone);
|
|
caret-color:var(--ember);
|
|
}
|
|
#prompt::placeholder{color:rgba(186,166,152,.8);font-style:italic;}
|
|
#prompt:disabled{cursor:default;}
|
|
.invoke{
|
|
font-size:9.5px;letter-spacing:.2em;
|
|
color:var(--ash);
|
|
padding-bottom:4px;
|
|
position:relative;
|
|
transition:color .3s ease;
|
|
white-space:nowrap;
|
|
}
|
|
.invoke::after{
|
|
content:"";position:absolute;right:0;bottom:0;height:1px;width:100%;
|
|
background:var(--ember);opacity:.35;transition:opacity .3s ease;
|
|
}
|
|
.invoke:hover{color:var(--bone);}
|
|
.invoke:hover::after{opacity:.9;}
|
|
|
|
.hint{
|
|
display:flex;align-items:center;gap:9px;
|
|
margin-top:14px;
|
|
font-size:8px;letter-spacing:.11em;
|
|
color:rgba(155,133,121,.85);
|
|
white-space:nowrap;
|
|
}
|
|
.hint kbd{font:inherit;color:rgba(239,228,212,.72);}
|
|
.hint-rule{width:14px;height:1px;background:rgba(239,228,212,.16);}
|
|
.hint--hand{display:none;}
|
|
body[data-mode="hand"] .hint--choir{display:none;}
|
|
body[data-mode="hand"] .hint--hand{display:flex;}
|
|
body[data-mode="hand"] .invocation{border-color:rgba(232,64,42,.12);}
|
|
body[data-mode="hand"] .hint{opacity:.5;}
|
|
|
|
/* ————— deck ————— */
|
|
|
|
.deck{
|
|
display:grid;
|
|
grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
|
|
min-height:0;
|
|
position:relative;
|
|
}
|
|
|
|
.rail{padding:16px var(--pad) 14px;min-height:0;position:relative;}
|
|
|
|
.head{
|
|
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
|
|
padding-bottom:8px;
|
|
border-bottom:1px solid var(--line);
|
|
}
|
|
.title{
|
|
font-family:var(--serif);font-weight:300;
|
|
font-size:23px;line-height:1;letter-spacing:.04em;
|
|
color:var(--bone);
|
|
}
|
|
.sub{
|
|
font-size:8px;line-height:1;letter-spacing:.14em;
|
|
color:rgba(155,133,121,.8);
|
|
white-space:nowrap;
|
|
}
|
|
.sub--tag{
|
|
color:rgba(232,64,42,.8);
|
|
letter-spacing:.2em;
|
|
font-size:7.5px;
|
|
}
|
|
.chips{display:flex;align-items:center;gap:9px;font-size:7px;letter-spacing:.13em;line-height:1;}
|
|
.chip{color:rgba(155,133,121,.7);position:relative;}
|
|
.chip + .chip{padding-left:9px;}
|
|
.chip + .chip::before{
|
|
content:"";position:absolute;left:0;top:50%;width:1px;height:6px;
|
|
background:rgba(239,228,212,.16);transform:translateY(-50%);
|
|
}
|
|
.chip:first-child{color:rgba(232,64,42,.85);}
|
|
|
|
.agent::after,.side::before{
|
|
content:"";position:absolute;top:0;bottom:0;width:1px;
|
|
background:linear-gradient(to bottom,
|
|
rgba(232,64,42,0) 0%,
|
|
rgba(232,64,42,.22) 16%,
|
|
rgba(232,64,42,.22) 72%,
|
|
rgba(232,64,42,0) 100%);
|
|
pointer-events:none;
|
|
}
|
|
.agent::after{right:0;}
|
|
.side::before{left:0;}
|
|
|
|
/* ————— choir ————— */
|
|
|
|
.agent{display:flex;flex-direction:column;min-height:0;}
|
|
|
|
.state{
|
|
display:flex;align-items:center;gap:7px;
|
|
margin:9px 0 2px;
|
|
font-size:8px;letter-spacing:.13em;
|
|
color:var(--ash);
|
|
}
|
|
.state-meta{margin-left:auto;color:rgba(109,91,82,.9);letter-spacing:.06em;}
|
|
body[data-mode="hand"] .state{color:var(--ash-2);}
|
|
.state.is-thinking .led{animation:breathe .9s ease-in-out infinite;}
|
|
|
|
.log{
|
|
flex:1;min-height:0;
|
|
overflow-y:auto;overscroll-behavior:contain;
|
|
margin:3px -8px 0 0;padding:0 8px 10px 0;
|
|
scrollbar-width:thin;
|
|
scrollbar-color:rgba(232,64,42,.25) transparent;
|
|
}
|
|
.log::-webkit-scrollbar{width:3px;}
|
|
.log::-webkit-scrollbar-thumb{background:rgba(232,64,42,.25);}
|
|
|
|
.call{
|
|
padding:9px 0 8px;
|
|
border-bottom:1px solid rgba(239,228,212,.055);
|
|
animation:rise .45s cubic-bezier(.2,.7,.2,1) both;
|
|
}
|
|
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
|
|
|
|
.call--you{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:baseline;}
|
|
.call--you p{
|
|
font-family:var(--serif);font-style:italic;font-weight:300;
|
|
font-size:15px;line-height:1.28;
|
|
color:rgba(239,228,212,.86);
|
|
letter-spacing:.005em;
|
|
}
|
|
.call-t{
|
|
font-size:7px;letter-spacing:.03em;
|
|
color:rgba(109,91,82,.9);
|
|
font-variant-numeric:tabular-nums;
|
|
padding-top:2px;
|
|
}
|
|
.call-head{display:flex;align-items:baseline;gap:8px;}
|
|
.call-head .call-t{flex:0 0 32px;}
|
|
.call-name{
|
|
font-size:10px;letter-spacing:.01em;
|
|
color:rgba(239,228,212,.9);
|
|
flex:1;min-width:0;
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
.call-src{
|
|
font-size:6.5px;letter-spacing:.12em;
|
|
color:rgba(155,133,121,.6);
|
|
text-transform:lowercase;
|
|
}
|
|
.call-src:only-of-type{color:var(--ash-2);}
|
|
.call--mcp .call-src{color:rgba(232,64,42,.8);}
|
|
.call-ms{
|
|
font-size:6.5px;letter-spacing:.04em;
|
|
color:rgba(109,91,82,.95);
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
.call-undo{
|
|
font-size:6.5px;letter-spacing:.08em;
|
|
color:rgba(155,133,121,.85);
|
|
border-bottom:1px solid rgba(155,133,121,.35);
|
|
display:none;
|
|
}
|
|
.call:hover .call-ms{display:none;}
|
|
.call:hover .call-undo{display:inline;}
|
|
.call-args{
|
|
margin:4px 0 0 40px;
|
|
font-size:8px;line-height:1.6;
|
|
color:rgba(155,133,121,.95);
|
|
white-space:pre-wrap;
|
|
overflow-wrap:anywhere;
|
|
animation:fade .5s ease both;
|
|
}
|
|
@keyframes fade{from{opacity:0}to{opacity:1}}
|
|
.call-args .p{color:rgba(155,133,121,.42);}
|
|
.call--say{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:baseline;}
|
|
.call--say p{
|
|
font-family:var(--mono);font-size:9.5px;line-height:1.65;
|
|
color:rgba(239,228,212,.88);
|
|
border-left:1px solid rgba(232,64,42,.5);
|
|
padding-left:8px;
|
|
}
|
|
.call-args--line{
|
|
margin:3px 0 0 40px;
|
|
font-size:8px;line-height:1.55;
|
|
color:rgba(155,133,121,.82);
|
|
white-space:normal;
|
|
}
|
|
.call-args--line:empty{display:none;}
|
|
.call-result{
|
|
margin:3px 0 0 40px;
|
|
font-size:7px;line-height:1.5;
|
|
color:rgba(109,91,82,.95);
|
|
white-space:pre-wrap;overflow-wrap:anywhere;
|
|
}
|
|
.chip.is-live{color:rgba(232,64,42,1);}
|
|
body.agent-offline .net .led{background:var(--ash-2);box-shadow:none;animation:none;}
|
|
.call-args .k{color:rgba(155,133,121,.95);}
|
|
.call-args .v{color:rgba(239,228,212,.72);}
|
|
|
|
.shape{
|
|
border-top:1px solid var(--line-soft);
|
|
padding-top:9px;
|
|
margin-top:2px;
|
|
flex:0 0 auto;
|
|
}
|
|
.shape-head{
|
|
display:flex;justify-content:space-between;
|
|
font-size:7px;letter-spacing:.15em;color:rgba(109,91,82,.95);
|
|
margin-bottom:4px;
|
|
}
|
|
.slider{
|
|
display:grid;grid-template-columns:58px minmax(0,1fr) 30px;
|
|
align-items:center;gap:8px;
|
|
padding:3px 0;
|
|
cursor:ew-resize;
|
|
}
|
|
.slider-name{font-size:8.5px;letter-spacing:.02em;color:var(--ash);white-space:nowrap;}
|
|
.slider output{
|
|
font-size:7px;text-align:right;color:rgba(155,133,121,.85);
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
input[type="range"]{
|
|
-webkit-appearance:none;appearance:none;
|
|
width:100%;height:14px;
|
|
background:transparent;border:0;margin:0;padding:0;
|
|
cursor:ew-resize;
|
|
}
|
|
input[type="range"]::-webkit-slider-runnable-track{height:1px;background:rgba(155,133,121,.3);}
|
|
input[type="range"]::-webkit-slider-thumb{
|
|
-webkit-appearance:none;appearance:none;
|
|
width:2px;height:11px;margin-top:-5px;
|
|
background:var(--bone);border:0;border-radius:0;
|
|
}
|
|
input[type="range"]::-moz-range-track{height:1px;background:rgba(155,133,121,.3);}
|
|
input[type="range"]::-moz-range-thumb{width:2px;height:11px;background:var(--bone);border:0;border-radius:0;}
|
|
input[type="range"]:focus-visible{outline:1px solid rgba(239,228,212,.55);outline-offset:4px;}
|
|
|
|
/* ————— nave ————— */
|
|
|
|
.corridor{
|
|
display:grid;grid-template-rows:auto minmax(0,1fr);
|
|
min-height:0;min-width:0;
|
|
padding-top:16px;
|
|
}
|
|
.corridor-head{padding:0 var(--pad) 8px;border-bottom:1px solid var(--line-soft);}
|
|
.corridor-sub{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;}
|
|
.sub-rule{width:1px;height:7px;background:rgba(239,228,212,.16);}
|
|
|
|
.stage{position:relative;min-height:0;overflow:hidden;}
|
|
#spires{
|
|
position:absolute;left:0;top:0;width:100%;height:40%;
|
|
pointer-events:none;
|
|
mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.2) 92%,transparent 100%);
|
|
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.2) 92%,transparent 100%);
|
|
}
|
|
#nave{
|
|
position:absolute;inset:0;
|
|
width:100%;height:100%;
|
|
overflow:visible;
|
|
cursor:crosshair;
|
|
}
|
|
.now-label{
|
|
position:absolute;left:var(--pad);bottom:5px;
|
|
font-size:7px;letter-spacing:.22em;color:rgba(155,133,121,.5);
|
|
pointer-events:none;
|
|
}
|
|
|
|
.road-base,.road-floor,.gate-line{pointer-events:none;}
|
|
.road-base{fill:url(#roadFade);}
|
|
.road-floor{fill:url(#roadFloor);}
|
|
.gate-line{stroke:rgba(232,64,42,.4);stroke-width:1;shape-rendering:crispEdges;}
|
|
.now-glow{stroke:var(--ember);stroke-width:7;opacity:.16;filter:blur(4px);pointer-events:none;}
|
|
.lane-edge{stroke:rgba(232,64,42,.36);stroke-width:.85;fill:none;pointer-events:none;}
|
|
.lane-edge--outer{stroke:rgba(232,64,42,.62);}
|
|
.lane-glow{stroke:rgba(232,64,42,.55);stroke-width:3;fill:none;opacity:0;filter:blur(3px);}
|
|
.lane-hit{fill:transparent;pointer-events:all;transition:fill .35s ease;}
|
|
.lane.is-hot .lane-hit{fill:rgba(232,64,42,.035);}
|
|
.lane.is-hot .lane-glow{opacity:.55;}
|
|
.lane-name{
|
|
font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;
|
|
fill:rgba(155,133,121,.8);
|
|
pointer-events:none;
|
|
text-anchor:middle;
|
|
transition:fill .3s ease;
|
|
}
|
|
.lane-name.is-hot{fill:var(--bone);}
|
|
.bar-line{stroke:rgba(232,64,42,.3);stroke-width:.55;pointer-events:none;}
|
|
.bar-line--major{stroke:rgba(232,64,42,.42);stroke-width:.7;}
|
|
.now-line{stroke:rgba(232,64,42,.9);stroke-width:1;pointer-events:none;shape-rendering:crispEdges;}
|
|
|
|
.clip{transition:opacity .4s ease;}
|
|
.clip-body{
|
|
fill:rgba(5,2,2,.82);
|
|
stroke:rgba(232,64,42,.62);
|
|
stroke-width:.75;
|
|
transition:fill .3s ease, stroke .3s ease;
|
|
}
|
|
.clip-strata{fill:none;stroke:rgba(232,64,42,.28);stroke-width:.6;}
|
|
.clip-face{fill:none;stroke:rgba(239,228,212,.16);stroke-width:.7;pointer-events:none;}
|
|
.clip-loop circle:first-child{fill:none;stroke:rgba(239,228,212,.4);stroke-width:.8;}
|
|
.clip-loop-dot{fill:rgba(232,64,42,.85);stroke:none;}
|
|
.clip-name{
|
|
font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
|
|
fill:rgba(239,228,212,.7);
|
|
}
|
|
.clip-era{
|
|
font-family:var(--mono);font-size:6.5px;letter-spacing:.04em;
|
|
fill:rgba(155,133,121,.6);
|
|
text-anchor:end;
|
|
}
|
|
.clip:hover .clip-body,.clip.is-hot .clip-body{
|
|
fill:rgba(30,10,7,.92);
|
|
stroke:rgba(239,228,212,.6);
|
|
}
|
|
.clip:hover .clip-name,.clip.is-hot .clip-name{fill:var(--bone);}
|
|
.clip.is-now .clip-body{stroke:rgba(232,64,42,.95);fill:rgba(30,11,8,.55);}
|
|
.clip.is-sel .clip-body{stroke:rgba(239,228,212,.95);stroke-width:1.3;fill:rgba(22,11,8,.92);}
|
|
.clip.is-sel .clip-name{fill:var(--bone);}
|
|
.clip--new .clip-body{animation:ignite 1.8s ease-out both;}
|
|
@keyframes ignite{
|
|
0%{stroke:rgba(239,228,212,.95);fill:rgba(232,64,42,.4);}
|
|
100%{stroke:rgba(232,64,42,.42);fill:rgba(7,4,4,.84);}
|
|
}
|
|
.clip--new .clip-name{animation:fade-name 1.8s ease-out both;}
|
|
@keyframes fade-name{0%{fill:var(--bone)}100%{fill:rgba(239,228,212,.7)}}
|
|
|
|
.playhead-line{stroke:var(--ember);stroke-width:1.4;shape-rendering:crispEdges;filter:drop-shadow(0 0 6px rgba(232,64,42,.7));}
|
|
.playhead-glow{
|
|
stroke:var(--ember);
|
|
stroke-width:calc(9px + var(--lv,0) * 15px);
|
|
opacity:calc(.14 + var(--lv,0) * .16);
|
|
filter:blur(6px);
|
|
}
|
|
.playhead-mark{fill:var(--ember);filter:drop-shadow(0 0 6px rgba(232,64,42,.9));}
|
|
.ruler-tick{stroke:rgba(155,133,121,.32);stroke-width:.75;}
|
|
.ruler-text{
|
|
font-family:var(--mono);font-size:7px;
|
|
fill:rgba(155,133,121,.6);
|
|
letter-spacing:.04em;
|
|
}
|
|
|
|
/* ————— crystal + cilia ————— */
|
|
|
|
.side{
|
|
display:grid;
|
|
grid-template-rows:minmax(0,1.06fr) minmax(0,.94fr);
|
|
min-height:0;
|
|
position:relative;
|
|
}
|
|
.side .rail{padding-left:18px;padding-right:16px;}
|
|
|
|
.crystal{display:flex;flex-direction:column;min-height:0;}
|
|
.crystal-meta{
|
|
display:flex;justify-content:space-between;gap:8px;
|
|
padding:7px 0 5px;
|
|
font-size:7px;letter-spacing:.06em;color:rgba(155,133,121,.7);
|
|
}
|
|
.lattice{flex:1;min-height:74px;position:relative;}
|
|
.lattice svg{width:100%;height:100%;}
|
|
.lat-grid{stroke:rgba(239,228,212,.13);stroke-width:.6;}
|
|
.lat-grid--bar{stroke:rgba(232,64,42,.28);}
|
|
.lat-key{font-family:var(--mono);font-size:6.5px;fill:rgba(155,133,121,.7);}
|
|
.lat-note{
|
|
fill:rgba(10,6,5,.92);
|
|
stroke:rgba(239,228,212,.95);
|
|
stroke-width:.9;
|
|
}
|
|
.lat-note--lone{stroke:rgba(232,64,42,.9);fill:rgba(46,13,9,.5);}
|
|
.lat-playhead{stroke:rgba(232,64,42,.6);stroke-width:.75;}
|
|
|
|
.cilia{border-top:1px solid var(--line-soft);display:flex;flex-direction:column;min-height:0;}
|
|
|
|
.faders{
|
|
flex:1;min-height:0;
|
|
display:flex;align-items:stretch;gap:9px;
|
|
padding:12px 2px 4px;
|
|
}
|
|
.ch{
|
|
flex:1;min-width:0;
|
|
display:flex;flex-direction:column;align-items:center;gap:5px;
|
|
cursor:ns-resize;
|
|
outline-offset:2px;
|
|
}
|
|
.ch-db{
|
|
font-size:7px;letter-spacing:.01em;color:rgba(155,133,121,.7);
|
|
height:9px;font-variant-numeric:tabular-nums;
|
|
}
|
|
.ch-track{flex:1;width:100%;min-height:46px;position:relative;display:flex;justify-content:center;}
|
|
.ch-track::before{
|
|
content:"";position:absolute;top:0;bottom:0;width:1px;
|
|
background:linear-gradient(to bottom,rgba(155,133,121,.16),rgba(155,133,121,.04));
|
|
}
|
|
.ch-fill{
|
|
position:absolute;bottom:0;width:1px;
|
|
background:linear-gradient(to top,rgba(239,228,212,.95),rgba(239,228,212,.32));
|
|
pointer-events:none;
|
|
}
|
|
.ch-bead{
|
|
position:absolute;width:3px;height:9px;
|
|
background:var(--bone);
|
|
box-shadow:0 0 9px rgba(239,228,212,.3);
|
|
pointer-events:none;
|
|
transition:background .3s ease;
|
|
}
|
|
body.is-playing .ch-bead{background:var(--ember);box-shadow:0 0 10px rgba(232,64,42,.65);}
|
|
.ch-name{
|
|
font-size:7.5px;letter-spacing:.02em;color:rgba(155,133,121,.78);
|
|
height:10px;white-space:nowrap;transition:color .3s ease;
|
|
max-width:100%;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
.ch:hover .ch-name{color:var(--bone);}
|
|
.ch.is-hot .ch-fill{background:linear-gradient(to top,rgba(239,228,212,1),rgba(239,228,212,.4));}
|
|
.ch.is-hot .ch-bead{background:var(--bone);}
|
|
|
|
/* ————— transport ————— */
|
|
|
|
.rail--transport{
|
|
display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);
|
|
padding:0 var(--pad);
|
|
border-top:1px solid rgba(232,64,42,.22);
|
|
background:linear-gradient(to top, rgba(5,3,3,.95), rgba(5,3,3,.4));
|
|
backdrop-filter:blur(3px);
|
|
min-width:0;
|
|
}
|
|
.tp{display:flex;align-items:center;gap:9px;min-width:0;}
|
|
.tp--go{gap:4px;}
|
|
|
|
.play{
|
|
width:38px;height:38px;flex:0 0 auto;
|
|
border:1px solid rgba(239,228,212,.22);
|
|
border-radius:50%;
|
|
display:grid;place-items:center;
|
|
color:var(--bone);
|
|
transition:border-color .35s ease,color .35s ease,background .35s ease;
|
|
}
|
|
.play svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;}
|
|
.play:hover{border-color:rgba(239,228,212,.6);}
|
|
.is-playing .play{border-color:rgba(232,64,42,.9);color:var(--ember);background:rgba(232,64,42,.06);}
|
|
.i-pause{display:none;}
|
|
.is-playing .i-play{display:none;}
|
|
.is-playing .i-pause{display:block;}
|
|
|
|
.icon{
|
|
width:30px;height:30px;display:grid;place-items:center;
|
|
color:rgba(155,133,121,.75);
|
|
transition:color .3s ease;
|
|
}
|
|
.icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1;}
|
|
.icon:hover{color:var(--bone);}
|
|
.icon--rec svg circle{fill:transparent;transition:fill .3s ease,stroke .3s ease;}
|
|
.icon--rec:hover{color:var(--ember);}
|
|
.icon--rec[aria-pressed="true"]{color:var(--ember);}
|
|
.icon--rec[aria-pressed="true"] svg circle{fill:var(--ember);stroke:var(--ember);}
|
|
|
|
.tp--clock{gap:12px;}
|
|
.tp-label{font-size:7px;letter-spacing:.16em;color:rgba(109,91,82,.95);white-space:nowrap;}
|
|
.tp-bars{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums;min-width:32px;}
|
|
.tp-time{
|
|
font-family:var(--mono);font-weight:200;
|
|
font-size:22px;line-height:1;letter-spacing:.01em;
|
|
color:var(--bone);
|
|
font-variant-numeric:tabular-nums;
|
|
white-space:nowrap;
|
|
}
|
|
.tp-time .ms{color:rgba(155,133,121,.7);}
|
|
|
|
.tp--tempo{gap:9px;padding-left:2px;}
|
|
.tempo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
|
|
.tp-num{
|
|
font-size:12px;letter-spacing:.02em;color:var(--bone);
|
|
font-variant-numeric:tabular-nums;
|
|
border-bottom:1px solid rgba(232,64,42,.3);
|
|
padding:0 1px 1px;
|
|
cursor:ns-resize;
|
|
}
|
|
.tp-num:hover{border-color:rgba(232,64,42,.8);}
|
|
.tp-sub{font-size:7px;letter-spacing:.07em;color:rgba(155,133,121,.7);display:flex;align-items:center;gap:6px;white-space:nowrap;}
|
|
.tp-rule{width:7px;height:1px;background:rgba(239,228,212,.16);}
|
|
|
|
.tp--knobs{gap:12px;padding-left:4px;}
|
|
.knob{width:44px;display:grid;justify-items:center;gap:3px;cursor:ns-resize;}
|
|
.knob svg{width:32px;height:32px;overflow:visible;}
|
|
.k-track{fill:none;stroke:rgba(155,133,121,.22);stroke-width:.9;}
|
|
.k-arc{fill:none;stroke:var(--ember);stroke-width:1;opacity:.9;}
|
|
.k-tick{stroke:var(--bone);stroke-width:1.1;stroke-linecap:round;}
|
|
.knob-name{font-size:6.5px;letter-spacing:.05em;color:rgba(155,133,121,.7);white-space:nowrap;}
|
|
.knob:hover .knob-name{color:var(--bone);}
|
|
|
|
.tp--in{gap:7px;padding-left:2px;}
|
|
.srcs{display:flex;align-items:center;gap:9px;}
|
|
.src{
|
|
font-size:7.5px;letter-spacing:.05em;
|
|
color:rgba(155,133,121,.5);
|
|
padding:3px 0;
|
|
position:relative;
|
|
transition:color .3s ease;
|
|
}
|
|
.src:hover{color:var(--bone);}
|
|
.src.is-on{color:rgba(239,228,212,.9);}
|
|
.src.is-on::before{
|
|
content:"";position:absolute;left:50%;top:-2px;width:3px;height:3px;
|
|
background:var(--ember);transform:translateX(-50%);
|
|
box-shadow:0 0 7px rgba(232,64,42,.9);
|
|
}
|
|
.src.is-denied{color:rgba(232,64,42,.7);}
|
|
|
|
.tp--scope{flex:1 1 160px;min-width:110px;max-width:360px;gap:9px;align-items:center;}
|
|
#scope{width:100%;height:26px;display:block;opacity:.95;}
|
|
.tp--master{flex:0 1 210px;flex-direction:column;align-items:stretch;gap:5px;min-width:120px;max-width:210px;}
|
|
.master-top{display:flex;align-items:baseline;gap:7px;}
|
|
.tp-db{font-size:7.5px;color:rgba(155,133,121,.85);margin-left:auto;font-variant-numeric:tabular-nums;}
|
|
.snd{
|
|
font-size:7px;letter-spacing:.1em;color:rgba(155,133,121,.5);
|
|
border-bottom:1px solid transparent;padding-bottom:1px;margin-left:6px;
|
|
}
|
|
.snd[aria-pressed="true"]{color:rgba(239,228,212,.8);border-color:rgba(232,64,42,.4);}
|
|
.snd:hover{color:var(--bone);}
|
|
.meter{position:relative;height:2px;background:rgba(155,133,121,.16);overflow:hidden;}
|
|
.meter-fill{
|
|
position:absolute;left:0;top:0;bottom:0;width:100%;
|
|
background:linear-gradient(to right,rgba(168,39,26,.9),var(--ember));
|
|
transform:scaleX(0);transform-origin:left center;
|
|
}
|
|
.meter-peak{
|
|
position:absolute;top:-2px;bottom:-2px;width:1px;
|
|
background:rgba(239,228,212,.85);
|
|
left:0;
|
|
}
|
|
|
|
.tp--end{margin-left:auto;gap:16px;}
|
|
.ghost{
|
|
font-size:8px;letter-spacing:.13em;
|
|
color:rgba(155,133,121,.85);
|
|
padding:2px 0;
|
|
border-bottom:1px solid rgba(155,133,121,.3);
|
|
transition:color .3s ease,border-color .3s ease;
|
|
}
|
|
.ghost:hover{color:var(--bone);border-color:rgba(239,228,212,.6);}
|
|
.ghost--ember{color:var(--ember);border-color:rgba(232,64,42,.45);}
|
|
.ghost--ember:hover{color:var(--bone);border-color:var(--bone);}
|
|
|
|
/* ————— responsive ————— */
|
|
|
|
@media (max-width:1340px){
|
|
:root{--rail-l:222px;--rail-r:204px;--pad:17px;}
|
|
.tp--knobs{display:none;}
|
|
.tp--master{max-width:190px;}
|
|
.doc-meta{display:none;}
|
|
}
|
|
|
|
@media (max-width:1160px){
|
|
:root{--rail-l:208px;--rail-r:192px;}
|
|
.tp--in{display:none;}
|
|
.mode{padding-left:14px;}
|
|
.tp--master{max-width:190px;}
|
|
}
|
|
|
|
@media (max-width:980px){
|
|
.sky{min-height:280px;}
|
|
.tp--end{display:none;}
|
|
.tp--clock{gap:9px;}
|
|
.tp-time{font-size:20px;}
|
|
}
|
|
|
|
@media (max-width:860px){
|
|
html,body{height:auto;min-height:100%;overflow-x:hidden;}
|
|
body{overflow-y:auto;}
|
|
.shell{height:auto;min-height:100dvh;grid-template-rows:46px auto auto auto auto;}
|
|
.sky{padding:26px 20px 22px;min-height:0;}
|
|
.sky-inner{top:0;width:min(520px,88vw);}
|
|
.void-wrap{margin-bottom:20px;}
|
|
.deck{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;}
|
|
.agent{border-bottom:1px solid var(--line-soft);}
|
|
.agent::after{display:none;}
|
|
.agent .log{max-height:220px;}
|
|
.corridor{min-height:420px;border-bottom:1px solid var(--line-soft);}
|
|
.side{grid-template-columns:1fr 1fr;grid-template-rows:minmax(210px,auto);}
|
|
.side::before{display:none;}
|
|
.crystal{border-right:1px solid var(--line-soft);}
|
|
.cilia{border-top:0;}
|
|
.faders{padding-left:12px;padding-right:12px;}
|
|
.shell{padding-bottom:66px;}
|
|
.rail--transport{
|
|
position:fixed;left:0;right:0;bottom:0;z-index:6;
|
|
height:66px;
|
|
border-top:1px solid rgba(232,64,42,.28);
|
|
background:rgba(5,3,3,.94);
|
|
}
|
|
.tp--master{max-width:none;flex:1;}
|
|
}
|
|
|
|
@media (max-width:760px){
|
|
.tp--scope{display:none;}
|
|
.tp--master{min-width:0;flex:1;}
|
|
}
|
|
|
|
@media (max-width:600px){
|
|
:root{--pad:14px;}
|
|
.rail--top{gap:12px;}
|
|
.doc{display:none;}
|
|
.brand{font-size:16px;}
|
|
.mode{margin-left:auto;padding-left:0;border-left:0;}
|
|
.net{display:none;}
|
|
.sky{padding-top:16px;}
|
|
.void-wrap{width:104px;}
|
|
#halo{inset:-64px;width:calc(100% + 128px);height:calc(100% + 128px);}
|
|
#prompt{font-size:19px;}
|
|
.hint{display:none;}
|
|
.corridor{min-height:340px;}
|
|
.corridor-sub .sub{font-size:7px;}
|
|
.side{grid-template-columns:1fr;grid-template-rows:minmax(190px,auto) minmax(210px,auto);}
|
|
.crystal{border-right:0;border-bottom:1px solid var(--line-soft);}
|
|
.cilia{border-top:0;}
|
|
.shell{padding-bottom:58px;}
|
|
.rail--transport{gap:10px;height:58px;}
|
|
.play{width:32px;height:32px;}
|
|
.play svg{width:16px;height:16px;}
|
|
.icon{width:24px;height:24px;}
|
|
.tp--clock{gap:8px;}
|
|
.tp-bars{display:none;}
|
|
.tp-time{font-size:17px;}
|
|
.tp--tempo{display:none;}
|
|
.tp--master{min-width:0;}
|
|
.snd{display:none;}
|
|
.master-top{justify-content:space-between;}
|
|
.tp-db{font-size:7px;}
|
|
.now-label{display:none;}
|
|
}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{
|
|
animation-duration:.001ms !important;
|
|
animation-iteration-count:1 !important;
|
|
transition-duration:.001ms !important;
|
|
}
|
|
#terrain{transform:none;}
|
|
}
|
|
|
|
/* ————————————————————————————————————————————————
|
|
QUARRY · below the nave
|
|
———————————————————————————————————————————————— */
|
|
|
|
body[data-view="quarry"] .sky,
|
|
body[data-view="quarry"] .deck{display:none;}
|
|
.quarry-tray,.quarry-deck{display:none;}
|
|
body[data-view="quarry"] .quarry-tray{display:grid;}
|
|
body[data-view="quarry"] .quarry-deck{display:grid;}
|
|
|
|
.quarry-tray{
|
|
grid-template-rows:auto minmax(0,1fr);
|
|
min-height:0;min-width:0;
|
|
position:relative;
|
|
animation:room-in .7s cubic-bezier(.2,.7,.2,1) both;
|
|
}
|
|
.quarry-deck{
|
|
grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
|
|
grid-template-rows:minmax(0,1fr) 58px;
|
|
min-height:0;min-width:0;
|
|
animation:room-in .8s cubic-bezier(.2,.7,.2,1) both;
|
|
}
|
|
@keyframes room-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
|
|
|
.tray-head{
|
|
display:flex;align-items:baseline;justify-content:space-between;gap:20px;
|
|
padding:16px 20px 8px;
|
|
border-bottom:1px solid var(--line-soft);
|
|
}
|
|
.tray-id{display:flex;align-items:baseline;gap:14px;min-width:0;}
|
|
.tray-meta{
|
|
display:flex;align-items:center;gap:12px;
|
|
font-size:8px;letter-spacing:.05em;color:var(--ash);
|
|
white-space:nowrap;
|
|
}
|
|
.tray-num{font-variant-numeric:tabular-nums;color:rgba(239,228,212,.72);}
|
|
.ghost--small{font-size:7.5px;letter-spacing:.14em;}
|
|
|
|
.seal{display:inline-flex;align-items:center;gap:6px;font-size:7.5px;letter-spacing:.11em;color:var(--ash);}
|
|
.seal i{
|
|
width:8px;height:8px;flex:0 0 auto;border-radius:50%;
|
|
border:1px solid rgba(232,64,42,.75);position:relative;
|
|
}
|
|
.seal i::after{
|
|
content:"";position:absolute;inset:2px;border-radius:50%;
|
|
background:rgba(232,64,42,.85);
|
|
}
|
|
.seal--found i::after{border-radius:0;inset:1px;background:none;border:1px solid rgba(232,64,42,.85);}
|
|
.seal--loan i::after{inset:3px 1px;border-radius:0;background:rgba(232,64,42,.85);transform:rotate(45deg);}
|
|
.seal--unknown i{border-style:dashed;border-color:rgba(155,133,121,.6);}
|
|
.seal--unknown i::after{inset:3px;background:rgba(155,133,121,.5);}
|
|
.seal--gift i::after{inset:2px;background:none;border:1px solid rgba(239,228,212,.8);}
|
|
|
|
.tray-stage{
|
|
position:relative;min-height:0;
|
|
background:radial-gradient(70% 100% at 50% 45%, rgba(4,2,2,.55), rgba(4,2,2,.05) 78%);
|
|
}
|
|
#tray{position:absolute;inset:0;width:100%;height:100%;}
|
|
#tray-overlay{position:absolute;inset:0;width:100%;height:100%;cursor:ew-resize;}
|
|
.tray-hint{
|
|
position:absolute;right:20px;bottom:8px;
|
|
font-size:7px;letter-spacing:.16em;color:rgba(155,133,121,.4);
|
|
pointer-events:none;
|
|
}
|
|
.tray-core-title{
|
|
font-family:var(--mono);font-size:7px;letter-spacing:.14em;
|
|
fill:rgba(155,133,121,.6);
|
|
}
|
|
.tray-tick{stroke:rgba(155,133,121,.3);stroke-width:.7;}
|
|
.tray-tick--major{stroke:rgba(155,133,121,.5);}
|
|
.tray-tick-text{font-family:var(--mono);font-size:6.5px;fill:rgba(155,133,121,.55);}
|
|
.tray-cut{stroke:rgba(232,64,42,.55);stroke-width:.8;stroke-dasharray:1 3;}
|
|
.tray-cut-text{font-family:var(--mono);font-size:6.5px;fill:rgba(232,64,42,.8);letter-spacing:.04em;}
|
|
.tray-lens{stroke:var(--ember);stroke-width:1.25;shape-rendering:crispEdges;filter:drop-shadow(0 0 4px rgba(232,64,42,.6));}
|
|
.tray-lens-handle{fill:var(--ember);}
|
|
.tray-lens-text{font-family:var(--mono);font-size:7px;fill:rgba(239,228,212,.85);}
|
|
|
|
/* store */
|
|
.store{display:flex;flex-direction:column;min-height:0;position:relative;}
|
|
.store::after{
|
|
content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
|
|
background:linear-gradient(to bottom,rgba(232,64,42,0),rgba(232,64,42,.2) 16%,rgba(232,64,42,.2) 72%,rgba(232,64,42,0));
|
|
pointer-events:none;
|
|
}
|
|
.store-list{flex:1;min-height:0;overflow-y:auto;padding:8px 0 10px;scrollbar-width:thin;scrollbar-color:rgba(232,64,42,.25) transparent;}
|
|
.store-list::-webkit-scrollbar{width:3px;}
|
|
.store-list::-webkit-scrollbar-thumb{background:rgba(232,64,42,.25);}
|
|
.core-item{
|
|
display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;
|
|
width:100%;padding:7px 6px 7px 8px;text-align:left;
|
|
border-left:1px solid transparent;position:relative;
|
|
transition:background .3s ease,border-color .3s ease;
|
|
}
|
|
.core-item + .core-item{border-top:1px solid rgba(239,228,212,.055);}
|
|
.core-item:hover{background:rgba(232,64,42,.035);}
|
|
.core-item.is-on{border-left-color:var(--ember);background:rgba(232,64,42,.05);}
|
|
.core-thumb{display:block;width:48px;height:58px;}
|
|
.core-name{display:block;font-size:9px;line-height:1.45;color:rgba(239,228,212,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.core-item.is-on .core-name{color:var(--bone);}
|
|
.core-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:6.8px;letter-spacing:.04em;color:rgba(155,133,121,.72);white-space:nowrap;overflow:hidden;}
|
|
.core-meta .seal{font-size:6.8px;gap:4px;}
|
|
.core-meta .seal i{width:6px;height:6px;}
|
|
|
|
.choir-call{
|
|
display:flex;align-items:flex-end;gap:8px;
|
|
border-top:1px solid var(--line-soft);
|
|
padding-top:9px;
|
|
}
|
|
#choir-input{
|
|
flex:1;min-width:0;background:none;border:0;outline:none;
|
|
border-bottom:1px solid rgba(232,64,42,.3);
|
|
padding:2px 0 4px;
|
|
font-family:var(--mono);font-size:9px;font-weight:300;letter-spacing:.01em;
|
|
color:var(--bone);
|
|
transition:border-color .3s ease;
|
|
}
|
|
#choir-input::placeholder{color:rgba(155,133,121,.62);}
|
|
#choir-input:focus{border-color:rgba(232,64,42,.8);}
|
|
#choir-input:disabled{color:rgba(239,228,212,.35);}
|
|
.choir-call button{
|
|
font-size:7.5px;letter-spacing:.14em;color:var(--ash);
|
|
border-bottom:1px solid rgba(232,64,42,.4);padding-bottom:3px;
|
|
transition:color .3s ease;
|
|
}
|
|
.choir-call button:hover{color:var(--bone);}
|
|
.choir-call.is-out button{color:rgba(232,64,42,.9);border-color:transparent;}
|
|
.extract-btn{align-self:flex-start;margin-top:9px;}
|
|
|
|
/* the face */
|
|
.faces{display:flex;flex-direction:column;min-height:0;min-width:0;padding-top:16px;}
|
|
.faces-head{padding:0 20px 8px;border-bottom:1px solid var(--line-soft);}
|
|
.face-wall{flex:1;min-height:0;position:relative;padding:12px 20px 0;}
|
|
.face-wall svg{width:100%;height:100%;display:block;overflow:visible;}
|
|
.face-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px 10px;}
|
|
.face-status{font-size:7.5px;letter-spacing:.05em;color:rgba(155,133,121,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.place-group{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
|
|
#place:disabled,#place-ring:disabled{color:rgba(109,91,82,.5);border-color:transparent;cursor:default;}
|
|
|
|
.stone{cursor:pointer;}
|
|
.stone-body{
|
|
fill:rgba(5,3,2,.9);
|
|
stroke:rgba(232,64,42,.36);
|
|
stroke-width:.9;
|
|
transition:fill .25s ease,stroke .25s ease;
|
|
}
|
|
.stone-body--a{fill:url(#stoneGradA);}
|
|
.stone-body--b{fill:url(#stoneGradB);}
|
|
.stone-body--c{fill:url(#stoneGradC);}
|
|
.stone-body--d{fill:url(#stoneGradD);}
|
|
.stone-lip{fill:none;stroke:rgba(239,228,212,.38);stroke-width:.9;stroke-linecap:round;}
|
|
.stone-foot-lip{fill:none;stroke:rgba(0,0,0,.55);stroke-width:1;}
|
|
.stone-face--inner{stroke:rgba(239,228,212,.07);}
|
|
.stone:hover .stone-body{fill:rgba(34,11,7,.94);stroke:rgba(239,228,212,.55);}
|
|
.stone.is-sel .stone-body{stroke:rgba(239,228,212,.8);fill:rgba(30,10,7,.92);}
|
|
.stone.is-struck .stone-body{fill:rgba(120,30,18,.5);stroke:var(--bone);}
|
|
.stone-face{fill:none;stroke:rgba(239,228,212,.17);stroke-width:.7;transition:stroke .25s ease;}
|
|
.stone-grain{fill:none;stroke:rgba(232,64,42,.42);stroke-width:.8;}
|
|
.stone-grain--faint{stroke:rgba(239,228,212,.14);stroke-width:.6;}
|
|
.stone-crack{fill:none;stroke:rgba(239,228,212,.18);stroke-width:.65;}
|
|
.stone-pit{fill:rgba(0,0,0,.55);stroke:rgba(232,64,42,.24);stroke-width:.5;}
|
|
.stone-strata{fill:none;stroke:rgba(239,228,212,.13);stroke-width:.6;}
|
|
.stone-num{font-family:var(--mono);font-size:7px;fill:rgba(155,133,121,.7);letter-spacing:.06em;}
|
|
.stone-seal{fill:none;stroke:rgba(155,133,121,.65);stroke-width:.7;}
|
|
.stone-seal-dot{fill:rgba(232,64,42,.8);}
|
|
.stone:hover .stone-num{fill:rgba(239,228,212,.8);}
|
|
.stone-flash{
|
|
fill:none;stroke:rgba(232,64,42,.8);opacity:0;
|
|
transform-box:fill-box;transform-origin:center;
|
|
}
|
|
.stone.is-struck .stone-flash{animation:chip .5s cubic-bezier(.2,.7,.2,1);}
|
|
@keyframes chip{
|
|
0%{opacity:.8;transform:scale(.2);}
|
|
100%{opacity:0;transform:scale(1.4);}
|
|
}
|
|
|
|
/* weather */
|
|
.weather{display:flex;flex-direction:column;min-height:0;position:relative;}
|
|
.weather::before{
|
|
content:"";position:absolute;top:0;bottom:0;left:0;width:1px;
|
|
background:linear-gradient(to bottom,rgba(232,64,42,0),rgba(232,64,42,.2) 16%,rgba(232,64,42,.2) 72%,rgba(232,64,42,0));
|
|
pointer-events:none;
|
|
}
|
|
.weather-list{padding:9px 0 2px;}
|
|
.climate{font-size:7px;letter-spacing:.07em;color:rgba(109,91,82,.95);padding:3px 0 12px;}
|
|
.ring-block{
|
|
border-top:1px solid var(--line-soft);
|
|
padding-top:10px;
|
|
display:flex;flex-direction:column;gap:7px;
|
|
}
|
|
.ring-head{display:flex;align-items:baseline;justify-content:space-between;}
|
|
.ring-head strong{
|
|
font-family:var(--serif);font-weight:300;
|
|
font-size:24px;line-height:1;color:rgba(239,228,212,.88);
|
|
font-variant-numeric:lining-nums;
|
|
}
|
|
.ring-visual{height:74px;position:relative;}
|
|
.ring-visual svg{width:100%;height:100%;display:block;}
|
|
.ring-arc{fill:none;stroke:rgba(232,64,42,.55);stroke-width:.8;}
|
|
.ghost-toggle{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
border-top:1px solid var(--line-soft);
|
|
margin-top:auto;padding-top:10px;
|
|
}
|
|
.toggle{
|
|
font-size:8px;letter-spacing:.12em;color:var(--bone);
|
|
border-bottom:1px solid rgba(232,64,42,.45);padding-bottom:1px;
|
|
}
|
|
.toggle[aria-pressed="false"]{color:rgba(109,91,82,.9);border-color:transparent;}
|
|
|
|
/* ledger */
|
|
.ledger{
|
|
grid-column:1 / -1;
|
|
display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;
|
|
padding:0 20px;
|
|
border-top:1px solid var(--line);
|
|
background:linear-gradient(to top,rgba(5,3,3,.9),rgba(5,3,3,.25));
|
|
min-width:0;
|
|
}
|
|
.ledger-head{display:flex;flex-direction:column;gap:1px;font-size:8px;letter-spacing:.2em;color:rgba(239,228,212,.72);}
|
|
.ledger-sub{font-size:6.5px;letter-spacing:.06em;color:rgba(109,91,82,.95);white-space:nowrap;}
|
|
.ledger-list{display:flex;gap:20px;min-width:0;overflow:hidden;height:100%;align-items:center;}
|
|
.ledger-item{
|
|
flex:1;min-width:0;
|
|
border-left:1px solid rgba(232,64,42,.22);
|
|
padding-left:10px;
|
|
display:flex;flex-direction:column;gap:2px;
|
|
animation:rise .45s cubic-bezier(.2,.7,.2,1) both;
|
|
}
|
|
.ledger-top{display:flex;align-items:baseline;gap:7px;font-size:7.5px;min-width:0;}
|
|
.ledger-t{color:rgba(109,91,82,.95);font-variant-numeric:tabular-nums;}
|
|
.ledger-tool{color:rgba(239,228,212,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.ledger-by{margin-left:auto;font-size:6.5px;letter-spacing:.1em;color:rgba(155,133,121,.6);flex:0 0 auto;}
|
|
.ledger-by.is-mcp{color:rgba(232,64,42,.85);}
|
|
.ledger-detail{font-size:7px;color:rgba(155,133,121,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.ledger-detail .seal{font-size:6.5px;gap:4px;}
|
|
.ledger-detail .seal i{width:6px;height:6px;}
|
|
|
|
/* ————— quarry responsive ————— */
|
|
|
|
@media (max-width:1340px){
|
|
.tray-meta{gap:9px;}
|
|
.ledger{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:0 16px;}
|
|
}
|
|
|
|
@media (max-width:1160px){
|
|
.views{padding-right:12px;gap:7px;}
|
|
.mode{padding-left:12px;}
|
|
.tray-meta .sub-rule:nth-of-type(3){display:none;}
|
|
}
|
|
|
|
@media (max-width:860px){
|
|
.quarry-tray{grid-template-rows:auto minmax(0,1fr);min-height:320px;}
|
|
.tray-stage{min-height:210px;}
|
|
.quarry-deck{
|
|
grid-template-columns:minmax(0,1fr);
|
|
grid-template-rows:auto auto auto auto;
|
|
}
|
|
.store{min-height:300px;}
|
|
.store::after,.weather::before{display:none;}
|
|
.store-list{max-height:220px;}
|
|
.faces{min-height:400px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
|
|
.weather{min-height:320px;}
|
|
.ledger{grid-column:auto;grid-row:auto;grid-template-columns:1fr;gap:4px;padding:8px 14px;min-height:64px;}
|
|
.ledger-list{gap:12px;}
|
|
.ledger-item:nth-child(3){display:none;}
|
|
.tray-head{padding:12px 14px 8px;flex-wrap:wrap;gap:4px 12px;}
|
|
.tray-meta{flex-wrap:wrap;gap:8px;}
|
|
.faces-head,.face-foot{padding-left:14px;padding-right:14px;}
|
|
.face-wall{padding:10px 14px 0;}
|
|
}
|
|
|
|
@media (max-width:600px){
|
|
.views{padding-right:8px;}
|
|
.view-btn{font-size:8.5px;}
|
|
.tray-meta{font-size:7px;gap:7px;}
|
|
.tray-meta .sub-rule{display:none;}
|
|
.quarry-tray{min-height:290px;}
|
|
.tray-stage{min-height:190px;}
|
|
.store{min-height:280px;}
|
|
.faces{min-height:340px;}
|
|
.weather{min-height:300px;}
|
|
.ledger-head{display:none;}
|
|
.ledger{grid-template-columns:1fr;min-height:56px;}
|
|
.ledger-item:nth-child(2){display:none;}
|
|
.ring-visual{height:48px;}
|
|
}
|