:root{color-scheme:dark;--page: #07090d;--panel: rgba(13, 17, 24, .96);--panel-raised: #10151e;--ink: #f4f7ff;--muted: #929daf;--dim: #626d7e;--line: rgba(177, 192, 219, .24);--line-strong: rgba(212, 222, 241, .48);--cyan: #00e5ff;--magenta: #ff63d8;--lime: #b8ff3d;--amber: #ffbf3f;--display: "Avenir Next Condensed", "Avenir Next", "Arial Narrow", "Segoe UI", Helvetica, Arial, sans-serif;--mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{min-width:20rem;min-height:100%;background:var(--page)}body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 75% 8%,rgba(255,99,216,.08),transparent 30rem),radial-gradient(circle at 12% 42%,rgba(0,229,255,.07),transparent 34rem),linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px),var(--page);background-size:auto,auto,30px 30px,30px 30px,auto;font-family:var(--mono)}button,input,textarea{color:inherit;font:inherit}button{cursor:pointer}.page-header{width:min(calc(100% - 2rem),96rem);margin-inline:auto;padding-block:clamp(1.25rem,3vw,2.5rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(1rem,2.5vw,2.5rem)}.back-link{width:2.5rem;height:2.5rem;display:grid;place-items:center;border:1px solid var(--line);color:var(--cyan);background:#ffffff06;clip-path:polygon(0 .45rem,.45rem 0,100% 0,100% calc(100% - .45rem),calc(100% - .45rem) 100%,0 100%)}.back-link svg{width:1rem;fill:none;stroke:currentColor;stroke-width:1.5}.heading-copy{max-width:58rem}.eyebrow,.panel-kicker{margin:0 0 .3rem;color:var(--cyan);font-family:var(--display);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:.6rem;font-family:var(--display);font-size:clamp(2rem,5vw,4.5rem);font-weight:600;letter-spacing:-.055em;line-height:.94}.intro{max-width:68ch;margin-bottom:0;color:var(--muted);font-size:.78rem;line-height:1.65}.header-actions{display:flex;gap:.6rem}.primary-button,.secondary-button,.icon-button,.text-button{min-height:2.5rem;border:1px solid var(--line);font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.primary-button,.secondary-button{padding:.7rem .9rem}.primary-button{border-color:var(--cyan);color:#031014;background:var(--cyan)}.secondary-button,.icon-button,.text-button{color:#c8d0df;background:#ffffff06}.generator-layout{width:min(calc(100% - 2rem),96rem);margin:0 auto 3rem;display:grid;grid-template-columns:minmax(19rem,25rem) minmax(0,1fr);align-items:start;gap:clamp(1rem,2.5vw,2rem)}.control-panel,.preview-panel,.code-panel{overflow:hidden;border:1px solid var(--line-strong);background:var(--panel);box-shadow:0 1.5rem 4rem #00000047}.control-panel{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto;scrollbar-color:rgba(0,229,255,.45) transparent;scrollbar-width:thin}.panel-heading,.output-heading{min-height:4.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:#10151ef0}.panel-heading{position:sticky;top:0;z-index:3}.panel-heading h2,.output-heading h2{margin:0;font-family:var(--display);font-size:.94rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.live-indicator{display:flex;align-items:center;gap:.45rem;color:var(--lime);font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.live-indicator span{width:.4rem;height:.4rem;border-radius:50%;background:currentColor;box-shadow:0 0 .7rem currentColor}fieldset{min-width:0;margin:0;padding:1rem;border:0;border-bottom:1px solid var(--line)}fieldset:last-child{border-bottom:0}legend{width:100%;margin-bottom:.8rem;color:var(--muted);font-family:var(--display);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.seed-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.6rem}.seed-row label,.range-control{display:grid;gap:.45rem;color:#c8d0df;font-size:.64rem}input[type=text]{width:100%;height:2.5rem;padding:.55rem .65rem;border:1px solid var(--line);color:var(--ink);background:#090c12}.icon-button{padding-inline:.65rem}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.color-control{display:grid;gap:.38rem;color:var(--muted);font-size:.56rem;text-align:center}input[type=color]{width:100%;height:2.35rem;padding:.18rem;border:1px solid var(--line);background:#090c12;cursor:pointer}.range-list{display:grid;gap:.95rem}.range-row{display:grid;grid-template-columns:minmax(0,1fr) 4.2rem;align-items:center;gap:.75rem}input[type=range]{width:100%;accent-color:var(--cyan)}output{color:var(--cyan);font-size:.58rem;text-align:right}.toggle-control{display:flex;align-items:center;justify-content:space-between;gap:1rem}.toggle-control span{display:grid;gap:.25rem}.toggle-control strong{color:#c8d0df;font-size:.64rem;font-weight:500}.toggle-control small{color:var(--dim);font-size:.54rem;line-height:1.45}.toggle-control input{width:1.05rem;height:1.05rem;accent-color:var(--cyan)}.output-column{min-width:0;display:grid;gap:1rem}.preview-note{color:var(--dim);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase}.preview-frame{position:relative;min-height:31rem;background:#07090d}.preview-frame iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.code-panel textarea{width:100%;min-height:14rem;display:block;resize:vertical;padding:1rem;border:0;border-bottom:1px solid var(--line);color:#abb6c8;background:#080b10;font-size:.62rem;line-height:1.55;-moz-tab-size:2;tab-size:2}.text-button{min-height:2rem;padding-inline:.65rem}.copy-status{min-height:2.4rem;margin:0;padding:.7rem 1rem;color:var(--dim);font-size:.57rem}.copy-status[data-state=success]{color:var(--lime)}.copy-status[data-state=error]{color:#ff5470}button:hover,.back-link:hover{border-color:var(--magenta);color:#fff}.primary-button:hover{border-color:#fff;color:#031014}button:focus-visible,.back-link:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:.2rem}@media(max-width:900px){.page-header{grid-template-columns:auto minmax(0,1fr)}.header-actions{grid-column:2}.generator-layout{grid-template-columns:1fr}.control-panel{position:static;max-height:none}}@media(max-width:560px){.page-header,.generator-layout{width:min(calc(100% - 1rem),96rem)}.page-header{gap:.8rem}.heading-copy{min-width:0}.header-actions{grid-column:1 / -1}.header-actions button{flex:1}.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-frame{min-height:22rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}