@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;600;700;800&display=swap');
:root{--heat:0;--bg:#111722;--amber:#ffd27a;--text:#edf1f7}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:20px;background:#090d16;color:var(--text);font-family:Inter,system-ui,sans-serif;display:flex;justify-content:center}
.browser{width:min(920px,100%);background:#101722;border:1px solid #283244;border-radius:17px;overflow:hidden;box-shadow:0 28px 90px #0008}
.browser-top{height:48px;background:#151c28;border-bottom:1px solid #2b3444;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#9ba7ba;font:12px 'DM Mono',monospace}
.traffic,.lights{display:flex;gap:8px}.traffic i,.lights i{width:11px;height:11px;border-radius:50%;background:#ff6258}.traffic i:nth-child(2),.lights i:nth-child(2){background:#ffbd2e}.traffic i:nth-child(3),.lights i:nth-child(3){background:#28c840}
.app{min-height:660px;height:calc(100vh - 420px);max-height:760px;min-height:580px;position:relative;overflow:hidden;text-align:center;background:radial-gradient(ellipse at 50% 48%,#222d3b 0%,#1b2532 42%,#17202d 100%);transition:background .25s}
.app header{position:relative;z-index:4;padding:35px 15px 0}
h1{display:inline-block;margin:0;padding:14px 27px;border:1px solid #455064;border-radius:15px;background:#141d2a;font-size:clamp(23px,4vw,39px);letter-spacing:-.045em;box-shadow:0 6px 20px #0002}
h1 span{background:linear-gradient(90deg,#9db8e9,#e8d79b);background-clip:text;color:transparent}
header p{font-size:14px;font-weight:700;margin:15px 0;color:#e5eaf1;text-shadow:0 2px 5px #0008}
.lamp-stage{height:450px;position:relative;display:flex;justify-content:center;align-items:flex-start}
.aura{position:absolute;top:125px;width:260px;height:280px;border-radius:50%;background:radial-gradient(ellipse,#ffdf9b 0%,#ffc86c55 34%,transparent 70%);opacity:0;filter:blur(18px);transition:opacity .2s}
.bulb{position:absolute;top:73px;width:180px;height:340px;overflow:visible;z-index:2;filter:drop-shadow(0 9px 16px #0004);transition:transform .25s}
.bulb__glass{fill:url(#glass);stroke:#c3cbd3;stroke-width:4}
.bulb__shine{fill:none;stroke:#f4f7fa;stroke-width:9;stroke-linecap:round;opacity:.9}
.bulb__reflection{fill:#fff;opacity:.65;filter:blur(3px)}
.bulb__coil{fill:none;stroke:#7c6a39;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px #ffdf88);transition:opacity .15s}
.bulb__neck{fill:#65717d;fill-opacity:.35;stroke:#aab3bd;stroke-width:3}
.bulb__base{fill:url(#metal);stroke:#d0d4d8;stroke-width:2}
.bulb__thread{fill:none;stroke:#313d49;stroke-width:5}
.bulb__foot{fill:#1a2029;stroke:#89939c;stroke-width:2}
.bulb__soot{fill:#080b10;opacity:0;transform-origin:90px 270px;transition:opacity .2s}
.bulb__aura{fill:#ffdf9b;opacity:0;filter:blur(25px)}
.embers{opacity:0;fill:#ff512c;filter:drop-shadow(0 0 7px #ff4c20)}
.embers circle{animation:ember .7s ease-in-out infinite alternate}.embers circle:nth-child(2n){animation-delay:.3s}
@keyframes ember{to{opacity:.25;transform:translateY(-5px)}}
.arc{opacity:0;fill:none;stroke:#fff8c8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px #ffbf4e)}
.cord-wrap{position:absolute;top:275px;left:calc(50% + 0px);width:60px;height:170px;z-index:5;transform:translateX(-50%)}
.cord{position:absolute;top:0;left:18px;width:24px;height:150px;cursor:grab;touch-action:none;outline:none}
.cord-line{position:absolute;top:0;left:10px;width:4px;height:125px;border-radius:5px;background:linear-gradient(90deg,#77818c,#e1e3e5,#75808b);transform-origin:top}
.cord-tip{position:absolute;left:6px;top:119px;width:12px;height:12px;border-radius:50%;background:#c4cbd0;border:1px solid #fff8;box-shadow:0 0 8px #fff4}
.cord:focus-visible .cord-tip{outline:3px solid #9db8e9;outline-offset:4px}
.cord.dragging{cursor:grabbing}
.status{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:30px;background:#0d141f;border:1px solid #303b4c;color:#aab5c5;font:10px 'DM Mono',monospace;letter-spacing:.1em;white-space:nowrap}
.status-dot{width:7px;height:7px;background:#8b9aab;border-radius:50%}
.message{position:absolute;left:0;right:0;bottom:55px;color:#ffd27a;font-size:12px;font-weight:700;opacity:0;transition:opacity .2s}
.app.lit{background:radial-gradient(ellipse at 50% 45%,#9b8153 0%,#64543d 42%,#302b2a 100%)}
.app.lit .aura,.app.lit .bulb__aura{opacity:.8}
.app.lit .bulb__coil{stroke:#fff0a6;stroke-width:5;filter:drop-shadow(0 0 7px #ffd27a)}
.app.lit .bulb__glass{fill:#fff1c2;fill-opacity:.45;stroke:#fff1ce}
.app.lit .bulb__shine{stroke:#fff}
.app.lit .status{color:#ffe8b3}
.app.blown .bulb__coil{opacity:0}
.app.blown .bulb__soot{opacity:.9}
.app.blown .embers{opacity:1}
.app.blown .arc{opacity:1;animation:flash .38s steps(2,end) 3}
.app.blown .bulb{animation:shake .35s ease-in-out 2}
.app.blown .aura{opacity:.18}
.app.blown .message{opacity:1}
.app.blown .status-dot{background:#ff543c;box-shadow:0 0 9px #ff543c}
@keyframes flash{50%{opacity:0}}
@keyframes shake{25%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(5px) rotate(2deg)}}
footer{padding:0 12px 18px;color:#667487;font:9px 'DM Mono',monospace;letter-spacing:.16em}footer span{color:#ffd27a}
.code-dock{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;background:#0c111a}
.code-card{min-width:0;min-height:290px;background:#0e1420;border:1px solid #283243;border-radius:12px;overflow:hidden}
.code-head{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #222c3c}
.code-head b{font:500 13px 'DM Mono',monospace;color:#ef7da9}.css .code-head b{color:#9fc3ff}.js .code-head b{color:#f6d36e}
.lights{gap:5px}.lights i{width:8px;height:8px}
pre{padding:12px 13px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#c8d0dd;font:10px/1.8 'DM Mono',monospace}
.html code{color:#d7b9d3}.css code{color:#b7c9e9}.js code{color:#e7d4a3}
@media(max-width:650px){body{padding:8px}.browser{border-radius:12px}.app{min-height:590px;height:620px}h1{padding:12px 14px}header p{font-size:11px}.code-dock{grid-template-columns:1fr}.code-card{min-height:220px}.lamp-stage{height:420px}.status{bottom:8px}footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}