/* ailfish · Sketch 01 — layout and palette adapted from Petrovich's "Love" étude (annawelt.com/workshop/love) */
:root{color-scheme:dark;font-family:"IBM Plex Sans","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;color:#e8ece8;background:#161b1b;letter-spacing:0}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #ecb598;outline-offset:4px}button svg{width:19px;height:19px;stroke-width:1.5;pointer-events:none}
a{color:#9fe3cb}
.room-tabs{height:46px;display:flex;align-items:center;gap:28px;background:#121616;border-bottom:1px solid #303735;padding:0 32px;overflow-x:auto;scrollbar-width:none}
.room-tabs a{flex-shrink:0;font-size:12px;color:#9caeaa;text-decoration:none;min-height:46px;display:flex;align-items:center;border-bottom:1px solid transparent}
.room-tabs a[aria-current=page]{color:#f1bd9f;border-color:#e1a687}.room-tabs a:hover{color:#e8ece8}
main{height:calc(100svh - 46px);min-height:560px;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto}
.title{position:absolute;left:40px;top:30px;z-index:2;pointer-events:none;max-width:440px}
.eyebrow{font-size:10px;color:#94a5a2;font-weight:600;letter-spacing:.08em}.title h1{font-size:38px;font-weight:450;line-height:1.15;margin:12px 0 9px}
.signature{font-size:12px;color:#8c9b98}.explain{font-size:13px;line-height:1.55;color:#aebdb8;margin:14px 0 0}
.stage{min-height:0;position:relative;overflow:hidden}.stage canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px}
.overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag3d,.bubble{position:absolute;left:0;top:0;will-change:transform;transition:opacity .4s}
.tag3d{display:flex;flex-direction:column;align-items:center;translate:-50% 0;font-size:11px;color:#9aa9a6;text-align:center}
.tag3d b{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:#f1bd9f}
.bubble{translate:-50% -100%;background:#1b2222d9;border:1px solid #37403d;border-radius:6px;padding:8px 12px;font-size:13px;text-align:center;max-width:260px}
.bubble small{display:block;font-size:9.5px;color:#8c9b98;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.bubble.word span{font-size:17px;color:#f7d2bd}
body.hide-word .bubble.word span{filter:blur(6px)}
body:not([data-phase=hold]):not([data-phase=travel]) .bubble.word{opacity:.35}
.bubble.hash{opacity:0}body[data-phase=feel] .bubble.hash,body[data-phase=score] .bubble.hash{opacity:1}
#hash{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;color:#c9f3e2;font-size:15px}
#hash span{opacity:.08;transition:opacity .35s}#hash span.on{opacity:1}#hash i{color:#56645e;font-style:normal}
.bubble em{display:block;margin-top:4px;font-size:10.5px;color:#788b82;font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace}
.verdict{position:absolute;left:50%;top:18px;translate:-50% 0;display:flex;gap:12px;align-items:flex-start;max-width:min(520px,80vw);background:#1b2222e6;border:1px solid #37403d;border-radius:8px;padding:10px 14px;opacity:0;transition:opacity .5s}
body[data-phase=score] .verdict{opacity:1}
.verdict small{display:block;font-size:9.5px;color:#8c9b98;letter-spacing:.08em;text-transform:uppercase}.verdict strong{font-size:17px;font-weight:500;color:#f7d2bd}
.verdict #verdict-ru{font-size:12px;color:#8c9b98}.verdict p{margin:4px 0 0;font-size:12px;color:#aebdb8;line-height:1.45}
.badge{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.08em;padding:6px 10px;border-radius:4px;background:#2c3a35;color:#b6f0d8}
.badge.miss{background:#3a2f2a;color:#f0b08f}
.view-tools{position:absolute;right:29px;top:30px;display:flex;flex-direction:column;gap:4px;z-index:3}
.view-tools button,.timeline button{width:38px;height:38px;border:none;background:#1b2222b8;display:grid;place-items:center;border-radius:4px}
.view-tools button:hover,.timeline button:hover{background:#34403d}.view-tools button[aria-pressed=true]{color:#f7c1a5;background:#35413d}
.divider{height:1px;background:#3a4542;margin:6px 9px}
[data-tip]{position:relative}[data-tip]::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);white-space:nowrap;top:50%;transform:translateY(-50%);font-size:11px;padding:7px 10px;background:#e5ebe6;color:#233630;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1}.timeline [data-tip]::after{right:auto;top:auto;bottom:calc(100% + 10px);left:0;transform:none}
.scene-note{position:absolute;bottom:150px;left:40px;display:flex;align-items:center;gap:10px;pointer-events:none;color:#c3d0cb;font-size:13px;z-index:2}
.live-dot{width:6px;height:6px;border-radius:50%;background:#dca383;box-shadow:0 0 10px #dca383}
.wire{position:absolute;bottom:126px;left:40px;right:40px;pointer-events:none;color:#7f9890;font:11px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
footer{z-index:2;border-top:1px solid #37403d;background:#171d1c;padding:18px 40px 16px}
.transport{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:42px}
.segments{display:flex;flex-shrink:0;background:#232b29;border-radius:5px;padding:3px}
.segments button{border:0;background:none;color:#9eaba6;font-size:12px;min-height:34px;padding:0 14px;border-radius:3px;white-space:nowrap}
.segments button[aria-pressed=true]{background:#d5e0d3;color:#273b30}
.timeline{display:flex;align-items:center;gap:12px;width:380px;max-width:36%;min-width:0}.timeline button{flex-shrink:0;background:transparent}
input[type=range]{accent-color:#dfb196;width:100%;min-width:40px;cursor:pointer;height:30px}
output{font-size:10px;color:#a5b1aa;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:70px}
.toggles{display:flex;gap:16px;flex-shrink:0}.toggles label{display:flex;align-items:center;gap:7px;font-size:11px;cursor:pointer;min-height:40px}
.toggles input{accent-color:#aec9bd;width:14px;height:14px;margin:0}
.colophon{display:flex;justify-content:space-between;color:#788b82;font-size:10.5px;margin-top:16px;gap:12px}.colophon span:last-child{text-align:right}
.colophon code{font-size:10px;color:#9aa9a6}
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#96aaa0;font-size:13px;pointer-events:none}
[hidden]{display:none!important}
#fallback{position:absolute;inset:150px 80px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:14px;background:#161b1b}
#fallback img{width:min(520px,80%);min-height:0;object-fit:contain}#retry{padding:10px 15px;background:#d5e0d3;color:#25382d;border:0;border-radius:4px;margin:10px}
noscript{position:fixed;bottom:0;background:#eee;color:#111;padding:12px;z-index:10}
@media(max-width:1150px){footer{padding:14px 25px}.transport{flex-wrap:wrap;gap:8px 22px}.timeline{max-width:none;flex:1;width:260px}.toggles{width:100%;justify-content:center;gap:22px}.colophon{margin-top:8px}.scene-note{bottom:196px;left:28px}.wire{bottom:174px;left:28px;right:28px}.title{left:28px}.view-tools{right:20px}}
@media(max-width:700px){.room-tabs{padding:0 17px;gap:20px}.title{left:20px;top:18px;max-width:calc(100% - 80px)}.title h1{font-size:28px;margin:6px 0}.explain{display:none}
.view-tools{right:10px;top:16px;gap:2px}.view-tools button{width:32px;height:33px}.divider{margin:4px 8px}footer{padding:12px 16px 14px}
.transport{display:grid;grid-template-columns:1fr;gap:4px}.segments{justify-self:center;max-width:100%;overflow-x:auto}.segments button{font-size:11px;min-height:31px;padding:0 10px}
.timeline{width:100%;max-width:100%;gap:8px}.toggles{gap:14px;flex-wrap:wrap}.toggles label{min-height:28px;font-size:10px}
.colophon{flex-direction:column;font-size:9.5px}.colophon span:last-child{text-align:left}.scene-note{left:16px;bottom:262px;font-size:11px;right:16px}.wire{left:16px;right:16px;bottom:244px;font-size:9.5px}
.bubble{max-width:160px;font-size:11px;padding:6px 8px}.bubble.word span{font-size:13px}#hash{font-size:12px}.verdict{top:150px;left:12px;right:60px;translate:none;max-width:none;padding:8px 10px;gap:8px}.verdict strong{font-size:14px}.verdict p{font-size:11px}.bubble{max-width:44vw}.bubble.hash.below{translate:-50% 0}.bubble em{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.bubble.word{translate:-50% 0}
.title{max-width:390px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-size:11px;color:#8c9b98}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}.legend .pos{background:#b6f0d8;box-shadow:0 0 6px #b6f0d8}.legend .neg{background:#c9a6ff;box-shadow:0 0 6px #c9a6ff}.legend .path{width:14px;height:0;border-top:1px dashed #b6f0d8;border-radius:0;vertical-align:3px}
@media(max-width:700px){.legend{display:none}}