:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:#dfeaf1;background:#080813;font-size:14px;--ease:cubic-bezier(.2,0,0,1);--muted:#9baebe;--edge:#ffffff12}
*{box-sizing:border-box}html,body{margin:0;min-width:0;width:100%;height:100%}button,input,select,textarea{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c7e5fa;outline-offset:4px}::selection{background:#a0bddb40;color:#fff}
.app{position:relative;width:100%;height:100svh;height:var(--app-height,100svh);min-height:260px;overflow:hidden;background:#080813}
.toolbar{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;pointer-events:none}.toolbar>*{pointer-events:auto}
.wordmark{display:flex;flex-direction:column;gap:5px;color:#e8f1f7;text-decoration:none;font-size:17px;line-height:1.1;font-weight:500}.wordmark span{font-size:11px;font-weight:400;color:var(--muted)}
.tools{display:flex;align-items:center;gap:9px}button{border:0;background:none}.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}.icon-button svg,.settings-button svg{width:20px;height:20px;flex-shrink:0}.settings-button{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px #ffffff18;background:#ffffff04}
.icon-button,.settings-button,.panel-actions button,.theme{transition:background-color 150ms var(--ease),transform 130ms var(--ease),color 150ms var(--ease)}button:active{transform:scale(.96)}
.sound-waves{display:none}#sound[aria-pressed=true] .sound-waves{display:block}#sound[aria-pressed=true] .sound-off{display:none}
#field{position:absolute;inset:0;min-width:0}.settings-open #field{right:360px}
.hint{position:absolute;z-index:3;bottom:max(28px,env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;color:var(--muted);pointer-events:none}.hint button{pointer-events:auto;font-size:15px;min-height:44px;padding:4px 12px;color:#d8e8f2}.hint p{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin:8px 0 0;font-size:12px}.film-note{display:block;font-size:11px;margin-top:17px;color:#8b9fad}.settings-open .hint{right:384px}
.panel{position:absolute;z-index:6;right:20px;top:100px;bottom:24px;width:320px;max-height:680px;display:flex;flex-direction:column;border-radius:22px;background:#111a25e8;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 16px 48px #0008,inset 0 0 0 1px #ffffff14;opacity:0;transform:translate3d(14px,0,0) scale(.98);transform-origin:top right;visibility:hidden;transition:opacity 160ms var(--ease),transform 200ms var(--ease),visibility 0s 200ms;pointer-events:none}
.settings-open .panel{opacity:1;transform:translate3d(0,0,0) scale(1);visibility:visible;transition:opacity 180ms var(--ease),transform 220ms var(--ease),visibility 0s;pointer-events:auto}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 4px 22px}.panel h1{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:0}.panel-body{overflow:auto;overscroll-behavior:contain;padding:8px 22px 18px;scrollbar-width:thin;scrollbar-color:#70889e60 transparent;min-height:0}
fieldset{border:0;padding:0;margin:0 0 21px}legend,.font-label{font-size:12px;color:var(--muted)}legend{margin-bottom:9px}.themes{display:grid;grid-template-columns:1fr 1fr;gap:5px}.theme{display:flex;align-items:center;gap:8px;border-radius:9px;min-height:40px;padding:8px 9px;text-align:left;font-size:12px;color:#b4c7d7}.theme i{width:12px;height:12px;flex-shrink:0;background:var(--swatch);border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff50}.theme.active{background:#ffffff0e;color:#f0f7fc;box-shadow:inset 0 0 0 1px #ffffff14}.custom-colour{display:flex;align-items:center;justify-content:space-between;min-height:42px;font-size:12px;color:var(--muted);padding:0 9px}.custom-colour input{width:44px;height:36px;background:transparent;border:0;padding:7px;cursor:pointer;font-size:16px}
.font-label{display:flex;flex-direction:column;gap:9px}select{width:100%;height:44px;padding:0 12px;border-radius:10px;border:1px solid #ffffff16;background:#080f18;color:#dfeaf1;font-size:16px}
.sliders{display:grid;gap:15px;margin-top:24px}.sliders label{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:12px;color:#c8d8e5}.sliders output{font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{grid-column:1/-1;width:100%;margin:4px 0 0;height:24px;accent-color:#b8d8ef;cursor:pointer;font-size:16px}
.panel-actions{display:flex;gap:8px;margin-top:22px}.panel-actions button{min-height:44px;border-radius:10px;padding:8px 12px;font-size:12px;background:#ffffff0b}.panel-actions #copy{flex:1;background:#c5dfef;color:#0c1723}.panel #status{color:var(--muted);font-size:11px;line-height:1.5;min-height:34px;margin:12px 0 0;text-wrap:pretty}#copy-fallback{width:100%;height:110px;background:#080813;color:#dae8f3;border:1px solid #ffffff20;padding:8px;font-size:16px}
.film .toolbar,.film .hint,.film .panel{display:none}.film #field{inset:0}.load-error{position:absolute;left:10%;right:10%;top:40%;z-index:10;padding:24px;color:#e2eef7;background:#152231;text-align:center;line-height:1.5}
@media(hover:hover) and (pointer:fine){.icon-button:hover,.settings-button:hover,.theme:hover{background:#ffffff10}.panel-actions button:hover{filter:brightness(1.08)}.hint button:hover{color:#fff}}
@media(max-width:650px){.toolbar{padding:18px 18px 12px}.wordmark{font-size:16px}.tools{gap:2px}.settings-button{padding:0 11px;font-size:12px}.hint{bottom:max(21px,env(safe-area-inset-bottom));left:16px;right:16px}.hint p{max-width:270px;margin:4px auto 0;gap:7px 15px;font-size:11px}.film-note{display:none}.panel{left:10px;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:auto;height:min(430px,55%);max-height:none;border-radius:22px;transform:translate3d(0,12px,0);transform-origin:bottom center}.panel-heading{padding-top:10px}.panel-body{padding-top:6px}.settings-open #field{inset:0 0 min(450px,58%) 0}.settings-open .hint{display:none}.themes{grid-template-columns:repeat(4,1fr);gap:2px}.theme{flex-direction:column;gap:7px;text-align:center;padding:8px 2px;font-size:10px;min-height:52px}.custom-colour{padding:0 3px}.sliders{grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:17px}fieldset{margin-bottom:12px}.panel-actions{margin-top:17px}.panel h1{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}button:active{transform:none}}
.word-editor{width:min(480px,100%);margin:0 auto;pointer-events:auto;text-align:left}
.word-editor label{display:block;margin:0 0 8px 2px;font-size:12px;color:#b7c9d4}
.word-editor input{display:block;width:100%;min-height:52px;padding:12px 17px;font-size:18px;line-height:26px;color:#f0f5f7;caret-color:#b9e1ec;background:#101a25;border:1px solid #c7e1ee35;border-radius:14px;box-shadow:0 6px 24px #0002;outline:none;transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease)}
.word-editor input::placeholder{color:#8497a5}
.word-editor input:focus-visible{outline:none;border-color:#b9d8e68a;box-shadow:0 0 0 3px #b9d8e60a,0 6px 24px #0002}
.hint .film-note{margin-top:10px}
.film .hint{display:block;opacity:0;pointer-events:none}
.film .word-editor{pointer-events:none}
@media(max-width:650px){.word-editor input{min-height:48px;font-size:16px;line-height:24px;padding:10px 14px}.word-editor label{font-size:11px;margin-bottom:6px}.hint p{margin-top:10px}.hint{bottom:max(16px,env(safe-area-inset-bottom))}}