:root{--bg:#0b1020;--panel:#11182a;--panel2:#151e33;--text:#edf2ff;--muted:#8995ad;--line:rgba(164,181,218,.14);--accent:#8b72ff;--accent2:#b7a8ff;--shadow:0 18px 55px rgba(0,0,0,.24);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 15% 0%,rgba(104,83,220,.13),transparent 35%),var(--bg);color:var(--text);min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1380px)/2));background:rgba(10,15,30,.76);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#a18aff,#6650d9);font:700 22px Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:0 6px 20px #765be744}.brand-copy{display:grid;gap:2px}.brand-copy strong{font:700 14px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.1px}.brand-copy small{font-size:10px;color:var(--muted);letter-spacing:.5px}.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);width:38px;height:38px;border-radius:11px;font-size:19px}.back-link{color:#c7bbff;text-decoration:none;font-size:12px;font-weight:700;border:1px solid #8873ff55;background:#8068ff12;border-radius:10px;padding:10px 13px}.main-wrap{max-width:1380px;margin:auto;padding:42px 24px 25px}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:1.65px;color:#a99aff}.eyebrow{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#59e6b2;box-shadow:0 0 0 4px #59e6b21c}.intro h1{font:700 clamp(29px,4vw,45px)/1.12 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-1.8px;margin:12px 0 10px}.intro h1 span{background:linear-gradient(90deg,#a99aff,#e0a9ff);color:transparent;background-clip:text}.intro p{max-width:670px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}.device-note{display:flex;gap:9px;align-items:center;color:#aab5cc;border:1px solid var(--line);background:#11182a;padding:11px 14px;border-radius:12px;font-size:11px;white-space:nowrap}.device-note span:first-child{font-size:17px;color:#b2a3ff}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr);gap:22px;align-items:start}.preview-column,.control-panel{min-width:0}.section-head,.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-head h2,.panel-heading h2,.how-heading h2{font:700 19px Inter,ui-sans-serif,system-ui,sans-serif;margin:4px 0 0}.preview-status{font-size:9px;font-weight:800;letter-spacing:1px;color:#61e7b4;display:flex;align-items:center;gap:7px}.preview-status i{width:6px;height:6px;background:#61e7b4;border-radius:50%}.screen-frame{padding:9px;border-radius:19px;background:linear-gradient(145deg,#29344c,#121a2b 55%,#30334c);border:1px solid #65718a44;box-shadow:var(--shadow)}.screen-stage{height:310px;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111827;transition:background .2s}.screen-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 30%,transparent 70%,rgba(255,255,255,.025))}.ticker-window{width:100%;overflow:hidden;position:relative;z-index:1}.ticker-track{display:flex;align-items:center;width:max-content;white-space:nowrap;will-change:transform;animation:marquee var(--duration,12s) linear infinite;animation-direction:var(--direction,normal);animation-play-state:running}.ticker-copy{display:inline-block;padding:0 70px;font:800 54px/1.2 Arial,sans-serif;color:#fff;white-space:pre;text-shadow:0 0 12px currentColor,0 0 30px currentColor}.ticker-track.paused{animation-play-state:paused}.screen-hint{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:1.6px;color:#ffffff6e;z-index:2}.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.hint-text{font-size:10px;color:var(--muted)}.primary-btn{border:0;border-radius:11px;background:linear-gradient(110deg,#8068ff,#a16af4);color:white;font-weight:800;font-size:12px;padding:13px 17px;box-shadow:0 8px 22px #8068ff35;transition:transform .18s,filter .18s}.primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.display-btn{white-space:nowrap}.display-btn span{font-size:16px;margin-right:6px}.quick-tips{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:13px;margin-top:16px;background:linear-gradient(110deg,#8870ff0c,transparent)}.tip-icon{width:29px;height:29px;display:grid;place-items:center;background:#927aff20;border-radius:9px;color:#c0b2ff}.quick-tips strong{font-size:11px}.quick-tips p{font-size:10px;line-height:1.55;color:var(--muted);margin:4px 0 0}.control-panel{border:1px solid var(--line);background:linear-gradient(155deg,#141d31,#101728);border-radius:17px;padding:20px 20px 17px;box-shadow:var(--shadow)}.panel-heading{margin-bottom:18px}.sliders-icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:#b8aaff;font-size:20px}.control-group{padding:15px 0;border-top:1px solid var(--line)}.field-label{display:block;font-size:11px;font-weight:800;margin-bottom:9px}.control-group textarea,.control-group select{width:100%;background:#0b1222;border:1px solid #2c3851;color:var(--text);border-radius:9px;padding:11px 12px;outline:none;font-size:12px;resize:vertical;min-height:42px}.control-group textarea:focus,.control-group select:focus{border-color:#8e7bff;box-shadow:0 0 0 3px #8e7bff20}.field-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:6px}.preset-messages{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.preset-messages button{border:1px solid #35405a;background:#19233a;color:#c8d0e3;border-radius:7px;padding:6px 8px;font-size:9px}.preset-messages button:hover{border-color:#9b88ff;color:white}.group-title{display:flex;align-items:center;justify-content:space-between}.group-title .field-label{margin:0 0 10px}.mini-label{font-size:8px;letter-spacing:1px;color:#687691;font-weight:800}.background-modes,.direction-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:#0a1120;border-radius:9px}.mode-btn,.direction-btn{border:0;background:transparent;color:#8d9ab2;border-radius:7px;padding:8px;font-size:10px;font-weight:700}.mode-btn.active,.direction-btn.active{background:#293250;color:#e9e5ff;box-shadow:0 2px 8px #0002}.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.color-picker-wrap{display:flex;align-items:center;gap:7px;position:relative;font-size:9px;color:#aab5c9;cursor:pointer}.color-picker-wrap input{position:absolute;opacity:0;width:1px;height:1px}.color-chip{width:24px;height:24px;border:2px solid #ffffff55;border-radius:7px;background:#111827;box-shadow:0 2px 8px #0003}.swatches{display:flex;gap:8px;margin-top:12px}.swatch,.text-swatches button{width:24px;height:24px;border:2px solid #ffffff30;border-radius:8px;background:var(--swatch);padding:0;box-shadow:0 2px 7px #0002}.swatch:focus,.text-swatches button:focus{outline:2px solid #b7a8ff;outline-offset:2px}.text-swatches button{border-radius:50%;width:20px;height:20px}.small-action{border:1px solid #6d5cbd66;background:#8b72ff13;color:#c9beff;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:700}.range-row{display:flex;justify-content:space-between;align-items:center;margin:13px 0 7px;font-size:10px;color:#b8c2d5}.range-row output{font-weight:800;color:#c7baff}.control-group input[type=range]{width:100%;accent-color:#9b85ff;height:4px;cursor:pointer}.range-scale{display:flex;justify-content:space-between;font-size:8px;color:#687691;margin-top:2px}.direction-options{margin-top:1px}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;margin:3px 0 14px;cursor:pointer}.toggle-line:last-child{margin-bottom:0}.toggle-line span{display:grid;gap:3px}.toggle-line strong{font-size:10px}.toggle-line small{font-size:9px;color:var(--muted)}.toggle-line input{position:absolute;right:0;opacity:0}.toggle-line i{width:34px;height:19px;border-radius:20px;background:#39445a;position:relative;transition:.2s;flex-shrink:0}.toggle-line i:after{content:'';position:absolute;width:13px;height:13px;left:3px;top:3px;border-radius:50%;background:#c5cede;transition:.2s}.toggle-line input:checked+i{background:#8068ff}.toggle-line input:checked+i:after{left:18px;background:#fff}.panel-actions{display:grid;gap:10px;padding-top:15px;border-top:1px solid var(--line)}.wide-btn{width:100%}.reset-btn{border:0;background:transparent;color:#8d9ab2;font-size:10px;padding:7px}.reset-btn:hover{color:#d4ccff}.how-section{margin-top:54px}.how-heading{margin-bottom:18px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.how-grid article{padding:19px;border:1px solid var(--line);background:#11182a8c;border-radius:14px}.step-no{font:700 11px Inter,ui-sans-serif,system-ui,sans-serif;color:#a797ff;letter-spacing:1px}.how-grid h3{font:700 14px Inter,ui-sans-serif,system-ui,sans-serif;margin:11px 0 6px}.how-grid p{font-size:11px;line-height:1.6;color:var(--muted);margin:0}.footer{border-top:1px solid var(--line);margin-top:44px;padding:20px 0 6px;display:flex;justify-content:space-between;gap:12px;color:#687691;font-size:10px}.footer a{color:#a99aff;text-decoration:none}.display-overlay{position:fixed;inset:0;z-index:1000;background:#080808;display:none;align-items:center;justify-content:center;overflow:hidden}.display-overlay.active{display:flex}.display-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#111827}.fullscreen-ticker{width:100%}.fullscreen-ticker .ticker-copy{font-size:clamp(42px,8vw,130px);padding:0 9vw}.exit-display{position:absolute;top:max(15px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right));z-index:5;border:1px solid #ffffff55;border-radius:30px;padding:9px 13px;background:#0007;color:white;font-size:12px;opacity:.18;transition:opacity .2s}.display-overlay:active .exit-display,.exit-display:focus{opacity:1}.display-help{position:absolute;bottom:max(17px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#ffffff70;font-size:10px;pointer-events:none;opacity:0;transition:opacity .3s}.display-overlay:active .display-help{opacity:1}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#202a40;color:#f3f1ff;border:1px solid #ffffff20;padding:11px 16px;border-radius:10px;font-size:11px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:2000;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}body.light{--bg:#f3f5fb;--panel:#fff;--panel2:#fff;--text:#182238;--muted:#66738b;--line:rgba(43,58,88,.14);--shadow:0 18px 55px rgba(35,47,78,.10);background:radial-gradient(ellipse at 15% 0%,#e8e2ff,transparent 38%),var(--bg);color:var(--text);color-scheme:light}.light .topbar{background:#ffffffd9}.light .control-panel,.light .how-grid article{background:#ffffffd9}.light .control-group textarea,.light .control-group select{background:#f6f7fc;color:#182238;border-color:#dce1ed}.light .background-modes,.light .direction-options{background:#eef0f8}.light .mode-btn.active,.light .direction-btn.active{background:#ded8ff;color:#43328b}.light .preset-messages button{background:#f3f2fc;color:#51477c;border-color:#ddd8f5}.light .device-note{background:#fff;color:#59647a}.light .topbar{border-color:#dfe3ed}.light .control-panel{border-color:#dfe3ed}
@media(max-width:980px){.workspace{grid-template-columns:minmax(0,1fr) minmax(315px,.85fr)}.main-wrap{padding-top:30px}.screen-stage{height:270px}.control-panel{padding:17px}.intro p{max-width:560px}}
@media(max-width:760px){.topbar{height:64px;padding:0 15px}.brand-mark{width:35px;height:35px}.brand-copy strong{font-size:12px}.brand-copy small{font-size:9px}.back-link{padding:9px 10px}.back-link span{display:none}.main-wrap{padding:26px 15px 20px}.intro{display:block;margin-bottom:23px}.intro h1{font-size:33px;letter-spacing:-1.2px}.intro p{font-size:12px}.device-note{display:inline-flex;margin-top:14px;padding:8px 10px;font-size:10px}.workspace{grid-template-columns:1fr;gap:20px}.screen-stage{height:240px}.preview-tools{align-items:stretch;flex-direction:column}.hint-text{text-align:center}.display-btn{width:100%}.control-panel{padding:17px}.how-section{margin-top:38px}.how-grid{grid-template-columns:1fr;gap:9px}.how-grid article{padding:15px}.how-grid h3{margin-top:7px}.footer{font-size:9px}.screen-hint{font-size:7px}}
@media(max-width:390px){.intro h1{font-size:29px}.screen-stage{height:205px}.control-panel{padding:14px}.color-picker-wrap{font-size:8px}.preset-messages button{font-size:8px;padding:6px}.footer{flex-direction:column}.section-head h2,.panel-heading h2{font-size:17px}}
@media(orientation:landscape) and (max-height:520px){.display-overlay.active .fullscreen-ticker .ticker-copy{font-size:min(18vh,100px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Extended motion, ambience and preset controls */
.extra-top{margin-top:16px}.utility-group{padding-bottom:14px}.utility-actions{display:flex;gap:7px;margin:8px 0 12px}.utility-actions .small-action{flex:1}.danger-action{border-color:#e8797955;color:#ffaaa8;background:#ef444410}.display-controls{position:absolute;top:max(15px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right));z-index:6;display:flex;gap:8px}.display-controls button{border:1px solid #ffffff55;border-radius:30px;padding:9px 13px;background:#0008;color:white;font-size:12px;opacity:.2;transition:opacity .2s}.display-overlay:active .display-controls button,.display-controls button:focus{opacity:1}.display-controls .exit-display{position:static}.screen-stage.ambience-shine:after,.display-stage.ambience-shine:after{content:"";position:absolute;inset:-60%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff18 49%,transparent 56%);animation:ambienceShine 7s linear infinite}.screen-stage.ambience-stripes:after,.display-stage.ambience-stripes:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,#ffffff0b 0 2px,transparent 2px 16px)}.screen-stage.ambience-dots:after,.display-stage.ambience-dots:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#ffffff22 1px,transparent 1.5px);background-size:14px 14px;opacity:.55}.ticker-copy.effect-blink{animation:textBlink 1.05s steps(2,start) infinite}.ticker-copy.effect-pulse{animation:textPulse 1.5s ease-in-out infinite}.ticker-copy.effect-static{animation:none}.ticker-track.motion-static{animation:none!important;justify-content:center;width:100%;white-space:normal}.ticker-track.motion-static .ticker-copy{white-space:normal;text-align:center;padding:0 18px}.ticker-track.motion-static .ticker-copy[aria-hidden=true]{display:none}.ticker-track.motion-blink,.ticker-track.motion-pulse{animation:none!important;justify-content:center;width:100%}.ticker-track.motion-blink .ticker-copy[aria-hidden=true],.ticker-track.motion-pulse .ticker-copy[aria-hidden=true]{display:none}.ticker-track.motion-blink .ticker-copy,.ticker-track.motion-pulse .ticker-copy{white-space:normal;text-align:center}.ticker-track.motion-blink .ticker-copy{animation:textBlink 1.05s steps(2,start) infinite}.ticker-track.motion-pulse .ticker-copy{animation:textPulse 1.5s ease-in-out infinite}.ticker-copy.outlined{-webkit-text-stroke:1.2px #111;text-shadow:0 2px 3px #0009!important}.light .ticker-copy.outlined{-webkit-text-stroke:1px #fff}.ticker-track.paused .ticker-copy{animation-play-state:paused!important}@keyframes ambienceShine{from{transform:translateX(-35%)}to{transform:translateX(35%)}}@keyframes textBlink{50%{opacity:.12}}@keyframes textPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
@media(max-width:760px){.utility-actions{gap:6px}.utility-actions .small-action{font-size:8px;padding:8px 5px}.display-controls button{opacity:.6}}

/* Character & symbol picker */
.character-library{margin-top:15px;padding:12px;background:rgba(130,110,255,.06);border:1px solid var(--line);border-radius:12px}
.character-heading{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:11px}
.character-heading strong{font-size:11px}.character-heading span,.character-footnote{font-size:8px;color:var(--muted)}
.character-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.char-tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:6px 8px;border-radius:7px;font-size:9px;white-space:nowrap}
.char-tab.active{background:#8068ff25;border-color:#927aff;color:var(--text)}
.character-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;max-height:184px;overflow-y:auto;padding:2px 2px 5px;overscroll-behavior:contain}
.character-item{min-width:0;min-height:30px;aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);font-size:19px;display:grid;place-items:center;padding:0;line-height:1.1;transition:background .15s,border-color .15s,transform .15s}
.character-item:hover{background:#8068ff30;border-color:#927aff;transform:scale(1.06)}
.character-item:active{transform:scale(.93)}
.character-footnote{margin-top:8px}
@media(max-width:400px){.character-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.character-heading{align-items:flex-start;flex-direction:column;gap:4px}.char-tab{font-size:8px;padding:6px}}