:root{--background: oklch(1 0 0);--foreground: oklch(.239 0 0);--card: oklch(.949 0 0);--card-foreground: oklch(.239 0 0);--popover: oklch(.985 0 0);--popover-foreground: oklch(.239 0 0);--primary: oklch(.523 .1198 139.74);--primary-foreground: oklch(1 0 0);--secondary: oklch(.629 .1543 144.2);--secondary-foreground: oklch(.239 0 0);--muted: oklch(.99 0 0);--muted-foreground: oklch(.55 0 0);--accent: oklch(.471 .1121 50.85);--accent-foreground: oklch(1 0 0);--destructive: oklch(.585 .2236 27.94);--destructive-foreground: oklch(1 0 0);--border: oklch(.949 0 0);--input: oklch(.949 0 0);--ring: oklch(.523 .1198 139.74);--radius: 0rem;--sidebar: oklch(.979 0 0);--sidebar-foreground: oklch(.239 0 0);--sidebar-primary: oklch(.523 .1198 139.74);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.949 0 0);--sidebar-accent-foreground: oklch(.239 0 0);--sidebar-border: oklch(.949 0 0);--sidebar-ring: oklch(.523 .1198 139.74);--font-display: "Bebas Neue", system-ui, sans-serif;--font-body: "Aktiv Grotesk", system-ui, sans-serif;--font-mono: ui-monospace, monospace;--shadow-color: transparent;--shadow-opacity: 0;--shadow-blur: 0px;--shadow-spread: 0px;--shadow-offset-x: 0px;--shadow-offset-y: 0px;--letter-spacing: -.01em;--spacing: .25rem;--shadow-2xs: 0px 0px 0px 0px transparent;--shadow-xs: 0px 0px 0px 0px transparent;--shadow-sm: 0px 0px 0px 0px transparent;--shadow: 0px 0px 0px 0px transparent;--shadow-md: 0px 0px 0px 0px transparent;--shadow-lg: 0px 0px 0px 0px transparent;--shadow-xl: 0px 0px 0px 0px transparent;--shadow-2xl: 0px 0px 0px 0px transparent;--tracking-normal: -.01em;--stroke: color-mix(in oklch, var(--foreground) 12%, transparent);--stroke-strong: color-mix(in oklch, var(--foreground) 22%, transparent)}*{box-sizing:border-box;margin:0;padding:0}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}html,body{height:100%;max-width:100%;overflow-x:hidden}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}body{font-family:var(--font-body);background:var(--background);color:var(--foreground);min-height:100dvh;display:flex;flex-direction:column;letter-spacing:var(--letter-spacing);-webkit-font-smoothing:antialiased}.site-header{background:var(--primary);color:var(--primary-foreground);padding:1.15rem 2rem;display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid color-mix(in oklch,black 18%,transparent)}.site-header__title{font-family:var(--font-display);font-size:1.25rem;font-weight:400;letter-spacing:.1em;line-height:1}.site-header__tagline{font-size:.62rem;font-weight:600;line-height:1;letter-spacing:.22em;text-transform:uppercase;opacity:.65;padding-left:1rem;border-left:1px solid color-mix(in oklch,white 28%,transparent);align-self:center}.layout{width:100%;max-width:1100px;margin:0 auto;padding:3rem 2rem 4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start;flex:1}.stack{display:flex;flex-direction:column;gap:2.5rem}.panel{background:var(--card);border:1px solid var(--stroke);color:var(--card-foreground);min-width:0;max-width:100%}.panel__header{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-foreground);padding:.85rem 1.5rem;border-bottom:1px solid var(--stroke);background:var(--background)}.panel__body{padding:1.5rem}.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem}.form__field{margin-bottom:.85rem}.form__field:last-child{margin-bottom:0}.form__row .form__field{margin-bottom:0}.form__label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--foreground);margin-bottom:6px}.form__input{width:100%;min-width:0;padding:.6rem .75rem;border:1px solid var(--stroke);font-family:inherit;font-size:.9rem;line-height:1.4;color:var(--foreground);background:var(--background);outline:none;transition:border-color .15s,box-shadow .15s}.form__input::placeholder{color:var(--muted-foreground);opacity:.55}.form__input:hover{border-color:var(--stroke-strong)}.form__input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--primary) 18%,transparent)}.form__subhead{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground);margin:1.5rem 0 .85rem;padding-top:1.25rem;border-top:1px solid var(--stroke)}.preview__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.preview__label{font-size:.72rem;color:var(--muted-foreground)}.preview__modes{display:inline-flex;gap:.75rem}.preview__mode{padding:0;font-size:.78rem;font-family:inherit;font-weight:500;background:none;border:none;color:var(--muted-foreground);cursor:pointer;transition:color .15s}.preview__mode:hover{color:var(--foreground)}.preview__mode--active{color:var(--foreground);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}iframe.preview__display{display:block;width:100%;max-width:100%;padding:0;margin:0;border:1px solid var(--stroke);background:var(--background);color-scheme:normal;overflow:hidden;transition:background .2s,border-color .2s}iframe.preview__display--dark{background:#1c1c1e;border-color:#3a3a3c}.copy-button{display:block;width:100%;margin-top:1.25rem;padding:.95rem 1rem;background:var(--primary);color:var(--primary-foreground);border:none;font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .05s}.copy-button:hover{background:color-mix(in oklch,var(--primary) 85%,black)}.copy-button:active{transform:translateY(1px)}.copy-button--ok{background:color-mix(in oklch,var(--primary) 75%,black)}.manual{display:none;margin-top:1rem}.manual--visible{display:block}.manual__label{display:block;font-size:.72rem;color:var(--muted-foreground);margin-bottom:6px}.manual__textarea{width:100%;height:60px;font-size:.7rem;font-family:var(--font-mono);border:1px solid var(--stroke);padding:.6rem;color:var(--muted-foreground);background:var(--background);resize:none;outline:none}.guide__title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-foreground);padding-bottom:1rem;border-bottom:1px solid var(--stroke);margin-bottom:1.25rem}.guide__steps{font-size:.88rem;color:var(--foreground);padding-left:1.5rem;line-height:1.85}.guide__step{padding-left:.25rem}.guide__step::marker{color:var(--muted-foreground);font-variant-numeric:tabular-nums}.guide__step strong{font-weight:600}.guide__key{font-family:var(--font-mono);font-size:.78em;padding:1px 6px;border:1px solid var(--stroke-strong);background:var(--background);color:var(--foreground);letter-spacing:0}.site-footer{text-align:center;padding:.75rem 1rem;font-size:.7rem;color:var(--muted-foreground);background:var(--muted);border-top:1px solid var(--stroke)}.site-footer__link{color:var(--foreground);text-decoration:none}.site-footer__link:hover{text-decoration:underline}@media (max-width: 900px){.layout{grid-template-columns:minmax(0,1fr);padding:1rem .75rem 1.5rem;gap:1rem;max-width:100%}.panel,.preview__display,.manual__textarea{max-width:100%}.stack{gap:1rem}.site-header{padding:.9rem 1rem;flex-direction:column;align-items:flex-start;gap:.4rem}.site-header__tagline{padding-left:0;border-left:none;align-self:auto}.site-header__title{font-size:1.15rem}.panel__header{padding:.7rem .9rem}.panel__body{padding:.9rem}.form__row{grid-template-columns:1fr;gap:0}.form__row .form__field{margin-bottom:.7rem}.form__row .form__field:last-child{margin-bottom:0}.form__field{margin-bottom:.7rem}.form__input{padding:.65rem .7rem;font-size:16px}.form__subhead{margin:1rem 0 .7rem;padding-top:.85rem}.preview__meta{margin-bottom:.85rem}.preview__modes{gap:1.25rem}.preview__mode{padding:.4rem 0;min-height:40px;display:inline-flex;align-items:center}.preview__display{padding:1rem}.copy-button{padding:.95rem 1rem;font-size:.8rem;margin-top:.85rem}.guide__steps{font-size:.9rem;line-height:1.75;padding-left:1.25rem}.guide__title{padding-bottom:.75rem;margin-bottom:.85rem}}@media (max-width: 380px){.preview__meta{flex-direction:column;align-items:flex-start;gap:.5rem}}