:root{--night: #080a18;--paper: #ecd6a4;--paper-hi: #f6e8c6;--ink: #2e1a0d;--gold: #f6b63c;--gold-deep: #b9822a;--terracotta: #a8452a;--slate: #3b4a6e;--olive: #6b6a2e;--serif: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--caps: "Cinzel", "Trajan Pro", "IM Fell English", Georgia, serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);overflow:hidden;color:var(--paper);font-family:var(--serif);-webkit-font-smoothing:antialiased}body{touch-action:none;user-select:none;-webkit-user-select:none}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}#verse{position:fixed;left:50%;bottom:13vh;transform:translate(-50%);width:min(820px,86vw);text-align:center;font-style:italic;font-size:clamp(19px,2.5vw,30px);line-height:1.42;letter-spacing:.012em;color:var(--paper-hi);text-shadow:0 0 22px rgba(8,10,24,.95),0 0 6px rgba(8,10,24,.9),0 1px 0 rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity 1.6s ease;z-index:5;text-wrap:balance}#verse.on{opacity:1}#verse .w{display:inline-block;opacity:0;transform:translateY(.25em);filter:blur(3px);animation:word 1.3s ease forwards;white-space:pre}@keyframes word{to{opacity:1;transform:none;filter:none}}#chapter{position:fixed;left:50%;top:16vh;transform:translate(-50%);text-align:center;pointer-events:none;z-index:5;font-family:var(--caps);letter-spacing:.42em;font-size:clamp(13px,1.5vw,19px);color:var(--gold);text-shadow:0 0 18px rgba(8,10,24,.9);opacity:0;transition:opacity 2.2s ease;text-indent:.42em;white-space:nowrap}#chapter.on{opacity:.95}#chapter small{display:block;margin-top:.7em;font-family:var(--serif);font-style:italic;letter-spacing:.06em;text-indent:0;font-size:1.1em;color:var(--paper-hi);opacity:.85}#chapter:before,#chapter:after{content:"✦";display:block;font-size:.8em;opacity:.8;letter-spacing:0;text-indent:0;margin:.6em 0}#hint{position:fixed;left:50%;bottom:5.2vh;transform:translate(-50%);font-size:clamp(13px,1.25vw,16px);letter-spacing:.08em;color:#f6e8c6b3;pointer-events:none;opacity:0;transition:opacity 1.4s ease;z-index:5;text-align:center;white-space:nowrap;text-shadow:0 0 12px rgba(8,10,24,.95)}#hint.on{opacity:1}#hint b{font-family:var(--caps);font-weight:400;color:var(--gold);letter-spacing:.16em}#margin{position:fixed;left:50%;bottom:1.6vh;transform:translate(-50%);display:flex;gap:clamp(6px,1vw,14px);z-index:4;pointer-events:none;opacity:0;transition:opacity 2s ease}#margin.on{opacity:1}#margin i{width:clamp(22px,2.6vw,34px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(246,182,60,.32);background:#080a1859 center / 150% no-repeat;display:block;transition:all 1.4s ease;filter:grayscale(1) brightness(.5)}#margin i.found{border-color:var(--gold);filter:none;box-shadow:0 0 14px #f6b63c8c;background-color:#2e1a0d8c}#title{position:fixed;inset:0;display:grid;place-items:center;z-index:20;transition:opacity 2.4s ease,visibility 0s linear 2.4s;background:radial-gradient(ellipse at 50% 42%,#080a188c,#080a18e6 70%)}#title.off{opacity:0;visibility:hidden;pointer-events:none}.leaf{position:relative;width:min(600px,88vw);padding:clamp(28px,5vw,56px) clamp(22px,4.5vw,54px) clamp(22px,3.6vw,40px);text-align:center;color:var(--ink);background:var(--paper) url(../assets/tex/paper.webp) center / 620px;border-radius:3px;box-shadow:0 0 0 1px #2e1a0d8c,0 0 0 7px var(--paper),0 0 0 8px #b9822acc,0 0 0 12px var(--paper),0 0 0 13px #2e1a0d66,0 30px 90px #000000b3,inset 0 0 70px #78461457}.leaf .orn{color:var(--gold-deep);font-size:20px;letter-spacing:.5em;text-indent:.5em}.leaf h1{font-family:var(--caps);font-weight:400;font-size:clamp(54px,10vw,92px);letter-spacing:.3em;text-indent:.3em;margin:.08em 0 0;line-height:1;color:var(--ink)}.leaf .sub{font-style:italic;font-size:clamp(18px,2.4vw,23px);margin:.5em 0 0;color:#5a3a1c;letter-spacing:.04em}.rule{display:flex;align-items:center;gap:12px;margin:1.3em auto 1.2em;width:78%;color:var(--gold-deep)}.rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(46,26,13,.6),transparent)}.rule b{font-weight:400;font-size:13px}.leaf .lede{font-size:clamp(15px,1.85vw,18.5px);line-height:1.62;margin:0 0 1.6em;color:#3c2412;font-style:italic;text-wrap:balance}.leaf button{font-family:var(--caps);font-size:clamp(13px,1.5vw,15px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--paper-hi);cursor:pointer;background:linear-gradient(#b0492c,#8f3820);border:1px solid #5d2212;border-radius:9px;padding:14px 30px 13px;box-shadow:inset 0 0 0 2px #f6b63c8c,inset 0 0 18px #00000040,0 3px 10px #2e1a0d66;transition:transform .25s ease,filter .25s ease,opacity .6s ease}.leaf button em{font-style:normal}.leaf button span{color:var(--gold);margin-right:.3em}.leaf button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}.leaf button:disabled{opacity:.6;cursor:default;filter:saturate(.5)}.leaf .keys{margin:1.7em 0 0;font-size:clamp(11.5px,1.25vw,13.5px);letter-spacing:.07em;color:#6b4a26}.leaf .keys b{font-family:var(--caps);font-weight:600;letter-spacing:.14em;color:#4a2c14}.leaf .past{margin:.8em 0 0;font-style:italic;font-size:14px;color:var(--terracotta);min-height:1em}#finale{position:fixed;inset:0;display:grid;place-items:center;text-align:center;z-index:15;pointer-events:none;opacity:0;transition:opacity 3s ease}#finale.on{opacity:1}#finale .line{font-style:italic;font-size:clamp(22px,3.6vw,46px);color:var(--paper-hi);letter-spacing:.02em;text-shadow:0 0 30px rgba(8,10,24,1),0 0 8px rgba(8,10,24,.9);opacity:0;transition:opacity 3.2s ease;position:absolute;width:min(900px,88vw);left:50%;top:50%;transform:translate(-50%,-50%);text-wrap:balance}#finale .line.on{opacity:1}#finale .again{pointer-events:auto;position:absolute;left:50%;bottom:12vh;transform:translate(-50%);opacity:0;transition:opacity 2.5s ease;font-family:var(--caps);letter-spacing:.3em;text-indent:.3em;font-size:14px;color:var(--gold);background:none;border:1px solid rgba(246,182,60,.6);border-radius:9px;padding:13px 26px;cursor:pointer}#finale .again.on{opacity:1}#finale .again:hover{background:#f6b63c1f}#finale .small{position:absolute;left:50%;bottom:6vh;transform:translate(-50%);font-size:14px;font-style:italic;color:#f6e8c699;opacity:0;transition:opacity 3s ease;white-space:nowrap}#finale .small.on{opacity:1}#mute{position:fixed;right:16px;top:14px;z-index:30;width:36px;height:36px;border-radius:50%;border:1px solid rgba(246,182,60,.4);background:#080a1859;color:var(--gold);font-size:16px;cursor:pointer;opacity:.55;transition:opacity .3s;font-family:var(--serif)}#mute:hover{opacity:1}#mute.off{color:#f6e8c659;text-decoration:line-through}#stick{position:fixed;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid rgba(246,182,60,.35);z-index:6;pointer-events:none;display:none}#stick i{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:50%;background:#f6b63c59;border:1px solid rgba(246,182,60,.7)}@media (max-width: 640px){#verse{bottom:17vh}.leaf .keys{display:none}}
