:root{--brat:#8ace00;--ink:#101010;--paper:#f2f4ec;--muted:#4a5240;--line:#c8d0b8;--danger:#b42318;--font-display:"arial_narrowregular", "Arial Narrow", Arial, sans-serif;--font-body:"Segoe UI", "Helvetica Neue", sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 600px at 10% -10%,#d7f28a 0%,#0000 55%),radial-gradient(900px 500px at 100% 0,#c8e86a 0%,#0000 45%),linear-gradient(160deg,#eef3e2 0%,#dfe8cc 45%,#f7f8f2 100%)}a{color:inherit}.page{width:min(1120px,100% - 2rem);margin:0 auto;padding:2.5rem 0 4rem}.topbar{justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:2rem;display:flex}.brand{margin:0}.brand-mark{font-family:var(--font-display);letter-spacing:-.04em;text-transform:lowercase;filter:blur(.6px);color:var(--ink);margin:0;font-size:clamp(3.5rem,10vw,6rem);font-weight:700;line-height:.85}.brand h1{font-family:var(--font-display);letter-spacing:-.02em;text-transform:lowercase;margin:.35rem 0 0;font-size:clamp(1.4rem,3vw,2rem);font-weight:700}.credits{text-align:right}.credits-name{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:1rem;font-weight:700}.credits-links{justify-content:flex-end;gap:.85rem;margin-top:.35rem;display:flex}.credits-links a{color:var(--muted);border-bottom:1px solid #0000;font-size:.82rem;text-decoration:none}.credits-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}.credits--footer{text-align:center}.credits--footer .credits-links{justify-content:center}.site-footer{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem}.lede{max-width:36rem;color:var(--muted);margin:0 0 2rem;font-size:.98rem;line-height:1.55}.layout{grid-template-columns:1.05fr .95fr;align-items:start;gap:1.75rem;display:grid}.stage,.controls{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffb8;padding:1.1rem}.stage{z-index:1;position:sticky;top:1rem}.controls{overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);overflow-y:auto}.controls::-webkit-scrollbar{width:8px}.controls::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 28%, transparent);border-radius:999px}.stage-frame{background:var(--brat);width:100%;max-height:min(72vh,720px);margin-inline:auto;position:relative;overflow:hidden}.brat-stage{width:100%;height:100%;position:relative}.brat-overlay{text-align:justify;text-align-last:justify;filter:blur(2px);word-break:break-word;font-family:arial_narrowregular,Arial Narrow,Arial,sans-serif;font-size:48px;font-weight:400;line-height:1;position:absolute;inset:8%;overflow:hidden}.brat-stage--typewriter .brat-overlay{letter-spacing:-.02em;text-align:center;text-align-last:center;filter:blur(1.6px);font-weight:700;line-height:1.05;inset:10%}.brat-overlay .textFitted{width:100%;text-align:inherit;text-align-last:inherit;line-height:inherit;display:inline-block}.brat-stage--typewriter .brat-overlay .textFitted{text-align:center;text-align-last:center}.brat-canvas{width:100%;height:100%;display:block}.result-video{background:#000;width:100%;height:auto;margin-top:.85rem;display:block}.stage-meta{color:var(--muted);justify-content:space-between;gap:1rem;margin-top:.75rem;font-size:.85rem;display:flex}.bar{background:#dde5c8;height:6px;margin-top:.75rem;overflow:hidden}.bar-fill{background:var(--ink);height:100%;transition:width .15s linear}.field{border:0;flex-direction:column;gap:.45rem;min-inline-size:0;margin:0 0 1rem;padding:0;display:flex}.field--compact{gap:.35rem;margin-bottom:.75rem}.menu-select{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;cursor:pointer;appearance:auto;background:#fbfcf7;padding:.65rem .75rem}.menu-select:focus{outline:2px solid var(--brat);outline-offset:1px}.select-label{gap:.3rem;display:grid}.select-label>span{color:var(--muted);text-transform:lowercase;font-size:.85rem}.field>span,.field>legend{font-family:var(--font-display);text-transform:lowercase;letter-spacing:-.02em;font-size:1.05rem;font-weight:700}.field em,.note{color:var(--muted);font-size:.82rem;font-style:normal;line-height:1.4}textarea,input[type=number]{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;resize:vertical;background:#fbfcf7;padding:.75rem .85rem}textarea:focus,input[type=number]:focus{outline:2px solid var(--brat);outline-offset:1px}.presets{flex-wrap:wrap;gap:.45rem;display:flex}.chip,.btn{font:inherit;cursor:pointer;border:1px solid var(--ink);color:var(--ink);text-transform:lowercase;font-family:var(--font-display);letter-spacing:-.02em;background:0 0;padding:.55rem .9rem;font-weight:700}.chip.active,.btn.primary{background:var(--brat);border-color:var(--brat)}.btn.ghost{background:#f4f7ec}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn:disabled,.chip:disabled{opacity:.45;cursor:not-allowed}.custom-dur{gap:.35rem;margin-top:.65rem;display:grid}.custom-dur span{color:var(--muted);font-size:.85rem}.speed-slider{gap:.4rem;margin-top:.35rem;display:grid}.speed-slider-head{color:var(--muted);text-transform:lowercase;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.82rem;display:flex}.speed-slider-head strong{color:var(--ink);font-family:var(--font-display);font-size:1rem}.speed-slider input[type=range]{width:100%;accent-color:var(--brat);cursor:pointer}.speed-slider input[type=range]:disabled{opacity:.45;cursor:not-allowed}.lock-row{cursor:pointer;align-items:center;gap:.55rem;margin-bottom:.35rem;font-size:.9rem;display:flex}.lock-row input{width:1rem;height:1rem;accent-color:var(--brat)}.presets.is-dimmed{opacity:.4}.speed-slider.is-dimmed{opacity:.4;pointer-events:none}.swatch{width:1.05rem;height:1.05rem;font-family:var(--font-display);vertical-align:-.1em;border:1px solid #00000040;justify-content:center;align-items:center;margin-right:.35rem;font-size:.7rem;font-weight:700;line-height:1;display:inline-flex}.effect-list{gap:.5rem;display:grid}.effect-option{border:1px solid var(--line);cursor:pointer;background:#fbfcf7;align-items:flex-start;gap:.65rem;padding:.7rem .8rem;display:flex}.effect-option.is-active{border-color:var(--ink);background:color-mix(in srgb, var(--brat) 35%, #fbfcf7)}.effect-option input{accent-color:var(--brat);margin-top:.2rem}.effect-option-copy{gap:.15rem;display:grid}.effect-option-copy strong{font-family:var(--font-display);text-transform:lowercase;letter-spacing:-.02em;font-size:1rem}.effect-option-copy em{color:var(--muted);font-size:.82rem;font-style:normal;line-height:1.35}.color-row{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.35rem;display:grid}.color-field{gap:.35rem;display:grid}.color-field>span{color:var(--muted);text-transform:lowercase;font-size:.85rem}.color-input{border:1px solid var(--line);background:#fbfcf7;align-items:center;gap:.45rem;padding:.35rem .45rem;display:flex}.color-input input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;width:2rem;height:2rem;padding:0}.color-input input[type=text]{min-width:0;font:inherit;text-transform:uppercase;background:0 0;border:0;flex:1;padding:.25rem 0}.color-input input[type=text]:focus{outline:none}@media (width<=520px){.color-row{grid-template-columns:1fr}}.actions{flex-wrap:wrap;gap:.55rem;margin-bottom:1rem;display:flex}.note{margin:0}@media (width<=860px){.layout{grid-template-columns:1fr}.page{padding-top:1.5rem}.stage{position:sticky;top:.5rem}.controls{max-height:min(55vh,520px)}.topbar{flex-direction:column;align-items:stretch;gap:1rem}.credits--header{text-align:left}.credits--header .credits-links{justify-content:flex-start}}