@font-face{font-family:Departure;src:url('/assets/fonts/departure-mono.woff2') format('woff2');font-display:swap}@font-face{font-family:AthensPixel;src:url('/assets/fonts/athens-pixel.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{background:#8cecff}body{--space:clamp(1rem,2vw,2.4rem);margin:0;min-height:100vh;padding:calc(var(--space)*1.4) var(--space) calc(var(--space)*2);background:linear-gradient(135deg,#8cecff 0 48%,#ffc0f0 48% 72%,#c8ff4d 72%);font-family:Departure,monospace;color:#0a1118;accent-color:#ff4fd8}.pixel-studio{width:min(1280px,100%);margin:auto}.studio-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;padding:var(--space);border:5px solid #111;background:#fff1d6;box-shadow:12px 12px 0 #111}.studio-head span{font-size:10px}.studio-head h1{font:400 clamp(2.7rem,7vw,7rem)/.8 AthensPixel,monospace;margin:.3em 0 .18em;text-shadow:5px 5px 0 #ff9f43}.studio-head p{max-width:720px;line-height:1.55;margin:0}.home-link,.toolbar button,.css-panel button{border:3px solid #111;background:#ff4fd8;color:#111;padding:.65rem 1rem;box-shadow:4px 4px 0 #111;text-decoration:none;font:inherit;cursor:pointer}.home-link:hover,.toolbar button:hover,.css-panel button:hover{background:#c8ff4d;transform:translate(-1px,-1px)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:calc(var(--space)*1.6) 0;padding:1rem;border:4px solid #111;background:#fff;box-shadow:9px 9px 0 #111}.toolbar label{display:flex;align-items:center;gap:.55rem}.toolbar input[type=color]{width:54px;height:40px;padding:2px;border:3px solid #111;background:#fff}.toolbar input[type=range]{width:min(220px,38vw)}.toolbar button[aria-pressed=true]{background:#111;color:#c8ff4d}.studio-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:2rem}.canvas-shell,.css-panel{border:5px solid #111;background:#fff;box-shadow:12px 12px 0 #111}.canvas-top{display:flex;justify-content:space-between;padding:.8rem 1rem;border-bottom:4px solid #111;background:#c8ff4d}.canvas-shell canvas{display:block;width:100%;aspect-ratio:4/3;background:#fff;image-rendering:pixelated;touch-action:none;cursor:crosshair}.hint{margin:0;padding:.7rem 1rem;border-top:3px solid #111;font-size:.82rem}.css-panel{padding:1rem;display:flex;flex-direction:column;gap:1rem;background:#f2f5ef}.css-panel label{font-weight:700}.css-panel textarea{width:100%;min-height:390px;resize:vertical;border:3px solid #111;padding:1rem;background:#071018;color:#c8ff4d;font:13px/1.45 Departure,monospace;box-shadow:6px 6px 0 #ff4fd8}.css-panel output{display:block;padding:.6rem;border:2px solid #111;background:#8cecff;font-size:.78rem}@media(max-width:850px){body{padding:.8rem .8rem 5rem}.studio-head{align-items:start;flex-direction:column}.studio-grid{grid-template-columns:1fr}.css-panel textarea{min-height:240px}.toolbar{position:sticky;top:0;z-index:4;max-height:42vh;overflow:auto}.canvas-shell canvas{min-height:300px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* V26 — CSS Export neon vertical scroll system */
.css-output-shell{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:10px;min-height:390px;align-items:stretch}.css-output-shell .css-panel textarea,.css-output-shell textarea{min-height:390px;height:100%;margin:0;resize:vertical;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.css-output-shell textarea::-webkit-scrollbar{width:0;height:0}.css-scroll-rail{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:7px 4px;border:3px solid #111;background:linear-gradient(180deg,#071018 0%,#132638 48%,#071018 100%);box-shadow:4px 4px 0 #ff4fd8;color:#c8ff4d;user-select:none;touch-action:none}.css-scroll-label{font:700 7px/1 Departure,monospace;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.75}.css-scroll-track{position:relative;flex:1;width:12px;min-height:120px;border:2px solid rgba(200,255,77,.75);background:repeating-linear-gradient(180deg,rgba(53,242,255,.12) 0 8px,rgba(255,79,216,.08) 8px 16px);box-shadow:inset 0 0 12px rgba(53,242,255,.22);cursor:pointer}.css-scroll-track::before{content:"";position:absolute;inset:3px 4px;background:linear-gradient(180deg,#35f2ff,#ff4fd8 52%,#c8ff4d);opacity:.35;filter:blur(2px)}.css-scroll-track i{position:absolute;top:0;left:50%;width:18px;min-height:42px;transform:translateX(-50%);border:2px solid #111;border-radius:3px;background:linear-gradient(180deg,#c8ff4d 0%,#35f2ff 48%,#ff4fd8 100%);box-shadow:0 0 0 2px #fff,0 0 14px rgba(53,242,255,.8),3px 3px 0 #111;cursor:grab;transition:box-shadow .2s ease,filter .2s ease}.css-scroll-track i:hover{filter:brightness(1.12);box-shadow:0 0 0 2px #fff,0 0 22px rgba(255,79,216,.95),3px 3px 0 #111}.css-scroll-track i:active{cursor:grabbing}.css-scroll-rail output{font:700 8px/1 Departure,monospace;color:#fff;transform:rotate(-90deg);width:34px;text-align:center}.css-scroll-rail[data-disabled="true"]{opacity:.45}.css-scroll-rail[data-disabled="true"] .css-scroll-track i{height:100%!important;top:0!important;filter:grayscale(.7)}
@media(max-width:850px){.css-output-shell{grid-template-columns:minmax(0,1fr) 30px;min-height:250px}.css-output-shell .css-panel textarea,.css-output-shell textarea{min-height:250px}.css-scroll-rail{padding-inline:2px}.css-scroll-track{width:10px}.css-scroll-track i{width:16px;min-height:36px}.css-scroll-label{font-size:6px}}
@media(max-width:460px){.css-panel{padding:.75rem}.css-output-shell{gap:7px;grid-template-columns:minmax(0,1fr) 28px}.css-scroll-rail{border-width:2px;box-shadow:3px 3px 0 #ff4fd8}.css-scroll-track{border-width:1px}.css-scroll-track i{width:14px;border-width:1px}.css-scroll-rail output{font-size:7px}}
@media(prefers-reduced-motion:reduce){.css-scroll-track i{transition:none}}