@font-face{
  font-family:"Cormorant Garamond";
  src:url("./fonts/cormorant-garamond-semibold-italic-latin.woff2") format("woff2");
  font-style:italic;
  font-weight:600;
  font-display:swap;
}
:root{
  --night:#0a0f1f;
  --amber:#ffb347;
  --ink:#f3ede4;
  --ink-2:rgba(243,237,228,.72);
  --sans:"Avenir Next","Segoe UI","Helvetica Neue","Nimbus Sans","Liberation Sans",Arial,sans-serif;
  --glide:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
main{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(2,4,10,.55) 100%),linear-gradient(180deg,rgba(2,4,10,.35),rgba(2,4,10,0) 18%,rgba(2,4,10,0) 70%,rgba(2,4,10,.45))}
.frame{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 120px rgba(0,0,0,.35)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hint{position:absolute;left:50%;top:clamp(62px,11vh,110px);transform:translateX(-50%);margin:0;padding:9px 18px;border-radius:999px;font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;color:var(--ink-2);background:rgba(8,12,26,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);white-space:nowrap;pointer-events:none;transition:opacity 1.2s var(--glide),transform 1.2s var(--glide)}
.hint.gone{opacity:0;transform:translate(-50%,-8px)}

.panel{position:absolute;right:clamp(14px,2.6vw,36px);bottom:clamp(16px,3.6vh,38px);display:flex;align-items:center;gap:6px;padding:7px;border-radius:18px;background:rgba(8,12,26,.5);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 18px 50px -20px rgba(0,0,0,.8);font-family:var(--sans)}
.icon-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.05);color:var(--ink-2);font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.icon-btn:hover{background:rgba(255,255,255,.11);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;flex:none}
#sound[aria-pressed="true"]{color:var(--ink);background:rgba(255,179,71,.14);box-shadow:inset 0 0 0 1px rgba(255,179,71,.35)}
#sound .waves{opacity:.3;transition:opacity .3s}
#sound[aria-pressed="true"] .waves{opacity:1}
#sound .slash{transition:opacity .3s}
#sound[aria-pressed="true"] .slash{opacity:0}

.brush{position:fixed;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 24px rgba(255,255,255,.08);opacity:0;transition:opacity .4s,width .25s,height .25s,margin .25s;z-index:5}
.brush.on{opacity:1}
.brush.down{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(255,255,255,.04)}

