:root{--bg:#0B0F0C;--card:#121813;--line:#1E2A21;--txt:#D8E6DA;--dim:#6F8A75;--acc:#3DFF8A;--loss:#FF4D5E;--blue:#4DA3FF;--warn:#E8C547}
*{box-sizing:border-box}html{background:var(--bg)}
body{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:400;max-width:900px;margin:auto;padding:28px 18px;background:transparent;color:var(--txt);line-height:1.65;font-size:16px}
.small,small,th,td,input,select,button,code,.tag,.badge,.stamp,#mk,.num,.g,.r,table{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
#matrix{position:fixed;inset:0;z-index:-1;opacity:.12;pointer-events:none}
body.inapp::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px)}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--txt);letter-spacing:.2px}
.logo{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:30px;margin:20px 0 6px;color:var(--txt)}.logo small{font-size:13px;color:var(--dim);font-weight:400}
.cur{color:var(--acc);animation:blink 2s steps(1) infinite}@keyframes blink{50%{opacity:0}}
h2{font-size:19px;margin:0 0 14px}h3{font-size:15px;margin:20px 0 8px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:"JetBrains Mono",monospace}
p{margin:10px 0}
.d{border:1px solid var(--warn);color:var(--warn);background:var(--bg);padding:9px;font-weight:600;text-align:center;border-radius:4px;font-family:"JetBrains Mono",monospace;font-size:14px}
.mock{border:1px solid var(--line);color:var(--dim);background:var(--bg);padding:6px;border-radius:4px;text-align:center;margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:13px}
.c{background:var(--card);padding:22px;border:1px solid var(--line);border-radius:6px;margin:24px 0}.inner{border:1px dashed var(--line);padding:16px;border-radius:4px;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--dim);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:1px}
#lbd tr:hover td{background:#0f1410}
.c>table,.c>div>table{display:block;overflow-x:auto}
input,select,button{font-size:14px;padding:9px 12px;margin:4px 6px 4px 0;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--txt)}input:focus,select:focus,button:focus-visible{outline:1px solid var(--acc)}
button{background:transparent;color:var(--txt);cursor:pointer}button:hover{border-color:var(--acc);color:var(--acc)}
button.big,#enterb,#xsave,#acreate,#loginb,#lb{border-color:var(--acc);color:var(--acc)}button.big{font-size:15px;padding:12px 18px}button.soft{color:var(--dim)}
#filters button.on{border-color:var(--acc);color:var(--acc)}
.e{color:var(--loss)}.g{color:var(--acc)}.r{color:var(--loss)}.small{font-size:13px;color:var(--dim)}a{color:var(--acc)}code{color:var(--acc)}.num{color:var(--acc)}
.badge{display:inline-block;border:1px solid var(--line);color:var(--txt);padding:0 6px;margin:2px;font-size:11px;border-radius:3px}
.tag{font-size:11px;color:var(--dim);white-space:nowrap}.t-collab{color:var(--txt)}
.stamp{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1px;padding:1px 6px;border:1px solid;border-radius:2px;transform:rotate(-2deg)}.stamp.smart{color:var(--acc)}.stamp.korkat{color:var(--loss)}
summary{cursor:pointer;color:var(--dim)}
.pills{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.pill{width:220px;height:88px;border-radius:44px;font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:600;background:var(--bg);transition:transform .15s,box-shadow .15s}
.pill.blue{border:1px solid var(--blue);color:var(--blue);box-shadow:0 0 18px rgba(77,163,255,.18)}.pill.red{border:1px solid var(--loss);color:var(--loss);box-shadow:0 0 18px rgba(255,77,94,.18)}
.pill:hover{transform:translateY(-2px)}.pill.blue:hover{color:var(--blue);border-color:var(--blue)}.pill.red:hover{color:var(--loss);border-color:var(--loss)}
.pillsub{color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:13px;margin-top:12px}
.glitch{animation:glitch .26s steps(2) 1}
@keyframes glitch{0%{text-shadow:2px 0 #ff004c,-2px 0 #00e5ff;transform:translate(1px,-1px)}50%{text-shadow:-3px 0 #ff004c,3px 0 #00e5ff;transform:translate(-2px,1px)}100%{text-shadow:none;transform:none}}
@media (prefers-reduced-motion: reduce){.cur{animation:none}.pill{transition:none}.glitch{animation:none}}
@media (max-width:600px){body{padding:14px 10px;font-size:15px}.c{padding:16px}td,th{padding:5px 3px;font-size:12px}input,select{max-width:100%}button.big{width:100%}.pill{width:100%}}
.intro{color:var(--dim);border-left:2px solid var(--line);padding-left:12px}
/* Intro + pills from Digital Designer sketch 3 */
#intro{position:fixed;inset:0;z-index:40;background:#0B0F0C;display:flex;align-items:center;justify-content:center}
#irain{position:absolute;inset:0;filter:blur(3px);opacity:0;transition:opacity .4s}#irain.on{opacity:1}
.ibox{position:relative;text-align:center;max-width:720px;padding:20px}
#itype{font-family:"JetBrains Mono",monospace;color:#D8E6DA;text-align:left;display:inline-block;min-height:5.4em;white-space:pre-wrap;font-size:15px;margin:18px 0}
#intro .logo{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-1px;font-size:40px}#intro .cur{text-shadow:0 0 18px #3DFF8A}
#ipills{justify-content:center;gap:40px;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}#ipills.show{opacity:1;transform:none}
#isub{opacity:0;transition:opacity .6s .2s;letter-spacing:4px}#isub.show{opacity:1}
.pill{border:0!important;color:#0B0F0C!important;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:20px;border-radius:999px}
.pill.blue{background:linear-gradient(170deg,#9fd0ff,#4DA3FF 35%,#16467a);box-shadow:0 0 30px #4DA3FF99,0 0 80px #4DA3FFAA,inset 0 -20px 40px #0006}
.pill.red{background:linear-gradient(170deg,#ffb0b8,#FF4D5E 35%,#7a1622);box-shadow:0 0 30px #FF4D5E99,0 0 80px #FF4D5EAA,inset 0 -20px 40px #0006}
.pill.blue:hover,.pill.red:hover{color:#0B0F0C!important}
.glitch3{animation:g3 .3s steps(3) 1}@keyframes g3{0%{filter:drop-shadow(3px 0 #ff004c) drop-shadow(-3px 0 #00e5ff);transform:translate(2px,-1px)}50%{filter:drop-shadow(-4px 0 #ff004c) drop-shadow(4px 0 #00e5ff);transform:translate(-3px,1px)}100%{filter:none;transform:none}}
#matrix{filter:blur(3px)}

#irain.dim{opacity:.25!important}
#iclip{position:relative;z-index:2;width:min(880px,92vw);margin:8vh auto 0;text-align:center}
.iframe16{aspect-ratio:16/9;background:#050805;border:1px solid #1f3a28;border-radius:12px;padding:8px;box-shadow:0 0 40px #000c}
.iframe16 iframe{width:100%;height:100%;border:0;border-radius:6px}
#iskip{margin-top:16px;font-size:1.05rem}

#iq{opacity:0;transition:opacity .9s ease;margin-top:18px}#iq.show{opacity:1}
#iq h2{color:#E8F5EC;margin:0 0 12px}
#iq .qp{display:block;width:100%;max-width:720px;margin:10px auto;height:auto;padding:14px 22px;border-radius:999px;font-size:1rem;line-height:1.35;white-space:normal}

.bonly{display:none}body.blue .bonly{display:block}body.blue .nb,body.blue #kb,body.blue tr.botrow{display:none!important}

#egg{float:right;position:relative;cursor:pointer;opacity:.35;font-size:14px;transition:opacity .3s}#egg:hover{opacity:.9}
#eggbox{display:none;position:absolute;right:0;top:22px;z-index:20;width:min(320px,80vw);padding:12px 14px;background:#060a07;border:1px solid #1f3a28;border-radius:8px;box-shadow:0 0 24px #3DFF8A22;color:#9fd9b0;font:12px/1.5 "JetBrains Mono",monospace;font-style:italic}
#egg:hover #eggbox,#eggbox.open{display:block}

#horizon{overflow:hidden}.hz{position:relative;height:130px;background:linear-gradient(#000 0%,#030604 62%,#07120a 63%,#020302 100%);border-radius:8px;overflow:hidden}
.hzline{position:absolute;left:0;right:0;top:62%;height:1px;background:linear-gradient(90deg,transparent,#3DFF8A33,transparent)}
.hzshadow{position:absolute;top:calc(62% - 34px);left:60%;width:46px;height:38px;border-radius:45% 45% 10% 10%;background:radial-gradient(ellipse at 50% 60%,#000 30%,#0a1a10cc 60%,transparent 75%);filter:blur(7px);opacity:.85;animation:lurk 14s ease-in-out infinite}
.hzshadow::after{content:"";position:absolute;left:30%;top:35%;width:3px;height:2px;border-radius:2px;background:#ff2a3a;box-shadow:12px 0 #ff2a3a;opacity:0;filter:blur(1px);animation:eye 14s infinite}
@keyframes lurk{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-140px) scale(1.08)}}
@keyframes eye{0%,46%,54%,100%{opacity:0}50%{opacity:.7}}
.hzt{font-style:italic;color:#7fa98a;text-align:center;margin:12px 0 4px}
#horizon.seen .hzshadow{opacity:1;filter:blur(4px)}

.tapewrap{position:relative;height:clamp(64px,14vw,96px);overflow:hidden;margin:0 -16px 4px;pointer-events:none}
.tape{position:absolute;left:-6%;right:-6%;top:50%;transform:translateY(-50%) rotate(-3deg);padding:7px 7%;text-align:center;
 background:repeating-linear-gradient(-45deg,#f5d000 0 26px,#111 26px 52px);
 clip-path:polygon(0 8%,3% 0,9% 10%,16% 2%,24% 9%,33% 0,41% 7%,52% 1%,60% 10%,71% 2%,80% 8%,90% 0,100% 7%,100% 93%,94% 100%,86% 91%,77% 99%,66% 92%,55% 100%,46% 90%,35% 98%,25% 91%,14% 100%,6% 92%,0 99%);
 animation:flutter 5s ease-in-out infinite;transform-origin:50% 50%}
.tape span{display:inline-block;background:#f5d000;color:#0b0b0b;font:800 clamp(10px,2.7vw,15px)/1.25 "JetBrains Mono",monospace;letter-spacing:.06em;padding:3px 10px;animation:glitchtxt 7s steps(1) infinite}
@keyframes flutter{0%,100%{transform:translateY(-50%) rotate(-3deg) skewX(0)}50%{transform:translateY(-50%) rotate(-2.4deg) skewX(-1.5deg)}}
@keyframes glitchtxt{0%,93%,100%{text-shadow:none;transform:none}94%{text-shadow:2px 0 #3DFF8A,-2px 0 #ff2a3a;transform:translateX(2px)}96%{text-shadow:-1px 0 #3DFF8A;transform:translateX(-1px)}}
.tapesub{text-align:center;color:#9fb8a6;font-size:.9rem;max-width:640px;margin:2px auto 14px;font-style:italic}
.foot{text-align:center;color:#5d7464;font-size:11px;margin:28px 0 10px;opacity:.8}
@media (prefers-reduced-motion: reduce){.tape,.tape span{animation:none!important}}

#yfb{margin:14px 0 4px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}#yfb a.big{display:inline-block;padding:10px 18px;border-radius:8px;background:#ff2a3a;color:#fff;font-weight:700;text-decoration:none}

body.pre .tapewrap,body.pre .tapesub,body.pre h1.logo,body.pre #mk,body.pre #welcome,body.pre #entry,body.pre .foot,body.pre #app,body.pre #viewer{visibility:hidden}
#iclip{width:min(1180px,100vw);margin:0 auto;text-align:center;transition:opacity .9s ease;background:none}#iclip.out{opacity:0}
/* soft edges top + left only; bottom-right (YouTube logo) and bottom edge stay crisp */
.vwrap{aspect-ratio:16/9;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}
.vwrap iframe{width:100%;height:100%;border:0;display:block}
#iq{position:relative;z-index:2;width:min(1100px,96vw);margin:0 auto;text-align:center;opacity:0;transition:opacity 1.2s ease}#iq.show{opacity:1}
#hero{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%)}
#iq h2{margin:-30px 0 10px;color:#E8F5EC}.qrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.qrow .qp{flex:1 1 300px;max-width:480px;margin:0}
#intro{overflow-y:auto}

#ineo{position:relative;z-index:2;width:min(1100px,100vw);text-align:center;transition:opacity .6s}#ineo.out{opacity:0}
#neob{background:none;border:0;padding:0;cursor:pointer;display:block;width:100%}#neob:focus-visible{outline:2px solid #3DFF8A}
#neo{width:100%;height:auto;display:block;-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);transition:filter .3s}
#neob:hover #neo{filter:brightness(1.15) drop-shadow(0 0 18px #3DFF8A55)}
#neohint{color:#5d8a6a;font:12px "JetBrains Mono",monospace;letter-spacing:.2em;margin:-20px 0 0;animation:hint 2.4s ease-in-out infinite}@keyframes hint{50%{opacity:.35}}
#ishort{color:#cfe8d6;font:15px/1.6 "JetBrains Mono",monospace;white-space:pre-wrap;min-height:3.2em;margin:10px auto 0;text-align:left;display:inline-block}
@media (prefers-reduced-motion: reduce){#neohint{animation:none}}

#hero{object-fit:cover;object-position:center top}@media (max-width:600px){#hero{aspect-ratio:4/3}}#iq h2{margin-top:-18%}

#neoline{color:#3DFF8A;font:600 clamp(15px,2.4vw,22px) "JetBrains Mono",monospace;min-height:1.4em;margin:-10px 0 4px;text-shadow:0 0 12px #3DFF8A88}#neohint{animation:none}#neohint .cur{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
#iq h2,.qrow{position:relative;z-index:3}#neohint{margin:6px 0 0}

/* v2 stages */
.stage{position:relative;z-index:2;width:min(1100px,94vw);text-align:center;margin:auto}
.stimg{display:block;margin:0 auto;max-height:58vh;max-width:min(520px,80vw);-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%)}
.stimg.wide{max-width:100%;width:min(1000px,94vw);max-height:62vh;object-fit:cover}
.stline{color:#3DFF8A;font:600 clamp(14px,2vw,21px)/1.5 "JetBrains Mono",monospace;text-shadow:0 0 12px #3DFF8A77;min-height:3em;max-width:820px;margin:10px auto 14px}
.stbtn{font:700 clamp(15px,1.8vw,19px) "JetBrains Mono",monospace;padding:12px 26px;border-radius:999px;background:#0b1a10;color:#3DFF8A;border:1px solid #3DFF8A;box-shadow:0 0 22px #3DFF8A44;cursor:pointer}
.stbtn:hover{background:#3DFF8A;color:#04100a}
#iclip{width:auto}
.tv{position:relative;width:min(1000px,92vw,calc((100vh - 110px)*1.45));margin:0 auto;padding:4.2% 13% 5.5% 4.2%;border-radius:28px;background:linear-gradient(145deg,#4a3a2a,#2a2017 60%,#1a130d);box-shadow:inset 0 0 0 3px #5c4a36,inset 0 -8px 20px #0008,0 30px 70px #000c;transition:transform 1.1s cubic-bezier(.6,0,.4,1),opacity 1.1s}
.tv .screen{position:relative;aspect-ratio:4/3.05;overflow:hidden;border-radius:18% / 14%;background:#000;box-shadow:0 0 0 8px #111,0 0 0 12px #3a2e22,inset 0 0 40px #000}
/* iframe scaled up; top black bar pushed out, bottom bar with MOVIECLIPS stamp kept inside */
.tv .screen iframe{position:absolute;width:136%;height:auto;aspect-ratio:16/9;left:-18%;top:-2%;border:0}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,#000a 100%);mix-blend-mode:normal}
.screen iframe{filter:sepia(.25) contrast(1.05)}
#snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9;transition:opacity 1.2s}#snow.clear{opacity:0}
.knobs{position:absolute;right:3.5%;top:22%;display:flex;flex-direction:column;gap:18px}.knobs i{display:block;width:clamp(18px,4vw,46px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a7a66,#2a2017);box-shadow:0 2px 6px #000}
.tvimg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#iclip.out .tv{transform:translateX(-120vw) rotate(-8deg);opacity:.2}#iclip.out{opacity:1}
.qp small{display:block;margin-top:6px;font-size:.78em;opacity:.9;font-weight:400;background:#000b;color:#fff;border-radius:8px;padding:3px 8px}
.qp{text-shadow:0 1px 2px #000}
#iskip{display:block;margin:12px auto 0}
@media (orientation:landscape) and (max-height:500px){.stimg{max-height:48vh}.stimg.wide{max-height:52vh}.stline{min-height:2em;margin:6px auto 8px;font-size:13px}.stbtn{padding:8px 20px}.tv{width:calc((100vh - 70px)*1.45);padding:3% 12% 3.5% 3%}#iskip{margin-top:4px}#hero{max-height:60vh}#iq h2{margin-top:-10%}}
/* fix: keep MOVIECLIPS stamp (bottom-left) visible */
.tv .screen{aspect-ratio:16/9.4;border-radius:5% / 7%}
.tv .screen iframe{width:106%;left:-2%;top:-1.5%}
.tv{padding:3.5% 11% 4.5% 3.5%}

/* tv.png mode: transparent screen at x367 y127 w850 h590 of 1672x941 */
.tv:not(.noimg){width:min(1300px,98vw,calc((100vh - 90px)*1.777));aspect-ratio:1672/941;padding:0;background:none;box-shadow:none;border-radius:0}
.tv:not(.noimg) .knobs{display:none}
.tv:not(.noimg) .screen{position:absolute;left:21.95%;top:13.5%;width:50.84%;height:62.7%;aspect-ratio:auto;border-radius:3%;box-shadow:none;background:#050505;z-index:1}
.tv:not(.noimg) .screen iframe{width:104%;left:-2%;top:50%;transform:translateY(-50%)}
.tvimg{z-index:3;pointer-events:none}
#iclip.out .tv{transform:translateX(-120vw);opacity:0}

#rguide{position:fixed;left:12px;bottom:12px;z-index:30}
#ricon{width:52px;height:52px;border-radius:50%;padding:6px;background:#0b1a10;border:1px solid #3DFF8A88;box-shadow:0 0 16px #3DFF8A44;cursor:pointer;font-size:26px}#ricon img{width:100%;height:100%;object-fit:contain}
#rbub{position:absolute;left:0;bottom:62px;width:min(320px,calc(100vw - 24px));max-height:min(55vh,420px);overflow:auto;background:#060a07f2;border:1px solid #3DFF8A66;border-radius:14px 14px 14px 4px;padding:14px 16px 10px;color:#cfe8d6;font-size:13.5px;line-height:1.45;box-shadow:0 10px 40px #000c}
#rbub p{margin:0 0 8px}#rtip{color:#3DFF8A;font-family:"JetBrains Mono",monospace}#rclose{position:absolute;right:6px;top:4px;background:none;border:0;color:#9fb8a6;font-size:20px;cursor:pointer}
body.pre #rguide,body.inapp-intro #rguide{display:none}
.tv:not(.noimg) .tvimg{-webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 60%,transparent 80%)}
@media (max-width:700px){#rbub{position:fixed;left:12px;right:12px;top:10px;bottom:auto;width:auto;max-height:45vh;border-radius:14px}body:not(.pre){padding-bottom:76px}}
@media (orientation:portrait) and (max-width:700px){#iclip{overflow:hidden;width:100vw}.tv:not(.noimg){width:189vw;max-width:none;margin-left:-39.5vw}}
.tv:not(.noimg) .screen iframe{transform:translateY(-50%) scale(1.12);transform-origin:40% 72%}
/* widescreen panels hide the clip's top letterbox; bottom strip with MOVIECLIPS stamp stays open */
.tv:not(.noimg) .screen iframe{transform:translateY(-50%)}
.pan{position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:linear-gradient(#16261a,#0c160f);box-shadow:inset 0 0 0 1px #2c4a33,0 0 12px #000a;transition:transform .45s cubic-bezier(.5,1.8,.5,1) .8s}
.pan::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 6px,#ffffff08 6px 7px)}
.pt{top:0;height:18.5%;transform:translateY(-101%)}.pb{bottom:0;height:7.5%;transform:translateY(101%)}
#iclip.playing .pan{transform:none}
.tv .screen{transition:transform .5s ease-in,filter .5s}
#iclip.off .screen{animation:crtoff 1.3s forwards}
@keyframes crtoff{0%{transform:scale(1,1);filter:brightness(1)}40%{transform:scale(1,.012);filter:brightness(3)}75%{transform:scale(.02,.012);filter:brightness(5)}100%{transform:scale(0,0);filter:brightness(0)}}
#rpeek{position:fixed;left:-160px;bottom:18vh;width:130px;height:130px;border-radius:50%;z-index:40;pointer-events:none;box-shadow:0 0 30px #3DFF8A66;transition:left .7s cubic-bezier(.4,1.6,.5,1),transform .4s}
#rpeek.in{left:4vw;transform:rotate(-8deg)}#rpeek.press{transform:rotate(10deg) translateX(30px) scale(1.08)}#rpeek.push{left:110vw;transition:left 1.2s cubic-bezier(.6,0,.4,1);transform:rotate(15deg)}
/* zoom: film fills screen top, MOVIECLIPS stamp band anchored bottom-left */
.tv:not(.noimg) .screen iframe{transform:translateY(-50%) scale(1.37);transform-origin:1% 100%}
.pt{display:none}