:root{color-scheme:dark;--mx:#00ff66;--bg:#030805;--panel:#07120b;--line:rgba(0,255,102,.28);--muted:#9ab9a5}*{scrollbar-color:#176b38 #030805}html{background:var(--bg)}body{background:radial-gradient(ellipse at 50% -20%,#0b2614,#030805 58%)!important;color:#d9ffe5!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;accent-color:var(--mx)}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(rgba(0,255,102,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,102,.018) 1px,transparent 1px);background-size:32px 32px}h1,h2,h3,h4{color:#e4ffec!important;text-shadow:0 0 14px #00ff6633}p,label,small{color:#a6c5b1}a{color:#8cffb2}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{background:#06100a!important;color:#dcffe6!important;border:1px solid var(--line)!important;border-radius:5px;padding:8px}button,.btn{background:linear-gradient(#0b2a16,#07170c)!important;color:#baffce!important;border:1px solid #00ff6680!important;border-radius:5px!important;box-shadow:0 0 18px #00ff661f;font-family:inherit!important}button:hover,.btn:hover{border-color:var(--mx)!important;box-shadow:0 0 18px #00ff6640}canvas{image-rendering:pixelated;max-width:100%;border-color:var(--line)!important}.matrix-home-link{position:fixed;z-index:10000;top:12px;right:14px;padding:7px 11px;background:#030c06ed;border:1px solid var(--line);border-radius:4px;color:#8cffb2;text-decoration:none;font:12px ui-monospace,monospace}.matrix-status{position:fixed;z-index:9998;left:12px;bottom:9px;color:#62b87e;background:#030a05d9;border:1px solid #00ff6630;padding:4px 7px;font:10px ui-monospace,monospace;pointer-events:none}@media(max-width:700px){.matrix-home-link{top:8px;right:8px;font-size:10px}.app{grid-template-columns:minmax(0,1fr)!important}#preview-container{flex-wrap:wrap;max-width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Shared dark panels for legacy tools */
.controls{background:linear-gradient(145deg,rgba(8,26,14,.97),rgba(4,12,7,.97))!important;color:#d9ffe5!important;border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:0 10px 32px #0006!important}
.info,.small{color:#9bb8a5!important}
#dropZone{background:linear-gradient(135deg,#071b0e,#0b2815)!important;color:#baffce!important;border:2px dashed #00ff6680!important;border-radius:8px;font:600 14px ui-monospace,monospace;letter-spacing:.04em;box-shadow:inset 0 0 24px #00ff660d,0 0 18px #00ff6614}
#dropZone:hover{border-color:#00ff66!important;background:#0b2413!important;color:#eaffef!important}
/* Pixel editor: a unified dark workstation */
body:has(#canvas){height:100vh;min-height:0;overflow:hidden;background:#030805!important;color:#d9ffe5!important;display:flex;flex-direction:column}
body:has(#canvas):before{z-index:0}
body:has(#canvas) .menu-bar,body:has(#canvas) .toolbar,body:has(#canvas) .status-bar{position:relative;z-index:2;background:linear-gradient(180deg,#0b1c11,#061009)!important;border-color:#00ff6638!important;color:#baffce!important}
body:has(#canvas) .menu-bar{min-height:42px;border-bottom:1px solid #00ff6650!important}
body:has(#canvas) .menu-item{color:#baffce!important;font:12px ui-monospace,monospace;letter-spacing:.04em;padding:13px 16px}
body:has(#canvas) .menu-item:hover,body:has(#canvas) .menu-item.active{background:#10351d!important;color:#fff!important}
body:has(#canvas) .dropdown{background:#07120b!important;border:1px solid #00ff6650!important;box-shadow:0 12px 30px #000b}
body:has(#canvas) .dropdown-item{color:#c8f6d4!important;border-color:#00ff6620!important}
body:has(#canvas) .dropdown-item:hover{background:#10351d!important}
body:has(#canvas) .dropdown-item.disabled{background:#09110b!important;color:#63856e!important}
body:has(#canvas) .toolbar{display:flex;gap:12px;flex-wrap:wrap;padding:10px 14px!important;border-bottom:1px solid #00ff6638!important}
body:has(#canvas) .tool-group{gap:5px;flex-wrap:wrap}
body:has(#canvas) .tool-btn{min-width:38px;min-height:36px;background:#0a1a10!important;border:1px solid #245b36!important;color:#baffce!important;border-radius:5px!important;box-shadow:none!important}
body:has(#canvas) .tool-btn:hover{background:#10351d!important;border-color:#00ff6680!important}
body:has(#canvas) .tool-btn.active{background:#0c4a25!important;border-color:#00ff66!important;color:#fff!important;box-shadow:0 0 14px #00ff6633!important}
body:has(#canvas) .slider-group,body:has(#canvas) .color-picker-wrapper{padding:5px 9px;border:1px solid #1b482a;border-radius:5px;background:#061009}
body:has(#canvas) .label{color:#a8c5b2!important;font:11px ui-monospace,monospace}
body:has(#canvas) #colorPicker{width:36px;height:30px;background:#061009;border:1px solid #00ff6680;border-radius:4px;padding:2px}
body:has(#canvas) .canvas-container{z-index:1;background-color:#08110b!important;background-image:linear-gradient(45deg,#101e14 25%,transparent 25%),linear-gradient(-45deg,#101e14 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#101e14 75%),linear-gradient(-45deg,transparent 75%,#101e14 75%)!important;background-size:24px 24px!important;background-position:0 0,0 12px,12px -12px,-12px 0!important;padding:24px!important}
body:has(#canvas) #canvas{border:1px solid #00ff6670!important;box-shadow:0 10px 36px #0009;image-rendering:pixelated}
body:has(#canvas) .status-bar{min-height:28px;color:#8dbb9a!important;font:10px ui-monospace,monospace!important;letter-spacing:.05em}
body:has(#canvas) .modal{background:#020804d9!important;backdrop-filter:blur(5px)}
body:has(#canvas) .modal-content{background:#07140b!important;border:1px solid #00ff6660!important;border-radius:8px!important;color:#d9ffe5!important;box-shadow:0 20px 70px #000c!important}
body:has(#canvas) .modal-header{color:#baffce!important}
body:has(#canvas) .form-group label{color:#a8c5b2!important}
body:has(#canvas) .form-group input{background:#030a05!important;color:#e5ffeb!important;border:1px solid #285d39!important}
body:has(#canvas) .form-group input:focus{border-color:#00ff66!important;box-shadow:0 0 0 2px #00ff6622}
body:has(#canvas) .modal-btn-secondary{background:#102318!important;color:#baffce!important;border:1px solid #285d39!important}
body:has(#canvas) .modal-btn-primary{background:#0b4a24!important;color:#eaffef!important;border:1px solid #00ff66!important}
body:has(#canvas) .palette{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px 8px;background:#061009;border:1px solid #1b482a;border-radius:5px}
body:has(#canvas) .palette button{width:18px;height:18px;min-width:18px;min-height:18px;padding:0!important;margin:0!important;background:var(--swatch)!important;border:1px solid #ffffff80!important;border-radius:3px!important;box-shadow:none!important}
body:has(#canvas) .palette button:hover{outline:2px solid #baffce;outline-offset:1px}
@media(max-width:760px){body:has(#canvas){overflow:auto;height:auto;min-height:100vh}body:has(#canvas) .canvas-container{min-height:55vh;padding:12px!important}body:has(#canvas) .toolbar{gap:7px}body:has(#canvas) .menu-item{padding:11px 9px}}

/* Main dashboard: visible Matrix digital rain layer */
body:has(.site){background:#020604!important;isolation:isolate}
body:has(.site) .matrix-rain{z-index:0!important;opacity:.78!important;mix-blend-mode:screen;filter:drop-shadow(0 0 2px #00ff6655)}
body:has(.site) .site{position:relative;z-index:1}
body:has(.site) .site .card{background:rgba(3,12,6,.86)!important;backdrop-filter:blur(2px)}
body:has(.site) .topline,body:has(.site) footer{background:rgba(2,8,4,.5)}
@media(prefers-reduced-motion:reduce){body:has(.site) .matrix-rain{opacity:.35!important}}