@media (max-width:720px){
  .panel{right:12px;bottom:12px}
  .icon-btn{padding:0 11px}
  .icon-btn .lbl{display:none}
  .hint{top:auto;bottom:76px;font-size:11.5px}
  #view{cursor:default}
}
@media (hover:none){.brush{display:none}#view{cursor:default}}
@media (prefers-reduced-motion:reduce){
  .hint{transition:none}
}
.arca-nav{position:fixed;inset:0 0 auto;background:linear-gradient(#10192880,transparent)}
.letter-tools{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3.6vh,38px);max-width:55%}
.window-title{font:italic 28px Georgia,serif;margin:0 0 12px}
.window-title span{font:10px var(--sans);letter-spacing:.12em;opacity:.65}
.letter-tools .icon-btn{letter-spacing:.04em;text-transform:none;border:1px solid #ffffff30;font-size:12px}
.icon-btn:disabled{opacity:.4;cursor:default}
.letter-status{position:absolute;left:24px;right:24px;top:90px;text-align:center;font-size:13px;line-height:1.6;color:var(--ink);pointer-events:none}
.letter-status:empty{display:none}
body.has-error .hint{display:none}
#share-dialog{color:var(--ink);background:#172334;border:1px solid #d6dde433;border-radius:18px;padding:clamp(22px,4vw,38px);width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 24px 100px #0008}
#share-dialog::backdrop{background:#040c18a8;backdrop-filter:blur(8px)}
#share-dialog h2{font:italic 32px/1.2 Georgia,serif;margin:12px 0 24px}
#share-dialog label{display:block;font-size:12px;margin-bottom:10px}
#share-dialog input{width:100%;border:1px solid #ffffff30;border-radius:8px;background:#ffffff08;color:var(--ink);padding:14px;font:16px/1.5 var(--sans)}
#share-dialog p{font-size:13px;line-height:1.7;color:var(--ink-2)}
.editor-note{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-top:8px}
.dialog-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px}
.dialog-actions button,.dialog-actions a{font:12px var(--sans);padding:12px;border-radius:8px;border:1px solid #ffffff30;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.dialog-actions button[type=submit],#copy-letter{background:#e7ded3;color:#172334;border-color:#e7ded3}
#editor-error{color:#ffd0ac}
.noscript{position:fixed;inset:30% 20px auto;text-align:center;z-index:20;background:#172334;padding:30px}
.noscript a{color:inherit}
@media(max-width:720px){.letter-tools{left:16px;bottom:16px;max-width:calc(100% - 136px)}.letter-tools .icon-btn{height:42px;padding:0 10px;font-size:11px}.window-title{font-size:24px}.window-title span{display:none}.hint{bottom:124px;max-width:calc(100% - 32px);white-space:normal;text-align:center}.panel{bottom:16px}.letter-status{top:72px}.brush{z-index:1}}
@media(max-height:480px){.window-title{display:none}.hint{top:72px;bottom:auto}.letter-tools{bottom:12px}}

/* The native textarea keeps selection, IME input and a blinking caret on the glass. */
.glass-editor{position:fixed;z-index:6;left:32px;right:32px;top:var(--editor-top,50%);margin:0}
.glass-editor[hidden]{display:none}
#letter-text{display:block;width:100%;padding:0 4px;margin:0;border:0;border-radius:0;resize:none;background:transparent;color:rgba(255,246,232,.96);caret-color:#fff6e8;font:italic 600 48px/1.36 "Cormorant Garamond",Georgia,serif;text-align:center;text-shadow:0 2px 18px #0f152bcc;overflow-wrap:anywhere;outline:none;touch-action:auto;scrollbar-width:thin;scrollbar-color:#ffffff50 transparent}
#letter-text::placeholder{color:#fff6e899;opacity:1}
#letter-text::selection{background:#b5cce04d}
.glass-editor-footer{text-align:center;margin:20px auto 0;max-width:360px;font-size:11px;color:var(--ink-2)}
.glass-editor-footer p{margin:8px 0;line-height:1.4}
.glass-editor-footer .editor-note{justify-content:center;gap:16px;font-size:10px}
.glass-editor-footer #editor-error:empty{display:none}
.editor-actions{display:flex;justify-content:center;gap:8px;margin-top:14px}
.editor-actions .icon-btn{background:#101c3080;border:1px solid #ffffff30;text-transform:none;letter-spacing:.04em;color:var(--ink);min-width:76px;justify-content:center}
.editor-actions button[type=submit]{background:#ede5d9;color:#172334}
body.is-editing .letter-tools,body.is-editing .panel,body.is-editing .hint,body.is-editing .letter-status,body.is-editing .brush{visibility:hidden}
body.is-editing #view{pointer-events:none}
@media(max-height:480px){.glass-editor-footer{margin-top:10px}.glass-editor-footer #editor-help{display:none}.editor-actions{margin-top:8px}}

.background-picker{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.background-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:48px;min-height:52px;padding:5px 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:10px var(--sans);cursor:pointer}
.swatch-color{display:block;width:24px;height:24px;border-radius:50%;border:1px solid #ffffff50;box-shadow:0 1px 6px #0003}
.background-swatch[aria-pressed=true]{color:var(--ink)}
.background-swatch[aria-pressed=true] .swatch-color{outline:1.5px solid #fff6e8;outline-offset:3px}
.background-swatch:hover{background:#ffffff0d;color:var(--ink)}
@media(max-height:480px){.background-picker{margin-bottom:4px}.background-swatch{min-height:48px;gap:4px}}

.glass-editor.compact .glass-editor-footer{margin-top:10px}
.glass-editor.compact #editor-help{display:none}
.glass-editor.compact .editor-actions{margin-top:8px}
.glass-editor.compact .background-picker{margin-bottom:4px}
.glass-editor.compact .background-swatch{min-height:48px;gap:4px}

#wipe[aria-pressed="true"]{color:var(--ink);background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

.hint{white-space:pre-line;line-height:1.6}

.dear-startup-error{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:28px;background:#172334;border:1px solid #ffffff30;border-radius:18px;text-align:center}
.dear-startup-error h2{font:italic 28px Georgia,serif;margin:0 0 16px}
.dear-startup-error p{font-size:14px;line-height:1.6}
.dear-startup-error button,.dear-startup-error a{display:inline-block;padding:12px;font:13px var(--sans);color:var(--ink)}
.dear-startup-error button{border:1px solid #ffffff50;border-radius:8px;background:transparent;cursor:pointer}