:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-top:#11161d;--bg-bottom:#080b0f;--panel:#0b0f1494;--panel-strong:#0e1318c7;--line:#c5ccd329;--text-main:#f4efe5;--text-soft:#f4efe5b8;--text-faint:#f4efe575;--accent:#839887;--accent-strong:#a9b7ab;--shadow:0 24px 80px #0000004d;--title-font:"Iowan Old Style", "Palatino Linotype", "Hiragino Mincho ProN", "Yu Mincho", serif;--ui-font:"Avenir Next", "Hiragino Sans", "Yu Gothic", sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{font-family:var(--ui-font);color:var(--text-main);background:radial-gradient(circle at top, #70847b2e, transparent 24rem), radial-gradient(circle at 20% 18%, #58749b24, transparent 20rem), linear-gradient(180deg, var(--bg-top), var(--bg-bottom));margin:0}body:before{content:"";opacity:.35;pointer-events:none;background-color:#0000;background-image:linear-gradient(90deg,#0000 0,#ffffff05 1px,#0000 1px),linear-gradient(#0000 0,#ffffff05 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:80px 80px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0}.app-shell{min-height:100vh;padding:2.2rem clamp(1rem,3vw,2.2rem) 1.6rem;position:relative}.hero{text-align:center;max-width:26rem;margin:0 auto}.hero__eyebrow{color:var(--text-faint);letter-spacing:.26em;text-transform:uppercase;margin:0 0 .5rem;font-size:.72rem}.hero__title{font-family:var(--title-font);letter-spacing:.08em;margin:0;font-size:clamp(2.5rem,7vw,4.5rem);font-weight:400}.hero__lead{max-width:28rem;color:var(--text-soft);margin:.8rem auto 0;font-size:.95rem;line-height:1.8}.layout{grid-template-columns:minmax(0,1fr) 21rem;align-items:stretch;gap:1.25rem;max-width:92rem;min-height:calc(100vh - 12rem);margin:1.8rem auto 0;display:grid}.viewer-card,.control-panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:1.6rem;position:relative}.viewer-card{flex-direction:column;display:flex;overflow:hidden}.viewer-card__glow{pointer-events:none;background:radial-gradient(circle at 50% 58%,#ffefcc14,#0000 28%),radial-gradient(circle at 52% 78%,#a8d0b51a,#0000 18%);position:absolute;inset:0}.viewer-stage{flex:1;min-height:30rem;position:relative}#viewer-canvas{outline:none;width:100%;height:100%;display:block}.viewer-caption{color:var(--text-faint);letter-spacing:.04em;justify-content:center;gap:1rem;padding:.95rem 1.2rem 1.1rem;font-size:.8rem;display:flex}.control-panel{flex-direction:column;gap:1rem;padding:1.2rem;display:flex}.panel-block{flex-direction:column;gap:.75rem;display:flex}.panel-label{color:var(--text-faint);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.panel-block--actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.seed-row{grid-template-columns:minmax(0,1fr) auto;gap:.65rem;display:grid}.seed-input,.control-button{font:inherit;color:var(--text-main);background:#ffffff0a;border:1px solid #d4dbe11f;border-radius:.95rem;transition:transform .18s,border-color .18s,background-color .18s,box-shadow .18s}.seed-input{outline:none;width:100%;padding:.85rem .95rem}.seed-input:focus{border-color:#b4c2b66b;box-shadow:0 0 0 3px #8da7921f}.control-button{cursor:pointer;min-height:3rem;padding:.82rem .95rem}.control-button:hover,.control-button:focus-visible{background:#ffffff14;border-color:#d2dbd847;transform:translateY(-1px)}.control-button:active{transform:translateY(0)}.control-button--accent,.control-button.is-active{background:#879b8d29;border-color:#b0c2b542;box-shadow:inset 0 0 0 1px #e8f0ea0f}.panel-meta{color:var(--text-soft);margin-top:auto;padding-top:.45rem;font-family:SFMono-Regular,Roboto Mono,Menlo,monospace;font-size:.84rem;line-height:1.7}@media (width<=920px){.layout{grid-template-columns:1fr;min-height:auto}.viewer-stage{min-height:min(68vh,34rem)}.control-panel{order:2}}@media (width<=640px){.app-shell{padding:1.2rem .85rem 1rem}.hero__lead{font-size:.88rem;line-height:1.7}.viewer-card,.control-panel{border-radius:1.15rem}.viewer-stage{min-height:55vh}.viewer-caption{flex-wrap:wrap;gap:.45rem 1rem;padding-inline:.8rem}.preset-grid,.panel-block--actions{grid-template-columns:1fr 1fr}.control-panel{padding:.95rem}}