@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-desktop:#e6ebf0;--bg-desktop-gradient:radial-gradient(circle at 10% 15%, #f8fafc 0%, #e2e8f0 100%);--device-bezel:#111317;--device-rim:#2e333b;--device-bg:#f1f4f8;--card-white:#fff;--card-white-border:#e2e8f0cc;--card-cyan:#edf9fa;--card-cyan-border:#06b6d438;--card-lime:#f0fdf4;--card-lime-border:#22c55e38;--card-blue-light:#eff6ff;--card-peach:#fff5f0;--card-peach-border:#f9731638;--accent-purple:#9d7bff;--accent-purple-bright:#a855f7;--accent-purple-light:#ebe5ff;--accent-purple-gradient:linear-gradient(135deg, #b794f6 0%, #9d7bff 50%, #805ad5 100%);--accent-rainbow-stripe:linear-gradient(90deg, #fde047 0%, #f472b6 35%, #38bdf8 70%, #a855f7 100%);--card-purple:#f7f3ff;--card-purple-border:#9d7bff40;--accent-green:#16a34a;--accent-green-bright:#22c55e;--accent-green-dark:#15803d;--accent-orange:#ea580c;--accent-orange-bright:#f97316;--accent-orange-light:#fb923c;--accent-cyan:#0891b2;--accent-cyan-bright:#06b6d4;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#8896a6;--text-light:#cbd5e1;--radius-ios-screen:50px;--radius-card:26px;--radius-pill:9999px;--shadow-subtle:0 4px 16px -2px #0f172a0d, 0 1px 3px #0f172a08;--shadow-card:0 12px 28px -6px #0f172a0f, 0 2px 6px -1px #0f172a05;--shadow-floating:0 24px 48px -12px #0f172a26;--shadow-dock:0 16px 36px -4px #0f172a2e, 0 0 0 1px #fffc inset}[data-theme=dark],.dark{--bg-desktop:#06090e;--bg-desktop-gradient:radial-gradient(circle at 10% 15%, #0f141c 0%, #05070b 100%);--device-bezel:#000;--device-rim:#1e232b;--device-bg:#090c10;--card-white:#121720;--card-white-border:#ffffff14;--card-cyan:#091c22;--card-cyan-border:#06b6d44d;--card-lime:#0b1d0e;--card-lime-border:#22c55e47;--card-blue-light:#0c1726;--card-peach:#24130f;--card-peach-border:#f973164d;--accent-purple:#c084fc;--accent-purple-bright:#d8b4fe;--accent-purple-light:#2e1a47;--accent-purple-gradient:linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #6d28d9 100%);--accent-rainbow-stripe:linear-gradient(90deg, #fde047 0%, #f472b6 35%, #38bdf8 70%, #a855f7 100%);--card-purple:#1b132b;--card-purple-border:#c084fc4d;--accent-green:#22c55e;--accent-green-bright:#4ade80;--accent-green-dark:#16a34a;--accent-orange:#f97316;--accent-orange-bright:#fb923c;--accent-orange-light:#fdba74;--accent-cyan:#06b6d4;--accent-cyan-bright:#22d3ee;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-light:#334155;--shadow-subtle:0 4px 20px -2px #00000080, inset 0 1px 0 #ffffff0f;--shadow-card:0 12px 30px -4px #000000a6, inset 0 1px 0 #ffffff12;--shadow-floating:0 24px 48px -10px #000c;--shadow-dock:0 16px 40px -4px #000000bf, inset 0 1px 0 #ffffff1f}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-sans);background:var(--bg-desktop);background-image:var(--bg-desktop-gradient);color:var(--text-primary);-webkit-user-select:none;user-select:none;overflow:hidden}button{font-family:inherit;transition:transform .15s cubic-bezier(.2,.8,.2,1),opacity .15s,background-color .2s,box-shadow .2s}button:active{transform:scale(.965)}input[type=range]{appearance:none;background:#94a3b840;border-radius:4px;outline:none;height:8px}input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent-cyan);cursor:pointer;background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .12s;box-shadow:0 2px 8px #00000040}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#94a3b873}.glass-panel{-webkit-backdrop-filter:blur(24px);background:#ffffffd9;border:1px solid #ffffffb3}.glass-dock{-webkit-backdrop-filter:blur(32px);background:#ffffffe0;border:1px solid #ffffffe6}[data-theme=dark] .glass-panel{-webkit-backdrop-filter:blur(24px);background:#121720d9;border:1px solid #ffffff14}[data-theme=dark] .glass-dock{-webkit-backdrop-filter:blur(32px);background:#121720d9;border:1px solid #ffffff1a}:root{--iphone-h:min(874px, 90vh, calc((100vw - 32px) / .474828))}.iphone-frame{height:var(--iphone-h);width:calc(var(--iphone-h) * .474828);aspect-ratio:415/874;box-sizing:border-box;border-radius:calc(var(--iphone-h) * .061785);padding:calc(var(--iphone-h) * .012586);background:#000;flex-direction:column;flex-shrink:0;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;display:flex;position:relative;box-shadow:0 0 0 2px #4b4e54,0 0 0 6px #1d1f23,0 25px 65px -10px #00000073,0 45px 100px -20px #16222e59}.iphone-screen{aspect-ratio:393/852;background:var(--device-bg);border-radius:calc(var(--iphone-h) * .050343);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}@media (max-width:480px){.iphone-frame{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;box-shadow:none!important;background:0 0!important;border-radius:0!important;padding:0!important}.iphone-screen{border-radius:0!important;width:100%!important;height:100%!important}.hardware-side-button{display:none!important}}.dynamic-island{z-index:100;cursor:pointer;background:#000;border-radius:20px;justify-content:space-between;align-items:center;width:120px;height:34px;padding:0 11px;transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1),border-radius .3s;display:flex;position:absolute;top:11px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #0003}.dynamic-island.expanded{border-radius:38px;width:310px;height:74px;padding:12px 18px}.ios-home-indicator{z-index:90;pointer-events:none;background:#18191b;border-radius:100px;width:136px;height:4.5px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}
