*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1e1e1e}body{display:grid;place-items:center;color:#ecebed;font-family:Arial,sans-serif}.station{position:relative;width:min(100vw,137.786svh,1280px);aspect-ratio:1145/831;container-type:inline-size;isolation:isolate}.frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.orb{position:absolute;left:46.11%;top:14.68%;width:47.08%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1px #ffffff09,inset 0 -20px 50px #0a284766}.orb video{width:100%;height:100%;display:block;object-fit:cover;filter:brightness(.87);transition:filter .8s}.orb .glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,#ffffff09,transparent 42%),radial-gradient(circle at 50% 40%,transparent 51%,#0006 88%,#000a 100%);box-shadow:inset 0 0 35px #0008}.station[data-state="finished"] .orb video{filter:brightness(.65)}.duration{position:absolute;left:9.26%;top:26%;width:31.6%;display:flex;align-items:center;justify-content:space-between;gap:1cqw;font-size:1.35cqw;color:#d6d2df}select{font:inherit;color:#eee;background:#22212a;border:1px solid #898594;padding:.6cqw 1cqw;min-width:12cqw;border-radius:2px}.player{position:absolute;left:9.26%;top:32%;width:31.6%;aspect-ratio:362/197}.player img{width:100%;height:100%;display:block}.transport{position:absolute;left:5.58%;top:55.1%;width:89.25%;height:17.63%;display:grid;grid-template-columns:repeat(5,1fr)}button{cursor:pointer}button:disabled{cursor:default}.transport button{display:grid;place-items:center;padding:0;border:0;background:transparent url('assets/button-raised.svg') center/100% 100% no-repeat;color:#212121;position:relative;border-radius:0;appearance:none}
.transport button svg{width:24%;height:44%;fill:currentColor;pointer-events:none}
.transport button:disabled{color:#676767}
.transport button:active:not(:disabled),.station[data-state="playing"] #play{background-image:url('assets/button-pressed.svg');color:#212121}
.transport button:active:not(:disabled) svg,.station[data-state="playing"] #play svg{transform:translate(1px,1px)}
.transport button:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #9a91ff;outline-offset:3px;z-index:2}#progress{position:absolute;left:5.3%;top:82.2%;width:88.9%;height:7.1%;background:#bdbdbd;overflow:hidden}#progress-fill{width:0%;height:100%;background:#2226ff;transition:width .15s linear}#video-error{position:absolute;left:50%;top:83%;width:38%;font-size:1.3cqw;color:#f3d5d5}dialog{max-width:min(450px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:auto;border:2px solid;border-color:white #53515e #53515e white;background:#ccc9d3;color:#201e29;padding:24px;box-shadow:8px 8px 0 #0008;font:15px/1.5 Arial}dialog::backdrop{background:#0009}dialog h1{font:25px Georgia;margin:0 0 16px}dialog button{font:14px 'Courier New';padding:10px;background:#dedbe5;border:2px solid;border-color:white #555 #555 white}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The entry and its release stay inside the orb's circular mask. */
.duration{top:31%}.player{top:37%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.intention-form{position:absolute;left:12%;top:50%;width:76%;transform:translateY(-50%);text-align:center;z-index:3}
.intention-entry{display:flex;align-items:stretch;background:#11121edb;border:1px solid #bdb7d5;border-radius:3px;box-shadow:inset 1px 1px 2px #000b,0 4px 18px #0006;transition:border-color .2s,box-shadow .2s}
.intention-entry:focus-within{border-color:#d9d5fb;box-shadow:0 0 18px #8784cf40}
#words{display:block;min-width:0;flex:1;resize:none;border:0;background:transparent;color:#f7f4ff;padding:1.05cqw 1.1cqw;height:4.2cqw;max-height:7cqw;font:clamp(12px,1.5cqw,20px)/1.4 Georgia,serif;scrollbar-width:thin;scrollbar-color:#777 #111;outline:none}
#words::placeholder{color:#b6b0c8}#words:focus-visible{outline:none}
#send{width:3.6cqw;min-width:28px;color:#d9d6ff;background:#282536a6;border:0;border-left:1px solid #bdb7d555;font:1.8cqw Arial}#send:hover{background:#49425b}#send:disabled{opacity:.4}
#enter-hint{display:block;margin-top:.7cqw;font:clamp(10px,1.05cqw,14px)/1.2 'Courier New',monospace;color:#d9d3e9;text-shadow:0 1px 4px #000,0 0 12px #000}
#save-error{font:12px/1.4 Arial;color:#ffe2d5;background:#261820;padding:6px;margin-top:6px}#save-error:not([hidden]){display:block}
#releases{position:absolute;inset:0;pointer-events:none;z-index:4}
.release-window{position:absolute;inset:0;pointer-events:none}
.window-ghost,.intention-window{position:absolute;left:50%;top:45%;width:76%;height:16%;transform-origin:center;animation:window-to-orb 1.75s steps(18,end) both;animation-delay:var(--delay,0ms);border-radius:0;box-sizing:border-box}
.window-ghost{border:1px solid #c5d7ff;background:transparent;box-shadow:1px 1px 0 #000;opacity:.65}
.window-ghost::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:12%;background:#565afc}
.intention-window{height:auto;min-height:14%;max-height:30%;overflow:hidden;background:#c0c0c0;color:#111;padding:2px;border:2px solid;border-color:#fff #333 #333 #fff;box-shadow:1px 1px 0 #000;animation-delay:0ms}
.intention-window::before{content:"";display:block;height:1cqw;min-height:4px;background:#000080;border-right:1cqw solid #bfbfbf}
.intention-window p{margin:.65cqw .8cqw;font:clamp(12px,1.4cqw,18px)/1.3 'Courier New',monospace;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
@keyframes window-to-orb{0%,12%{transform:translate(-50%,-15%) scale(1);opacity:1}35%{transform:translate(-40%,-75%) scale(.76);opacity:1}65%{transform:translate(-75%,-150%) scale(.4);opacity:.9}90%{transform:translate(-50%,-235%) scale(.08);opacity:.65}100%{transform:translate(-50%,-260%) scale(.015);opacity:0}}
#intentions-history{margin:20px 0}#history-list{max-height:220px;overflow:auto;padding-left:22px}#history-list li{margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}#history-list time{display:block;font:11px Arial;color:#625c71;margin-top:3px}
@media(prefers-reduced-motion:reduce){.window-ghost{display:none}.intention-window{animation:quiet-send 1s ease-out forwards}@keyframes quiet-send{0%,35%{opacity:1;transform:translate(-50%,-70%)}100%{opacity:0;transform:translate(-50%,-70%)}}}
#words{min-height:38px;padding:clamp(6px,1.05cqw,14px) clamp(6px,1.1cqw,14px)}#send{font-size:clamp(18px,1.8cqw,24px)}


.preferences{position:absolute;left:9.26%;top:64%;width:31.6%;display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:1cqw .7cqw;font-size:1.3cqw;color:#d6d2df}
.preferences select{width:100%;min-width:0;padding:.6cqw .5cqw;font-size:1.18cqw}.preferences input{width:100%;min-width:0;margin:0;accent-color:#aaa2e9;cursor:pointer}select:disabled{opacity:.6}
.word-echo{position:absolute;left:50%;top:47%;width:76%;margin:0;color:#f3efff;font:clamp(12px,1.6cqw,22px)/1.35 Georgia,serif;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;max-height:30%;overflow:hidden;text-shadow:0 1px 4px #000,0 0 8px #8181f6;animation:words-to-orb 3s cubic-bezier(.2,.55,.45,1) both;animation-delay:var(--delay,0ms)}
.word-echo:not(:last-child){color:#cbcaff;opacity:.5}
@keyframes words-to-orb{0%{left:50%;top:49%;transform:translate(-50%,-50%) scale(.9);opacity:0}12%{opacity:var(--strength,1)}45%{left:var(--mid-x);top:var(--mid-y);transform:translate(-50%,-50%) scale(.62) rotate(var(--tilt));opacity:var(--strength,1)}80%{left:var(--end-x);top:var(--end-y);transform:translate(-50%,-50%) scale(.5) rotate(var(--tilt));opacity:.42}100%{left:var(--end-x);top:var(--end-y);transform:translate(-50%,-50%) scale(.35) rotate(var(--tilt));opacity:0}}
@media(prefers-reduced-motion:reduce){.word-echo:not(:last-child){display:none}.word-echo{animation:quiet-send 1s ease-out forwards;animation-delay:0ms}}

.archive-launch{position:absolute;left:9.26%;top:22%;width:31.6%;padding:1cqw;background:#c0c0c0;color:#111;border:3px solid;border-color:#fff #444 #444 #fff;font:bold 1.6cqw 'Courier New',monospace;box-shadow:2px 2px #000}.archive-launch:active{border-color:#444 #fff #fff #444}
#archive-dialog{width:min(1100px,96vw);height:94svh;max-width:96vw;max-height:94svh;padding:0;background:#000;color:#eee;overflow:hidden}#archive-dialog[open]{display:flex;flex-direction:column}
.archive-titlebar{background:linear-gradient(90deg,#000080,#594899);display:flex;align-items:center;justify-content:space-between;padding:5px 8px;color:#fff;flex-shrink:0}.archive-titlebar h1{font:bold 17px 'Courier New',monospace;margin:0}.archive-titlebar button{padding:0 7px;font:bold 22px Arial;line-height:24px}
.archive-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px;background:#c0c0c0;flex-shrink:0}.archive-toolbar button,#archive-import button{font:12px 'Courier New',monospace;padding:7px 9px}.archive-toolbar button[aria-pressed="true"]{background:#ddd6f3;border-color:#555 #fff #fff #555}
.archive-note{font:12px/1.4 Arial;color:#aaa;margin:0;padding:10px 14px;border-bottom:1px solid #333;flex-shrink:0}
#archive-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-color:#726581 #111}
#archive-status{font:13px/1.4 Arial;color:#d8c9f5;margin:0;padding:0 14px;flex-shrink:0}#archive-status:not(:empty){padding:10px 14px}
#archive-import{background:#ded9e8;color:#111;padding:12px;flex-shrink:0;font:14px Arial}#archive-import p{margin:0 0 10px}

/* Existing CSS WordArt styles sit inside a separate motion wrapper. */
.preferences [hidden]{display:none}
.wordart-send{position:absolute;left:50%;top:43%;width:72%;font-size:clamp(18px,3.2cqw,42px);text-align:center;animation:wordart-to-orb 3.1s ease-in-out both;filter:drop-shadow(0 3px 2px #0008)}
.wordart-send .wordart{display:block}.wordart-send .text{display:block;max-height:32cqw;overflow:hidden}
@keyframes wordart-to-orb{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}18%,36%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}65%{opacity:1;transform:translate(-35%,-135%) scale(.72) rotate(10deg)}100%{opacity:0;transform:translate(-50%,-220%) scale(.03) rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){.wordart-send{animation:quiet-send 1s ease-out forwards}}

#archive-reset{background:#ded9e8;color:#111;padding:12px;font:14px/1.4 Arial;flex-shrink:0}#archive-reset p{margin:0 0 10px}#archive-reset button{font:12px 'Courier New',monospace;margin-right:5px;padding:7px 9px}#reset-confirm{color:#7b133a}#archive-clear:disabled{opacity:.45}

#download-help{background:#e7def5;color:#241c32;padding:14px 20px;border:1px solid #77678e;max-height:42vh;overflow:auto}#download-help p{margin:8px 0}#backup-copy{display:block;width:100%;height:90px;background:white;color:#222;font:13px monospace;margin:8px 0}#download-help[hidden],#backup-manual[hidden]{display:none}
