*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050608;color:#eee;font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}.app{height:100vh;width:100vw;display:grid;grid-template-columns:clamp(230px,14vw,360px) minmax(0,1fr) clamp(280px,17vw,430px);grid-template-rows:64px minmax(0,1fr) 58px;background:#000}header{grid-column:1/4;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #000;background:#000}header b{font-size:23px;letter-spacing:4px}header b span{color:#d7d9dd}header small,.muted{color:#747982}.tag{font-size:11px;letter-spacing:2px;color:#777}.left,.right{min-height:0;overflow:auto;background:#000cc;padding:20px;border-color:#000}.left{border-right:1px solid #000}.right{border-left:1px solid #000}h2{font-size:11px;letter-spacing:2.5px;color:#858a93;margin:0 0 15px}.fxbtn{width:100%;padding:12px 13px;margin:0 0 7px;text-align:left;border:1px solid #000;background:#111318;color:#d9dce1;border-radius:8px;cursor:pointer}.fxbtn:hover{border-color:#000;background:#15171c}.fxbtn.active{border-color:#000;background:#181b20}.fxbtn small{float:right;color:#656a73}#surprise{width:100%;margin-top:15px;padding:12px;border:1px solid #000;background:#14171c;color:#d8dbe0;border-radius:8px;cursor:pointer}#surprise:hover{border-color:#000;background:#1a1d23}main{min-width:0;min-height:0;padding:18px}.stage{height:100%;position:relative;overflow:hidden;border:1px solid #000;border-radius:12px;background:#000;box-shadow:none}canvas{position:absolute;inset:0;width:100%;height:100%}.demo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3}.demo h1{font-size:clamp(42px,6vw,130px);letter-spacing:-.05em;margin:4px 0;text-shadow:0 8px 32px #000b;outline:0}.demo p{color:#969ba4;font-size:clamp(12px,1vw,17px)}.demo button{margin-top:12px;padding:12px 22px;background:#11151a;color:#eee;border:1px solid #000;border-radius:7px}.eyebrow{letter-spacing:5px;font-size:10px;color:#a7abb3}.badge{position:absolute;left:15px;bottom:14px;z-index:4;padding:7px 10px;background:#050608aa;border:1px solid #000;border-radius:6px;font-size:10px;letter-spacing:2px}.scan{display:none;pointer-events:none;position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px);opacity:.025}.control{margin-bottom:20px}.control label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.2px;color:#a9adb5;margin-bottom:9px}.control output{color:#d9dce1}.control input{width:100%;accent-color:#8d939d}.perf{margin-top:30px;border-top:1px solid #000;padding-top:18px}.perf h3{font-size:10px;letter-spacing:2px;color:#737984}.perf>div:not(.quality){display:flex;justify-content:space-between;padding:5px 0;color:#8f949d}.perf strong{color:#dfe2e7}.quality{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}.quality button,footer button{background:#101217;border:1px solid #000;color:#aeb3bb;border-radius:6px;padding:8px;cursor:pointer}.quality button.active{border-color:#000;background:#191c21;color:#fff}footer{grid-column:1/4;border-top:1px solid #000;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:12px}footer>div{display:flex;align-items:center;gap:8px;min-width:0}#stack{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip{display:inline-block;margin-left:6px;padding:5px 8px;border:1px solid #000;border-radius:5px;color:#ccc;font-size:10px}body.glitch .demo{animation:glitch .16s steps(2) infinite}body.crt .scan{display:block}body.mind .stage{animation:none}body.haunted .stage{filter:saturate(.65) contrast(1.12)}@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(2px,-1px);filter:hue-rotate(20deg)}50%{transform:translate(-2px,1px)}100%{transform:translate(0)}}@keyframes breath{50%{box-shadow:inset 0 0 90px #b0002033,0 20px 70px #000}}@media(max-width:900px){.app{grid-template-columns:180px minmax(0,1fr);grid-template-rows:58px minmax(0,1fr) 230px 54px}.right{grid-column:1/3;grid-row:3;border-left:0;border-top:1px solid #000;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.right h2,.perf{grid-column:1/-1}.control{margin:0}footer{grid-row:4}.tag{display:none}}@media(max-width:600px){.app{display:block;height:auto;min-height:100vh;overflow:auto}html,body{overflow:auto}header{height:56px}.left{border:0}.left #effects{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.fxbtn{margin:0}main{height:62vh}.right{display:block;border:0}.control{margin-bottom:16px}footer{position:sticky;bottom:0;min-height:58px}.muted,#stack{display:none}}

.smack{width:100%;margin-top:8px;padding:14px 12px;border:1px solid #000;border-radius:8px;background:#17191e;color:#fff;font-weight:800;letter-spacing:1.2px;cursor:pointer}.smack:hover{background:#22252b}.stage.tv-whack{animation:tvwhack .7s steps(2,end)!important}.stage.crt-smacked .demo{filter:brightness(1.18) contrast(1.08)}@keyframes tvwhack{0%{transform:translate(0) rotate(0)}8%{transform:translate(-10px,5px) rotate(-.35deg)}16%{transform:translate(9px,-4px) rotate(.3deg)}25%{transform:translate(-5px,2px)}36%{transform:translate(3px,-1px)}48%{transform:translate(0);filter:brightness(2.2)}58%{filter:brightness(.15)}68%{filter:brightness(1.6)}100%{transform:translate(0);filter:none}}

/* =========================================================
   DIRECTION CONTROL
   ========================================================= */

.direction-select {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #000;
    border-radius: 7px;
    background: #101217;
    color: #dfe2e7;
    font: inherit;
    cursor: pointer;
    outline: none;
}

.direction-select:focus {
    background: #171a20;
}

/* EFFECTLAB COLOR CONTROLS */
.color-row{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center}.color-picker{width:48px!important;height:38px;padding:2px;border:1px solid #252932;border-radius:7px;background:#101217;cursor:pointer}.hex-input{width:100%!important;height:38px;padding:0 10px;border:1px solid #252932;border-radius:7px;background:#101217;color:#e7e9ed;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;outline:none}.hex-input:focus{border-color:#555d69;background:#15181e}.color-control output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}