:root{--void: #0a0a0b;--panel: #131315;--panel-2: #1a1a1d;--line: rgba(244, 242, 237, .09);--fg: #f4f2ed;--mute: #93918b;--accent: #9acc65;--accent-2: #b6d668;--accent-dim: rgba(154, 204, 101, .14)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--void);color:var(--fg);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--void)}input[type=range],input[type=checkbox]{accent-color:var(--accent)}select,button{font-family:inherit}select option{background:var(--panel-2);color:var(--fg)}.btn-accent{transition:background .3s ease,color .3s ease}.btn-accent:hover{background:var(--accent-2)}.opt-scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.opt-scroll::-webkit-scrollbar{width:8px}.opt-scroll::-webkit-scrollbar-thumb{background:#f4f2ed24;border-radius:4px}.opt-scroll::-webkit-scrollbar-thumb:hover{background:#f4f2ed3d}.mnav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .5s ease,border-color .5s ease}.mnav-scrolled{border-bottom-color:var(--line);background:#0a0a0bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mnav-inner{max-width:80rem;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}@media (min-width: 1024px){.mnav-inner{padding:0 40px}}.mnav-logo{display:block;transition:opacity .3s ease}.mnav-logo:hover{opacity:.8}.mnav-links{display:none;align-items:center;gap:40px}@media (min-width: 1280px){.mnav-links{display:flex}.mnav-burger{display:none!important}}.mnav-link{font-family:IBM Plex Mono,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--mute);text-decoration:none;transition:color .3s ease}.mnav-link:hover{color:var(--fg)}.mnav-dd-wrap{position:relative}.mnav-dd-trigger{display:flex;align-items:center;gap:6px;padding:8px 0}.mnav-caret{font-size:8px;transition:transform .3s ease,color .3s ease}.mnav-caret.open{transform:rotate(180deg);color:var(--accent)}.mnav-dd{position:absolute;left:50%;top:100%;transform:translate(-50%);padding-top:12px}.mnav-dd-panel{width:256px;border:1px solid var(--line);background:#131315f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px}.mnav-dd-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#f4f2edd9;text-decoration:none;transition:background-color .3s ease,color .3s ease}.mnav-dd-item:hover{background:var(--panel-2);color:var(--accent)}.mnav-dd-item.current{color:var(--accent)}.mnav-dd-tag{font-size:9px;letter-spacing:.2em;color:var(--mute)}.mnav-dd-all{display:block;margin-top:4px;border-top:1px solid var(--line);padding:12px 12px 6px;font-family:IBM Plex Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--accent);text-decoration:none;transition:color .3s ease}.mnav-dd-all:hover{color:var(--fg)}.mnav-cta{position:relative;overflow:hidden;border:1px solid var(--line);padding:10px 20px;font-family:IBM Plex Mono,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--fg);text-decoration:none;transition:border-color .3s ease}.mnav-cta:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);transform:translateY(-100%);transition:transform .4s ease-out}.mnav-cta span{position:relative;z-index:1;transition:color .3s ease}.mnav-cta:hover{border-color:var(--accent)}.mnav-cta:hover:before{transform:translateY(0)}.mnav-cta:hover span{color:var(--void)}.mnav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0}.mnav-burger span{display:block;width:24px;height:1px;background:var(--fg);transition:transform .3s ease}.mnav-burger.open span:first-child{transform:translateY(3.5px) rotate(45deg)}.mnav-burger.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mnav-mobile{border-top:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:4px}@media (min-width: 1280px){.mnav-mobile{display:none}}.mnav-mobile-link{display:block;padding:12px 0;font-family:Archivo,sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;color:var(--fg);text-decoration:none}.mnav-mobile-tools{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);padding-left:16px;margin-bottom:8px}.mnav-mobile-tool{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 0;font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--mute);text-decoration:none}.mnav-mobile-tool.current,.mnav-mobile-tool:hover{color:var(--accent)}.mnav-mobile-tool span{font-size:9px}.grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}.tool-layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}.tool-layout>*{min-width:0}.mnav-actions{display:flex;align-items:center;gap:18px}@media (max-width: 700px){.mnav-actions{gap:10px}.mnav-actions .mnav-cta{padding:10px 14px;font-size:10px;letter-spacing:.12em;white-space:nowrap}}@keyframes mnav-menu-down{0%{clip-path:inset(0 0 100% 0);opacity:.5}to{clip-path:inset(0 0 0 0);opacity:1}}@keyframes mnav-menu-up{0%{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 0 100% 0);opacity:.5}}.mnav-mobile[data-state=open]{animation:mnav-menu-down .24s cubic-bezier(.22,.61,.36,1) both}.mnav-mobile[data-state=closing]{animation:mnav-menu-up .2s ease-in both}@media (prefers-reduced-motion: reduce){.mnav-mobile[data-state]{animation:none!important}}.tool-stage{background:#0c0c0d;border:1px solid var(--line);overflow:hidden;position:relative;height:min(58vh,420px)}@media (min-width: 1280px){.tool-stage{height:460px}}@media (max-width: 1279px){.tool-options{position:fixed!important;top:0!important;right:0;bottom:0;z-index:40;width:min(390px,92vw);max-height:100vh!important;padding:88px 14px 40px!important;background:#0a0a0bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid var(--line);box-shadow:-18px 0 44px #0009;display:none!important}.tool-options[data-open=true]{display:flex!important}.tool-options[data-state=open]{animation:tool-drawer-in .24s cubic-bezier(.22,.61,.36,1) both}.tool-options[data-state=closing]{animation:tool-drawer-out .2s ease-in both}.tool-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:35;background:#0a0a0b99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0}.tool-scrim[data-state=open]{animation:tool-fade-in .24s ease both}.tool-scrim[data-state=closing]{animation:tool-fade-out .2s ease both}}@media (min-width: 1280px){.tool-drawer-toggle,.tool-drawer-close,.tool-scrim{display:none!important}}.tool-drawer-toggle{position:absolute;top:10px;right:10px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;background:#0c0c0ddb;border:1px solid var(--line);color:var(--fg);font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;cursor:pointer}.tool-drawer-toggle:hover{border-color:var(--accent);color:var(--accent)}.tool-drawer-close{position:sticky;top:0;z-index:2;align-self:flex-end;padding:8px 12px;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;cursor:pointer}@keyframes tool-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes tool-drawer-out{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes tool-fade-in{0%{opacity:0}to{opacity:1}}@keyframes tool-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tool-options[data-state],.tool-scrim[data-state]{animation:none!important}}@media (min-width: 1280px){.tool-layout{grid-template-columns:320px 1fr}}
