:root{--bg: #0a0a0c;--cover: #0c0c0e;--paper: #e9e2cd;--paper-deep: #d8cfb4;--ink: #241d15;--line: rgba(112, 96, 68, .3);--silver: #cfcabe;--silver-dim: rgba(207, 202, 190, .45);--blood: #7d0c10;--blood-glow: rgba(160, 20, 26, .55);--pw: min(92vw, 430px, calc((100dvh - 210px) / 1.42));--ph: calc(var(--pw) * 1.42);--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");--leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23l)' opacity='0.6'/%3E%3C/svg%3E")}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:radial-gradient(120% 90% at 50% 8%,#1b1b20,#0e0e11 46%,#050506);color:var(--silver);font-family:IM Fell English,serif;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:var(--grain);opacity:.05;pointer-events:none;z-index:999}.stage{height:100dvh;display:flex;align-items:center;justify-content:center;padding-bottom:92px;padding-top:52px}.navbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:linear-gradient(to bottom,#08080aeb,#08080a00);z-index:600}.nav-btn{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(207,202,190,.14);border-radius:12px;background:#121216b3;color:var(--silver-dim);cursor:pointer;transition:all .25s ease}.nav-btn:active{color:#f1ede1;border-color:#a0141a8c}.nav-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-title{flex:1;min-width:0;border:none;background:transparent;text-align:center;font-family:UnifrakturMaguntia,serif;font-size:20px;letter-spacing:.04em;color:#e8e2d0d9;outline:none;padding:4px 6px;border-radius:8px;transition:background .25s ease,box-shadow .25s ease;user-select:text;-webkit-user-select:text}.nav-title:focus{background:#121216d9;box-shadow:0 0 0 1px #a0141a73,0 0 14px #7d0c1040;color:#f1ede1}.nav-ghost{flex:0 0 40px}.library{height:100dvh;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 0%,#26201b,#14100d 55%,#080606);overflow:hidden}.library:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:var(--leather);opacity:.08;mix-blend-mode:overlay;pointer-events:none}.lib-head{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}.lib-title{flex:1;text-align:center;font-family:UnifrakturMaguntia,serif;font-weight:400;font-size:26px;color:#e8e2d0e6;text-shadow:0 0 16px rgba(255,255,255,.08)}.nav-btn--plus{border-color:#a0141a80;background:radial-gradient(80% 120% at 50% 0%,#7d0c1066,#7d0c101a);color:#f1ede1;box-shadow:0 0 14px #7d0c104d}.shelves{flex:1;overflow-y:auto;padding:12px 16px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.shelf-row{display:flex;flex-direction:column;margin-bottom:6px}.shelf-books{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;min-height:138px;padding:0 6px}.shelf-board{height:14px;border-radius:2px;background:linear-gradient(to bottom,#3a2c1f,#2a1f15 40%,#1a120c);box-shadow:0 2px #000000b3,0 10px 18px #0000008c,inset 0 1px #ffebc81a;position:relative}.shelf-board:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--grain);opacity:.15;mix-blend-mode:overlay}.mini-book{position:relative;aspect-ratio:1 / 1.42;max-height:128px;width:100%;border:none;border-radius:2px 5px 5px 2px;background:linear-gradient(115deg,#ffffff0d,#fff0 30%),radial-gradient(140% 110% at 30% 20%,#131316 0%,var(--cover) 55%,#050507 100%);box-shadow:inset 0 0 0 1px #ffffff0d,inset 4px 0 8px #0000008c,0 6px 14px #000000a6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;justify-self:center;min-width:0;--title-size: 24px}.mini-book:active{transform:translateY(2px) scale(.98)}.mini-book--current{box-shadow:inset 0 0 0 1px #a0141a80,inset 4px 0 8px #0000008c,0 6px 14px #000000a6,0 0 18px #7d0c1059}.mini-title{display:flex;flex-direction:column;align-items:center;line-height:.98;font-family:Pirata One,serif;font-weight:400;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(175deg,#f5f2ea 8%,#b9b4a6 38%,#8e897c 52%,#e6e2d6 70%,#a09b8d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9));max-width:90%;overflow:hidden}.mini-sigil{font-size:13px;color:#cfcabe4d}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#030304c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:900;animation:overlay-in .25s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal-card{width:min(86vw,340px);padding:26px 22px 20px;border-radius:14px;background:linear-gradient(115deg,#ffffff0a,#fff0 35%),radial-gradient(140% 110% at 30% 0%,#17171b,#0b0b0d 70%);border:1px solid rgba(207,202,190,.14);box-shadow:0 24px 60px #000c,inset 0 1px #ffffff0d;display:flex;flex-direction:column;gap:16px;animation:card-in .3s cubic-bezier(.25,.8,.3,1.2)}@keyframes card-in{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}.modal-title{font-family:UnifrakturMaguntia,serif;font-weight:400;font-size:24px;text-align:center;color:#e8e2d0e6}.modal-input{border:1px solid rgba(207,202,190,.2);border-radius:10px;background:#060608cc;padding:12px 14px;font-family:Pirata One,serif;font-size:19px;letter-spacing:.03em;color:#ece7da;caret-color:var(--blood);outline:none;text-align:center;user-select:text;-webkit-user-select:text}.modal-input:focus{border-color:#a0141a8c;box-shadow:0 0 14px #7d0c1040}.modal-input::placeholder{font-family:IM Fell English,serif;font-style:italic;font-size:15px;color:#cfcabe4d}.modal-actions{display:flex;gap:10px}.modal-btn{flex:1;padding:11px 0;border-radius:10px;border:1px solid rgba(207,202,190,.16);background:transparent;font-family:IM Fell English,serif;font-size:15px;color:var(--silver-dim);cursor:pointer;transition:all .2s ease}.modal-btn--primary{border-color:#a0141a8c;background:radial-gradient(80% 140% at 50% 0%,#7d0c1073,#7d0c101f);color:#f1ede1;box-shadow:0 0 16px #7d0c1040}.modal-btn:disabled{opacity:.4;cursor:default}.book-wrap{perspective:2400px;perspective-origin:50% 45%;filter:drop-shadow(0 30px 46px rgba(0,0,0,.65));transition:transform .9s cubic-bezier(.25,.8,.3,1)}@media(min-width:900px){.book-wrap--open{transform:translate(calc(var(--pw) / 2))}}.book{position:relative;width:var(--pw);height:var(--ph);transform-style:preserve-3d}.page-stack{position:absolute;top:7px;bottom:9px;right:1px;width:4px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(to right,#e6dfca 0,#e6dfca 1px,#c3baa0 1px,#c3baa0 2px,#d8d0b6 2px,#d8d0b6 3px);box-shadow:inset -1px 0 2px #00000059;z-index:0}.left-stack{position:absolute;top:7px;bottom:9px;left:-7px;width:8px;border-radius:3px 0 0 3px;background:repeating-linear-gradient(to right,#cfc7ad 0,#cfc7ad 1px,#b5ac92 1px,#b5ac92 2px,#ddd5bb 2px,#ddd5bb 3px);box-shadow:-2px 0 #0a0a0cf2,-5px 2px 10px #0009,inset 1px 0 2px #0000004d;z-index:0}.book--closed .page-stack,.book--closed .left-stack{display:none}@media(max-width:899px){.sheet--flipped:not(.sheet--flipping){visibility:hidden}}@media(min-width:900px){.left-stack{display:none}}.sheet{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform-origin:left center;will-change:transform}.sheet:not(.sheet--cover){top:6px;bottom:8px;right:5px;left:0}.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform:translateZ(0)}.face--back{transform:rotateY(180deg) translateZ(.4px)}.face-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to right,#000000bf,#0000001f 55%,#0000 78%);opacity:0;z-index:40}.face-shade--back{background:linear-gradient(to left,#000000bf,#0000001f 55%,#0000 78%)}.cover-front,.cover-back{position:absolute;top:0;right:0;bottom:0;left:0}.cover-front{background:linear-gradient(115deg,#ffffff0b,#fff0 28%),radial-gradient(140% 110% at 30% 20%,#131316 0%,var(--cover) 55%,#050507 100%);border-radius:3px 10px 10px 3px;box-shadow:inset 0 0 0 1px #ffffff0a,inset -3px 0 8px #0009,inset 6px 0 12px #0000008c}.cover-front:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--leather);opacity:.16;border-radius:inherit;mix-blend-mode:overlay}.cover-front:after{content:"";position:absolute;top:10px;bottom:10px;left:13px;width:2px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.07) 12%,rgba(255,255,255,.07) 88%,transparent);box-shadow:4px 0 6px #00000080}.cover-frame{position:absolute;top:8%;right:9%;bottom:12%;left:12%;border:1px solid rgba(207,202,190,.13);outline:1px solid rgba(0,0,0,.6);outline-offset:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh}.cover-frame{--title-size: clamp(56px, calc(var(--pw) * .24), 108px)}.cover-title{display:flex;flex-direction:column;align-items:center;line-height:.94;font-family:Pirata One,serif;font-weight:400;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(175deg,#f5f2ea 8%,#b9b4a6 38%,#8e897c 52%,#e6e2d6 70%,#a09b8d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 18px rgba(255,255,255,.07))}.cover-sigil{font-size:clamp(30px,calc(var(--pw) * .11),48px);color:#cfcabe40;text-shadow:0 1px 0 rgba(0,0,0,.9)}.cover-hint{position:absolute;bottom:4.5%;left:0;right:0;text-align:center;font-style:italic;font-size:13px;letter-spacing:.22em;color:#cfcabe4d;animation:hint-breathe 3.2s ease-in-out infinite}@keyframes hint-breathe{0%,to{opacity:.35}50%{opacity:.85}}.cover-back{background:radial-gradient(120% 100% at 50% 30%,#121214,#070708 70%);border-radius:10px 3px 3px 10px;box-shadow:inset 0 0 0 1px #ffffff08,inset -8px 0 16px #0009;padding:9% 9% 9% 10%;display:flex;flex-direction:column;gap:3.2%}.cover-back:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--leather);opacity:.1;mix-blend-mode:overlay}.rules-title{font-family:UnifrakturMaguntia,serif;font-weight:400;font-size:clamp(26px,calc(var(--pw) * .085),38px);color:#ece7da;text-align:center;text-shadow:0 0 14px rgba(255,255,255,.12);margin-bottom:2%}.rules-list{list-style:none;display:flex;flex-direction:column;gap:4.5%;flex:1;justify-content:center}.rules-list li{font-size:clamp(12.5px,calc(var(--pw) * .037),16px);line-height:1.5;color:#e8e2d0d1;padding-left:18px;position:relative}.rules-list li:before{content:"•";position:absolute;left:2px;color:var(--blood);text-shadow:0 0 8px var(--blood-glow)}.rules-list li:first-child{font-family:Pirata One,serif;font-size:clamp(15px,calc(var(--pw) * .048),21px);color:#f1ede1}.rules-sigil{text-align:center;font-size:20px;color:#7d0c10cc;text-shadow:0 0 12px var(--blood-glow)}.page-face-content,.verso{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(130% 100% at 50% 0%,#ffffff40,#fff0 40%),radial-gradient(120% 120% at 90% 100%,#785f372e,#785f3700 45%),linear-gradient(to right,var(--paper-deep) 0%,var(--paper) 7%,var(--paper) 100%);display:flex;flex-direction:column}.page-face-content:before,.verso:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--grain);opacity:.09;pointer-events:none}.verso{background:radial-gradient(130% 100% at 50% 0%,#ffffff40,#fff0 40%),linear-gradient(to left,var(--paper-deep) 0%,var(--paper) 7%,var(--paper) 100%)}.verso:after{content:"";position:absolute;top:42px;right:16px;bottom:34px;left:22px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--line) 29px,var(--line) 30px);pointer-events:none}.page-head{padding:12px 0 8px;text-align:center}.page-head-title{font-family:UnifrakturMaguntia,serif;font-size:15px;letter-spacing:.12em;color:#241d1561}.page-body{flex:1;position:relative;margin:2px 16px 4px 22px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--line) 29px,var(--line) 30px)}.page-editor{position:absolute;top:0;right:0;bottom:0;left:0;outline:none;overflow-y:auto;font-family:Pirata One,serif;font-size:21px;line-height:30px;color:var(--ink);caret-color:var(--blood);word-break:break-word;padding-right:4px;z-index:2}.page-editor:empty:before{content:attr(data-placeholder);font-family:IM Fell English,serif;font-style:italic;font-size:16px;color:#241d154d}.page-editor[contenteditable=false]{pointer-events:none}.ink-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.ink-canvas--active{pointer-events:auto;touch-action:none;cursor:crosshair}.page-photos{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.page-photo{position:absolute;pointer-events:auto;touch-action:none;background:#f6f1e4;padding:5px 5px 14px;box-shadow:0 3px 10px #00000059,0 1px 2px #0000004d;cursor:grab}.page-photo img{display:block;width:100%;filter:sepia(.28) contrast(.95) brightness(.98)}.page-photo--selected{outline:1.5px dashed var(--blood);outline-offset:3px}.photo-delete{position:absolute;top:-12px;right:-12px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#141416;color:#e8e2d0;font-size:12px;cursor:pointer}.photo-resize{position:absolute;bottom:-10px;right:-10px;width:22px;height:22px;border-radius:50%;background:var(--blood);box-shadow:0 0 8px var(--blood-glow);cursor:nwse-resize}.page-number{text-align:center;padding:4px 0 8px;font-family:UnifrakturMaguntia,serif;font-size:13px;color:#241d1559}.verso-ghost{position:absolute;top:0;right:0;bottom:0;left:0;transform:scaleX(-1);opacity:.06;filter:blur(.4px);pointer-events:none}.verso-ghost img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.verso-ghost-text{position:absolute;top:42px;right:16px;bottom:4px;left:22px;font-family:Pirata One,serif;font-size:21px;line-height:30px;color:var(--ink)}.flip-zone{position:absolute;z-index:200;touch-action:none}.flip-zone--cover{top:0;right:0;bottom:0;left:0;cursor:pointer}.flip-zone--left{left:0;top:0;bottom:96px;width:44px;cursor:w-resize}.flip-zone--right{right:0;top:0;bottom:96px;width:44px;cursor:e-resize}.flip-zone--corner-left{left:0;bottom:0;width:96px;height:96px;cursor:w-resize}.flip-zone--corner-right{right:0;bottom:0;width:96px;height:96px;cursor:e-resize}.corner-hint{position:absolute;bottom:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:IM Fell English,serif;font-size:20px;line-height:1;color:#46371e8c}.corner-hint--right{right:9px;padding-right:6px;background:linear-gradient(225deg,rgba(255,255,255,.5) 0%,rgba(150,130,90,.45) 48%,transparent 50%);border-radius:0 0 4px;box-shadow:-2px -2px 5px #00000014}.corner-hint--left{left:9px;padding-left:6px;background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(150,130,90,.45) 48%,transparent 50%);border-radius:0 0 0 4px;box-shadow:2px -2px 5px #00000014}.toolbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%) translateY(160%);display:flex;gap:14px;padding:10px 18px;border-radius:40px;background:linear-gradient(to bottom,#1a1a1eeb,#0a0a0cf5);border:1px solid rgba(207,202,190,.14);box-shadow:0 12px 30px #0009,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .6s cubic-bezier(.25,.8,.3,1.2);z-index:500}.toolbar--visible{transform:translate(-50%) translateY(0)}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;padding:8px 0 6px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--silver-dim);cursor:pointer;transition:all .25s ease}.tool-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tool-btn span{font-family:IM Fell English,serif;font-size:11px;letter-spacing:.08em}.tool-btn--active{color:#f1ede1;border-color:#a0141a8c;background:radial-gradient(80% 120% at 50% 0%,#7d0c1059,#7d0c1014);box-shadow:0 0 16px #7d0c1059,inset 0 0 8px #7d0c1040;text-shadow:0 0 8px var(--blood-glow)}.draw-palette{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:10px;padding:8px 12px;border-radius:30px;background:#0c0c0eeb;border:1px solid rgba(207,202,190,.12);box-shadow:0 8px 24px #0000008c;z-index:500;animation:palette-in .3s ease}@keyframes palette-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.swatch{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(207,202,190,.2);background:transparent;color:var(--silver-dim);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.swatch--ink{background:radial-gradient(circle at 35% 30%,#454038,#16120d 70%)}.swatch--red{background:radial-gradient(circle at 35% 30%,#b0353a,#58080b 70%)}.swatch--on{border-color:#f0ebdcd9;box-shadow:0 0 10px #f0ebdc40}