:root[data-theme=light]{--bg:#ffffff;--bar:#fbf9f4;--line:#ece7db;--text:#16160f;--sub:#605b52;--micro:#a59c8a;--chip:#fbf9f4;--active:rgba(0,0,0,.045);--stage:#f0ece3;--input:#ffffff;--track:#ddd6c8;--fill:#16160f}:root[data-theme=dark]{--bg:#0e0e0d;--bar:#141413;--line:#272723;--text:#f3f1ea;--sub:#b4afa4;--micro:#6f6a60;--chip:#1a1a18;--active:rgba(255,255,255,.07);--stage:#0a0a09;--input:#1a1a18;--track:#34342f;--fill:#f3f1ea}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font-family:Archivo,-apple-system,sans-serif;overflow:hidden}.mono{font-family:JetBrains Mono,monospace}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#80808059;border-radius:9px}::-webkit-scrollbar-track{background:transparent}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.app{display:flex;height:100vh;width:100vw;overflow:hidden}aside{width:304px;flex:none;height:100%;background:var(--bar);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{padding:19px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.brand .mark{width:14px;height:14px;background:var(--text);border-radius:3px;flex:none}.brand .name{font-weight:600;font-size:16px;letter-spacing:-.02em}.scroll{flex:1;min-height:0;overflow-y:auto;padding:21px 20px;display:flex;flex-direction:column;gap:23px}.eyebrow{font-family:JetBrains Mono,monospace;font-weight:500;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--micro);margin-bottom:11px}.hr{height:1px;background:var(--line)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.col{display:flex;flex-direction:column;gap:6px}.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px;border-radius:6px;cursor:pointer;font-weight:500;font-size:11px;line-height:1.15;border:1px solid var(--line);background:var(--chip);color:var(--sub);transition:all .12s}.opt.active{border-color:var(--text);background:var(--active);color:var(--text)}.size-btn{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:6px;cursor:pointer;font-weight:500;font-size:12px;white-space:nowrap;border:1px solid var(--line);background:var(--chip);color:var(--sub);transition:all .12s}.size-btn.active{border-color:var(--text);background:var(--active);color:var(--text)}.size-btn .d{font-family:JetBrains Mono,monospace;font-weight:400;font-size:10px;opacity:.7;flex:none}.custom-row{display:flex;gap:8px;margin-top:8px;align-items:center}.custom-row input{width:100%;padding:8px 9px;background:var(--input);border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:JetBrains Mono,monospace;font-weight:500;font-size:11px;outline:none}.custom-row span{color:var(--micro);font-family:JetBrains Mono,monospace;font-size:11px}.pal-btn{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;cursor:pointer;border:1px solid var(--line);background:var(--chip);color:var(--sub);transition:all .12s}.pal-btn.active{border-color:var(--text);background:var(--active);color:var(--text)}.pal-btn .pname{font-weight:500;font-size:12px}.pal-btn .sw{display:flex;height:15px;width:96px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px #80808040}.pal-btn .sw i{flex:1;height:100%}.slider .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}.slider .lab{font-weight:500;font-size:12px;color:var(--sub)}.slider .val{font-family:JetBrains Mono,monospace;font-weight:500;font-size:10px;color:var(--micro)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;border-radius:99px;background:var(--track);outline:none;cursor:pointer;accent-color:var(--fill);margin:6px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--fill);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--fill);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}.topbar{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line)}.topbar .meta{display:flex;align-items:baseline;gap:11px}.topbar .meta .l{font-weight:500;font-size:13px}.topbar .meta .d{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--micro)}.actions{display:flex;align-items:center;gap:14px}.ghost{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--sub);font-family:Archivo,sans-serif;font-weight:500;font-size:12.5px;padding:6px 4px}.theme-toggle{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}.theme-toggle button{border:none;cursor:pointer;padding:7px 13px;font-family:Archivo,sans-serif;font-weight:600;font-size:11px;background:transparent;color:var(--sub)}.theme-toggle button.active{background:var(--text);color:var(--bg)}.primary{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--text);font-family:Archivo,sans-serif;font-weight:600;font-size:13px;padding-bottom:3px;border-bottom:1.5px solid var(--text)}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:44px;background:var(--stage)}.frame{position:relative;display:flex;max-width:100%;max-height:100%}.frame canvas{display:block;max-width:100%;max-height:calc(100vh - 180px)}.frame.plain canvas{border-radius:7px;box-shadow:0 26px 64px #0006}.frame.iphone{padding:11px;background:linear-gradient(150deg,#46464d,#1b1b1e);border-radius:48px;box-shadow:0 34px 80px #00000080,inset 0 0 0 1px #ffffff17}.frame.iphone canvas{border-radius:38px;max-height:calc(100vh - 200px)}.frame.ipad{padding:14px;background:#17171a;border-radius:26px;box-shadow:0 34px 80px #00000073,inset 0 0 0 1px #ffffff0f}.frame.ipad canvas{border-radius:11px;max-height:calc(100vh - 200px)}.notch{position:absolute;top:3.2%;left:50%;transform:translate(-50%);width:33%;height:3.1%;min-height:18px;background:#000;border-radius:99px;z-index:3;display:none}.cam{position:absolute;top:6px;left:50%;transform:translate(-50%);width:7px;height:7px;border-radius:50%;background:#2a2a2e;box-shadow:inset 0 0 0 1px #ffffff1f;z-index:3;display:none}.frame.iphone .notch,.frame.ipad .cam{display:block}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);font-weight:600;font-size:12.5px;padding:10px 18px;border-radius:99px;transition:all .25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}