@font-face{font-family:"Caveat";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/karla-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/karla-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Base reset (the prototype previously got this from its host page) */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:14px;line-height:1.4}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one candlelit desk. A single sheet sits centred in warm darkness; quiet controls sit beneath it. */
:root{
  --night:#0e0a08;
  --soot:#1f1814;
  --ash:#a39488;
  --smoke:#dccfc3;
  --paper:#f0e6d4;
  --ink:#262a4d;
  --ember:#ff8a3d;
  --ember-deep:#d24f17;
  --rule:rgba(60,80,140,.17);
  --f-display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --f-ui:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--smoke);font-family:var(--f-ui);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
#app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(14px,env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-bottom,0px));box-sizing:border-box}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:780px;width:100%;margin:0 auto;transition:opacity .9s ease}
.mark{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:1.6rem;color:var(--paper);letter-spacing:.01em;line-height:1}
.mark small{display:inline-block;font-family:var(--f-ui);font-style:normal;font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-left:10px;vertical-align:middle}
.quiet{background:rgba(14,10,8,.4);border:1px solid rgba(220,207,195,.22);color:var(--ash);font:500 .7rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;padding:8px 13px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.toggles{display:flex;gap:8px}
.quiet:hover{color:var(--smoke);border-color:rgba(220,207,195,.45)}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-block:14px;transition:opacity .6s}
.paper{position:relative;width:520px;height:676px;max-width:100%;background:var(--paper);
  box-shadow:0 22px 48px -10px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.45);transition:box-shadow .3s}
.paper:focus-within{box-shadow:0 22px 48px -10px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.45),0 0 0 2px rgba(255,138,61,.28)}
.paper-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.paper textarea{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;resize:none;border:0;outline:none;margin:0;
  color:var(--ink);font-family:var(--f-hand);font-weight:400;caret-color:var(--ember-deep);
  background-color:transparent;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh,32px) - 1px),var(--rule) calc(var(--lh,32px) - 1px),var(--rule) var(--lh,32px));
  background-origin:content-box;background-clip:content-box;background-attachment:local;
  scrollbar-width:thin;scrollbar-color:rgba(38,42,77,.25) transparent}
