@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--ink:#050817;--panel:#09162b;--cyan:#3ef5ff;--violet:#9d5cff;--pink:#ff4fd8;--gold:#ffd95a;--green:#8dff55;--text:#f6fbff;--muted:#87a3b6;--line:#23577c}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--text);font-family:'Barlow Condensed',Impact,sans-serif}
body{min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 120%,#113f38 0,transparent 42%),radial-gradient(circle at 20% -20%,#22134e 0,transparent 38%),#050817}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(#64ecff 1px,transparent 1.5px),radial-gradient(#cc70ff 1px,transparent 1.5px);background-position:0 0,25px 27px;background-size:54px 54px,70px 70px;animation:stars 12s linear infinite}
button,input{font:inherit}.app{position:relative;z-index:1;height:100dvh;padding:16px;display:grid;grid-template-rows:auto 1fr;gap:14px}
.topbar{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px;border:1px solid #245679;background:linear-gradient(110deg,#08162cec,#101039e8);box-shadow:0 16px 45px #0009,inset 0 1px #5fe9ff38;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.brand{display:flex;align-items:center;min-width:0}.brand img{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 0 14px currentColor)}.brand-o{color:var(--pink)}.brand-x{color:var(--cyan)}
.brand small{font:700 10px 'Space Mono',monospace;letter-spacing:.23em;color:#86bad3}.brand h1{margin:1px 0 0;font:900 clamp(30px,4vw,54px)/.85 'Barlow Condensed';letter-spacing:.025em}.brand h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 18px #3ef5ffb8}
.top-actions{display:flex;gap:8px}.top-actions button{min-height:48px;padding:0 15px;border:1px solid #41759b;background:#09172c;color:#d8eeff;cursor:pointer;font-weight:900;letter-spacing:.08em;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.top-actions button:hover,.top-actions button:focus-visible{outline:2px solid #fff;background:#142a49}.top-actions .save{background:linear-gradient(135deg,#ffe36c,#ff9e30);color:#211400;border-color:#fff0a0}
.studio{min-height:0;display:grid;grid-template-columns:minmax(205px,260px) minmax(360px,1fr) minmax(210px,275px);gap:14px}.panel{min-height:0;border:1px solid var(--line);background:linear-gradient(160deg,#0c1e36ee,#070e21f5);box-shadow:0 22px 45px #0009,inset 0 1px #55deff28;padding:16px;overflow:auto;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.panel-title{display:flex;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #204766}.panel-title>span{display:grid;place-items:center;width:38px;height:38px;background:#142c4c;color:var(--cyan);border:1px solid #2e8ab0;font:700 12px 'Space Mono'}.panel-title b{display:block;font-size:19px;letter-spacing:.08em}.panel-title small{display:block;color:var(--muted);font:700 8px 'Space Mono';letter-spacing:.14em}
.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px 8px}.color-gem{position:relative;aspect-ratio:1;border:0;border-radius:50%;padding:0;cursor:pointer;background:transparent;transition:.16s}.color-gem img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gem),transparent 22%))}.color-gem:hover,.color-gem:focus-visible,.color-gem.active{transform:scale(1.12);outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 24px var(--gem),0 8px 16px #000b}.color-gem.active img{animation:electricPulse .72s steps(2,end) infinite}.color-gem.active:before{content:"✦";position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;text-shadow:0 0 8px #fff}
.selected-color{margin-top:17px;display:flex;align-items:center;gap:11px;padding:8px 11px;background:#050b18;border:1px solid #1f4868}.selected-color>img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 10px var(--active,#3ef5ff));animation:electricPulse 1.05s steps(2,end) infinite}.selected-color small{display:block;color:#7190a8;font:700 8px 'Space Mono';letter-spacing:.15em}.selected-color b{font-size:18px;letter-spacing:.06em}
.canvas-column{min-width:0;min-height:0;display:grid;grid-template-rows:1fr auto}.canvas-frame{position:relative;min-height:0;padding:13px;background:linear-gradient(135deg,#21658a,#a14fff 27%,#ffca45 50%,#19dfe8 73%,#265b87);box-shadow:0 24px 70px #000c,0 0 28px #7d52ff4d;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}.canvas-frame:before{content:"";position:absolute;inset:6px;border:2px solid #fff9;pointer-events:none;clip-path:inherit}.canvas-frame canvas{display:block;width:100%;height:100%;background:#fff;cursor:none;touch-action:none;box-shadow:inset 0 0 30px #b2c9da}
.frame-corner{position:absolute;z-index:2;width:24px;height:24px;background:linear-gradient(135deg,#fff,#55e8ff 35%,#884dff 70%,#ffc633);transform:rotate(45deg);box-shadow:0 0 14px #62eaff}.c1{left:4px;top:4px}.c2{right:4px;top:4px}.c3{left:4px;bottom:4px}.c4{right:4px;bottom:4px}.paper-strip{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;background:#07152a;border:1px solid #235477;border-top:0;color:#8fb4ca;font:700 9px 'Space Mono';letter-spacing:.12em}.paper-strip b{color:var(--gold)}#status{color:var(--cyan)}
.prism-cursor{position:fixed;z-index:20;width:26px;height:26px;pointer-events:none;display:none;translate:-50% -50%;filter:drop-shadow(0 0 5px var(--active,#3ef5ff))}.prism-cursor i{position:absolute;left:12px;top:0;width:3px;height:26px;background:#fff;border-radius:4px;rotate:45deg;box-shadow:0 0 6px var(--active)}.prism-cursor i+ i{rotate:-45deg}.touch-hint{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:10px 16px;background:#07152dcc;color:#183b55;border:1px solid #b7cedc;font:900 11px 'Space Mono';letter-spacing:.18em;pointer-events:none;transition:.3s}.touch-hint.gone{opacity:0;scale:.8}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool{min-height:82px;border:1px solid #285276;background:#08162b;color:#91aabd;cursor:pointer;text-align:center}.tool i{display:block;font-style:normal;font-size:25px;color:var(--cyan)}.tool b{display:block;font-size:15px;letter-spacing:.08em}.tool small{font:700 7px 'Space Mono';letter-spacing:.12em}.tool.active,.tool:hover,.tool:focus-visible{outline:2px solid var(--cyan);background:linear-gradient(145deg,#11335a,#181040);color:#fff;box-shadow:0 0 20px #3ef5ff36}
.size-control{display:block;margin-top:17px}.size-control>span{display:flex;justify-content:space-between}.size-control b{letter-spacing:.1em}.size-control output{color:var(--gold);font:700 12px 'Space Mono'}.size-control input{width:100%;accent-color:var(--cyan)}
.switches{display:grid;gap:8px;margin-top:14px}.switches label{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:9px;padding:9px;background:#071426;border:1px solid #234a69;cursor:pointer}.switches input{display:none}.switches label>span{width:34px;height:19px;border-radius:20px;background:#263c50;box-shadow:inset 0 2px 5px #000;position:relative}.switches label>span:after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#8da3b2;transition:.18s}.switches input:checked+span{background:#155c69;box-shadow:0 0 12px var(--cyan)}.switches input:checked+span:after{left:18px;background:#fff}.switches b{display:block;font-size:14px;letter-spacing:.07em}.switches small{display:block;font:700 7px 'Space Mono';color:#718ca1;letter-spacing:.08em}
.new-canvas{width:100%;margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #853a75;background:#2b0b31;color:#ffc7f2;cursor:pointer}.new-canvas>span{font-size:34px}.new-canvas b{display:block;letter-spacing:.1em}.new-canvas small{font:700 7px 'Space Mono';letter-spacing:.1em}.new-canvas:hover{background:#4b104d;outline:2px solid var(--pink)}
#toast{position:fixed;z-index:40;left:50%;bottom:28px;translate:-50% 130px;padding:13px 22px;background:#071528;border:1px solid var(--cyan);color:#fff;box-shadow:0 0 28px #3ef5ff65;font-weight:900;letter-spacing:.08em;transition:.3s}#toast.show{translate:-50% 0}
@keyframes stars{to{background-position:54px 54px,95px 97px}}
@keyframes electricPulse{50%{filter:drop-shadow(0 0 14px var(--gem,var(--active,#3ef5ff))) brightness(1.22)}}
@media(max-width:900px){body{overflow:auto}.app{height:auto;min-height:100dvh;padding:8px}.topbar{min-height:68px}.brand img{width:48px;height:48px}.top-actions button{padding:0 12px}.top-actions span{display:none}.studio{grid-template-columns:1fr 190px;grid-template-rows:auto auto}.palette{grid-column:1/-1;grid-row:2}.canvas-column{grid-column:1;grid-row:1;min-height:62vh}.tools{grid-column:2;grid-row:1}.color-grid{grid-template-columns:repeat(10,1fr)}}
@media(max-width:620px){.brand-x{display:none}.brand h1{font-size:28px}.brand small{font-size:6px}.brand-o{width:42px!important;height:42px!important}.topbar{padding:6px}.top-actions{gap:4px}.top-actions button{min-width:42px;padding:0 9px}.studio{display:flex;flex-direction:column}.canvas-column{height:auto;min-height:0;order:1}.canvas-frame{aspect-ratio:3/2}.palette{order:2;overflow:visible}.tools{order:3;overflow:visible}.color-grid{grid-template-columns:repeat(5,1fr);gap:10px}.panel{padding:12px}.tool-grid{grid-template-columns:repeat(4,1fr)}.tool{min-height:68px}.tool small{display:none}.paper-strip{font-size:7px}.prism-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}