.paper textarea::placeholder{color:rgba(38,42,77,.38)}
.hint{max-width:34rem;margin:0;text-align:center;color:var(--ash);font-size:.95rem;line-height:1.55;text-wrap:balance;min-height:3.1em;transition:opacity .5s}
.hint strong{color:var(--paper);font-weight:500}
.hint .fine{display:block;font-size:.78rem;letter-spacing:.04em;opacity:.8}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:46px}
.btn{font:600 .95rem var(--f-ui);letter-spacing:.02em;border-radius:999px;padding:12px 24px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .25s,background .25s}
.btn:active{transform:translateY(1px)}
.btn-fire{background:linear-gradient(180deg,#ffa25a,#e0581c);color:#1d0d04;box-shadow:0 0 0 1px rgba(255,165,95,.45),0 10px 32px -8px rgba(255,110,40,.6)}
.btn-fire:hover{box-shadow:0 0 0 1px rgba(255,180,120,.6),0 12px 40px -6px rgba(255,120,50,.75)}
.btn-fire:disabled{background:var(--soot);color:#7a6d64;box-shadow:0 0 0 1px rgba(220,207,195,.1);cursor:not-allowed}
.btn-ghost{background:rgba(14,10,8,.45);color:var(--smoke);border-color:rgba(220,207,195,.26)}
.btn-ghost:hover{border-color:rgba(220,207,195,.5)}
.lighting{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.lighting .lbl{font:500 .66rem var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(14,10,8,.55);border:1px solid rgba(220,207,195,.16)}
.seg button{background:none;border:0;color:var(--ash);font:500 .84rem var(--f-ui);padding:7px 15px;border-radius:999px;cursor:pointer;transition:color .2s,background .2s}
.seg button:hover{color:var(--smoke)}
.seg button[aria-checked="true"]{background:rgba(255,138,61,.15);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,138,61,.42)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.paper textarea:focus-visible{outline:none}

body:not([data-mode="write"]) #app{pointer-events:none}
body:not([data-mode="write"]) #app button{pointer-events:auto}
body[data-mode="ready"] #gl,body[data-mode="burning"] #gl{cursor:none}
body[data-mode="burning"] .top,body[data-mode="fading"] .top{opacity:.28}
body[data-mode="after"] .stage{opacity:0}

/* Writing on a touch screen (body[data-kb], see "keyboard" in main.js): the desk fits the visible area above the keyboard,
   the sheet keeps its width (so the text wraps as it will burn) and is cropped to the space left, Burn stays within reach. */
body[data-kb] #app{position:fixed;top:0;left:0;right:0;min-height:0;height:var(--vvh,100%);transform:translateY(var(--vvt,0px));padding-block:10px 8px}
body[data-kb] .top,body[data-kb] .hint,body[data-kb] .lighting,body[data-kb] .below,body[data-kb] .langbar{display:none}
body[data-kb] .stage{min-height:0;justify-content:flex-start;gap:8px;padding-block:0}
body[data-kb] .paper{flex:1 1 0;min-height:0;height:auto!important;overflow:hidden}
body[data-kb] .paper-bg{height:auto}
body[data-kb] .paper textarea{padding-bottom:8px!important}
body[data-kb] .actions{flex-wrap:nowrap;min-height:0;gap:8px}
body[data-kb] .actions .btn{padding:10px 18px;font-size:.9rem;white-space:nowrap}

/* Touch tutorial (see "coach" in main.js): an ink-coloured fingertip on the sheet; its ring fills while the match is held still */
.coach{position:fixed;left:0;top:0;z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(38,42,77,.2),rgba(38,42,77,.1) 62%,rgba(38,42,77,0) 71%);box-shadow:inset 0 0 0 1.5px rgba(38,42,77,.4)}
.coach::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--ember-deep) calc(var(--k,0)*1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
body:not([data-mode="ready"]) .coach{display:none}

.after{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px;animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both}
.after h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(2.4rem,7vw,3.6rem);color:var(--paper);margin:0;line-height:1;text-wrap:balance}
.after p{color:var(--ash);max-width:28rem;margin:0;line-height:1.6;text-wrap:balance}
.textbtn{background:none;border:0;color:var(--ash);font:400 .84rem var(--f-ui);min-height:44px;padding:0 12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(163,148,136,.4)}
.textbtn:hover{color:var(--smoke)}
.help{position:fixed;inset:0;z-index:5;display:flex;overflow-y:auto;background:rgba(14,10,8,.92);backdrop-filter:blur(5px);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.help-box{margin:auto;width:100%;max-width:30rem;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.help h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(2rem,7vw,3rem);color:var(--paper);margin:0;line-height:1.05;text-wrap:balance}
.help p{color:var(--ash);margin:0;line-height:1.6;text-wrap:balance}
.help-lines{width:100%;display:flex;flex-direction:column;gap:12px}
.help-line{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border-radius:16px;border:1px solid rgba(220,207,195,.2);background:rgba(31,24,20,.7)}
.help-name{color:var(--smoke);font-weight:600;line-height:1.35}
.help-call{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none}
.help-sub{color:var(--smoke);font-size:.92rem;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:3px}
.help-sub:hover,.help-intl:hover{color:var(--ember)}
.help-small{font-size:.8rem;color:var(--ash)}
.help-intl{color:var(--smoke);min-height:44px;align-self:center;display:inline-flex;align-items:center;justify-content:center;text-underline-offset:3px;text-decoration-color:rgba(220,207,195,.4)}
.help-emergency{font-size:.92rem}
.help-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.help-actions .btn{min-height:46px}
.breath{width:150px;height:150px;position:relative;display:grid;place-items:center;margin-block:6px}
.breath::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,138,61,.5);
  background:radial-gradient(circle,rgba(255,138,61,.22),rgba(255,138,61,0) 70%);animation:breathe 10s ease-in-out infinite}
.breath span{position:absolute;font:500 .72rem var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--smoke)}
.breath .in{animation:inLbl 10s linear infinite}
.breath .out{animation:outLbl 10s linear infinite}
@keyframes breathe{0%{transform:scale(.5)}40%{transform:scale(1)}100%{transform:scale(.5)}}
@keyframes inLbl{0%,37%{opacity:1}41%,97%{opacity:0}100%{opacity:1}}
@keyframes outLbl{0%,37%{opacity:0}41%,97%{opacity:1}100%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.paper.cssburn{animation:cssburn 3.2s ease-in forwards}
@keyframes cssburn{0%{filter:none}35%{filter:sepia(1) brightness(.8)}70%{filter:sepia(1) brightness(.25) blur(1px);opacity:.8}100%{filter:brightness(0) blur(6px);opacity:0;transform:translateY(-30px) scale(.96)}}
@media (prefers-reduced-motion: reduce){
  @keyframes breathe{0%{transform:scale(.8)}40%{transform:scale(1)}100%{transform:scale(.8)}}
  .after,.help{animation-duration:.01s}
}
@media (max-width:420px){.mark small{display:none}}

/* h1 mark, content below the stage, footer */
h1.mark{margin:0}
.below{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-left,0px)) max(28px,env(safe-area-inset-bottom,0px))}
body[data-mode]:not([data-mode="write"]) .below{display:none}
.about{max-width:40rem;margin:0 auto;padding:56px 0 8px;color:var(--ash);line-height:1.7;font-size:.98rem}
.about h2,.doc-body h1,.doc-body h2{font-family:var(--f-display);font-style:italic;font-weight:500;color:var(--paper);line-height:1.15;text-wrap:balance}
.about h2{font-size:1.7rem;margin:2.2rem 0 .6rem}
.about h2:first-child{margin-top:0}
.about h3{font-size:1rem;font-weight:600;color:var(--smoke);margin:1.6rem 0 .3rem}
.about p,.about ul,.about ol{margin:0 0 1rem}
.about li{margin-bottom:.4rem}
.about a,.doc-body a,.site-foot a,.applinks a{color:var(--smoke);text-underline-offset:3px;text-decoration-color:rgba(220,207,195,.4)}
.about a:hover,.doc-body a:hover,.site-foot a:hover,.applinks a:hover{color:var(--ember)}
.site-foot{max-width:40rem;margin:40px auto 0;padding:36px 0 0;border-top:1px solid rgba(220,207,195,.12);color:var(--ash);font-size:.84rem;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.site-foot p{margin:0}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.langs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.langs .cur{color:var(--paper)}
.langs .sep{opacity:.5}
.site-foot .contact{opacity:.85}

/* language suggestion */
.langbar{position:fixed;z-index:3;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;
  width:max-content;max-width:calc(100% - 24px);padding:7px 8px 7px 16px;border-radius:999px;background:rgba(14,10,8,.82);border:1px solid rgba(220,207,195,.2);
  color:var(--ash);font-size:.8rem;line-height:1.35;backdrop-filter:blur(6px)}
.langbar a{color:var(--paper)}
.langbar button{flex:none;background:none;border:0;color:var(--ash);font:400 1.2rem/1 var(--f-ui);width:28px;height:28px;border-radius:50%;cursor:pointer}
.langbar button:hover{color:var(--smoke)}
body[data-mode]:not([data-mode="write"]) .langbar{display:none}
@media (min-width:900px){.langbar{left:16px;transform:none}}

/* legal and 404 pages */
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:40rem;margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) 16px 0}
.doc-top .mark,.doc-top .quiet{text-decoration:none;display:inline-block}
.doc-body{max-width:40rem;margin:0 auto;padding:48px 16px 24px;color:var(--ash);line-height:1.7}
.doc-body h1{font-size:clamp(2rem,6vw,2.8rem);margin:0 0 1.2rem}
.doc-body h2{font-size:1.5rem;margin:2.2rem 0 .5rem}
.doc-body h3{font-size:1rem;font-weight:600;color:var(--smoke);margin:1.6rem 0 .3rem}
.doc-body p,.doc-body ul,.doc-body ol{margin:0 0 1rem}
.doc-body strong{color:var(--smoke);font-weight:600}
.doc .site-foot{margin-bottom:32px;padding-inline:16px}
.notfound{text-align:center;padding-top:96px}
.applinks{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:1.6rem}
.applinks a{font-family:var(--f-display);font-style:italic;font-size:1.4rem}
@media (max-width:420px){.mark{font-size:1.4rem}.quiet{white-space:nowrap;padding:8px 10px;letter-spacing:.08em}.toggles{gap:6px}}