:root{--bg:#080b1c;--bg-deep:#050713;--panel:#11162f;--panel-raised:#171d3c;--line:#2b3158;--line-bright:#4b4f83;--text:#f3f1ec;--muted:#aaaec3;--accent:#ffc83d;--accent-warm:#ffad32;--danger:#ff646f;--shadow:#0000006b;--reader-width:520px}*{box-sizing:border-box}html{background:var(--bg-deep);min-height:100%}body{min-height:100%;color:var(--text);background:radial-gradient(circle at 50% -15%, #3d458e4d, transparent 38rem), var(--bg-deep);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #ffc83d73}.reader-shell{width:100%;max-width:var(--reader-width);min-height:100dvh;box-shadow:0 0 70px var(--shadow);touch-action:pan-y;background:radial-gradient(circle at 86% 24%,#3f459021,#0000 15rem),linear-gradient(#090d20 0%,#0b0f24 58%,#080b1c 100%);margin:0 auto;position:relative;overflow:clip}.reader-shell:before,.reader-shell:after{z-index:0;content:"";background:var(--accent);opacity:.7;width:3px;height:3px;position:fixed;box-shadow:12px 8px #6a4c9b,-8px 19px #f28972,7px 29px #37335f}.reader-shell:before{top:148px;right:max(calc((100vw - var(--reader-width)) / 2 + 28px), 28px)}.reader-shell:after{top:205px;left:max(calc((100vw - var(--reader-width)) / 2 + 30px), 30px);opacity:.28;transform:rotate(45deg)}.progress-track{z-index:80;background:#5d629438;width:100%;height:4px;position:fixed;top:0;left:0}.progress-value{background:linear-gradient(90deg, var(--accent-warm), #ffe16d);width:0;height:100%;transition:width .1s linear;box-shadow:0 0 11px #ffc83d73}.reader-header{z-index:2;padding:max(28px, calc(env(safe-area-inset-top) + 18px)) 24px 14px;justify-content:space-between;align-items:center;display:flex;position:relative}.wordmark{isolation:isolate;color:var(--text);letter-spacing:-1px;background:#0a0d1f;border:2px solid #bbb7ff;align-items:baseline;padding:9px 11px 8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:19px;font-weight:800;line-height:1.15;display:inline-flex;position:relative;box-shadow:4px 4px #292752,-3px 3px #292752}.wordmark:after{z-index:-1;content:"";background:#0a0d1f;border-bottom:2px solid #bbb7ff;border-left:2px solid #bbb7ff;width:15px;height:15px;position:absolute;bottom:-9px;left:17px;transform:skewY(-38deg)}.wordmark strong{color:var(--accent)}.icon-button{border:1px solid var(--line);width:44px;height:44px;color:var(--text);cursor:pointer;background:#151a37db;border-radius:14px;place-items:center;padding:0;display:inline-grid}.icon-button:hover{border-color:var(--line-bright);background:var(--panel-raised)}.menu-button{letter-spacing:2px;font-size:15px}.story-area{z-index:1;min-height:calc(100dvh - 100px);padding:34px 28px calc(48px + env(safe-area-inset-bottom));position:relative}.story-area.has-bottom-controls{padding-bottom:calc(132px + env(safe-area-inset-bottom))}.story{animation:.28s ease-out story-in}.story h1{color:#fffdf7;letter-spacing:-.035em;max-width:15ch;margin:0 0 22px;font-size:clamp(28px,8vw,38px);font-weight:800;line-height:1.1}.story-body{color:var(--text);white-space:pre-wrap;font-size:19px;font-weight:400;line-height:1.62}.text-small .story-body{font-size:17px}.text-large .story-body{font-size:22px;line-height:1.58}@keyframes story-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.bottom-controls{z-index:50;padding:13px 18px max(14px, env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(#0000 0%,#050713f0 27%,#050713 100%);position:fixed;bottom:0;left:0;right:0}.bottom-controls-inner{width:100%;max-width:calc(var(--reader-width) - 36px);pointer-events:auto;grid-template-columns:58px clamp(108px,32vw,126px) 58px;justify-content:space-between;gap:12px;margin:0 auto;display:grid}.control-button,.empty-state .primary-action{--control-shadow:#050713;box-shadow:5px 5px 0 var(--control-shadow);border-radius:4px;transition:box-shadow 70ms step-end,transform 70ms step-end;transform:translate(0)}.control-button:not(:disabled):active,.empty-state .primary-action:not(:disabled):active{box-shadow:1px 1px 0 var(--control-shadow);transform:translate(4px,4px)}.control-button{min-height:56px;color:var(--text);cursor:pointer;background:#11162ff7;border:2px solid #4b4f83}.control-button:disabled{cursor:default;opacity:.38}.arrow-button{font-size:31px;line-height:1}.next-button{--control-shadow:#825916;color:#15120a;background:linear-gradient(145deg,#ffd75c,#ffb82f);border-color:#ffe27a}.like-button{--control-shadow:#825916;color:#17130a;background:linear-gradient(145deg,#ffda63,#ffbd35);border-color:#ffe27a;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:800;display:inline-flex}.like-button.is-liked{color:#2d270f;opacity:1;background:linear-gradient(145deg,#ffe992,#eeb535)}.reaction{filter:grayscale(.08);font-size:23px}.reader-state{min-height:52dvh;color:var(--muted);text-align:center;align-content:center;justify-items:center;gap:18px;display:grid}.reader-state p{max-width:30ch;margin:0;font-size:18px;line-height:1.55}.loading-bit{background:var(--accent);width:19px;height:19px;animation:.95s steps(3,end) infinite loading-pixels;box-shadow:25px 0 #ffc83d8c,-25px 0 #ffc83d38}@keyframes loading-pixels{0%{transform:translate(-25px)}to{transform:translate(25px)}}.state-card{border:1px solid var(--line);background:var(--panel);border-radius:24px;max-width:420px;min-height:auto;padding:28px}.primary-action,.secondary-action,.danger-action{cursor:pointer;border:0;border-radius:15px;min-height:50px;padding:0 21px;font-weight:800}.primary-action{color:#17130a;background:linear-gradient(145deg,#ffdb61,#ffb72d)}.empty-state .primary-action{--control-shadow:#825916;border:2px solid #ffe27a}.secondary-action{border:1px solid var(--line);color:var(--text);background:var(--panel-raised)}.danger-action{color:#fff;background:#b43f50}.primary-action:disabled,.secondary-action:disabled,.danger-action:disabled{cursor:default;opacity:.5}.overlay,.write-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#02030cb3;justify-content:center;align-items:flex-end;padding:18px;animation:.16s ease-out overlay-in;display:flex;position:fixed;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.sheet{width:min(100%, calc(var(--reader-width) - 28px));background:linear-gradient(155deg,#171c3a,#10152d);border:1px solid #262c52;border-radius:28px;padding:22px;animation:.21s ease-out sheet-in;box-shadow:0 24px 80px #0000008f}@keyframes sheet-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.sheet-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:17px;display:flex}.sheet-heading h2{margin:0;font-size:23px}.close-button{width:38px;height:38px;color:var(--muted);background:0 0;border:0;font-size:30px;font-weight:300}.menu-list{gap:8px;display:grid}.menu-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:17px;grid-template-columns:42px 1fr;gap:12px;padding:15px 13px;display:grid}.menu-item:hover{background:#4a508b2b}.menu-item:disabled{cursor:default;opacity:.48}.menu-item strong,.menu-item small{display:block}.menu-item strong{margin-bottom:4px;font-size:16px;font-weight:650}.menu-item small{color:var(--muted);font-size:13px}.menu-icon{width:38px;height:38px;color:var(--accent);background:#ffc83d17;border-radius:11px;place-items:center;font-size:22px;display:grid}.report-icon{color:var(--danger);background:#ff646f14}.text-icon{color:var(--text);background:#ffffff0d;font-family:Georgia,serif;font-size:15px}.compact-sheet{max-width:460px}.sheet-copy{color:var(--muted);margin:-4px 0 22px;line-height:1.55}.size-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.size-options button{border:1px solid var(--line);min-height:58px;color:var(--text);cursor:pointer;background:#0c1026;border-radius:15px}.size-options button.is-selected{border-color:var(--accent);color:#17130a;background:var(--accent);font-weight:800}.dialog-actions,.form-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.write-overlay{background:#03050fe0;align-items:stretch;padding:0}.write-screen{width:100%;max-width:var(--reader-width);min-height:100dvh;max-height:100dvh;padding:max(18px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));background:radial-gradient(circle at 90% 15%,#41458933,#0000 19rem),#090d20;overflow-y:auto}.write-header{grid-template-columns:46px 1fr 46px;align-items:center;margin-bottom:24px;display:grid}.write-header h2{text-align:center;margin:0;font-size:25px}.write-close{background:0 0;border:0;width:42px;height:42px;font-size:31px}.story-form{gap:10px;display:grid}.privacy-notice{color:#dfd8bd;background:#ffc83d12;border:1px solid #ffc83d33;border-radius:15px;margin:0 0 14px;padding:14px 16px;font-size:14px;line-height:1.5}.story-form label{color:var(--text);margin-top:7px;font-size:14px;font-weight:700}.story-form input,.story-form textarea{width:100%;color:var(--text);background:#0e122ae6;border:1px solid #343960;border-radius:16px}.story-form input{height:54px;padding:0 16px}.story-form textarea{resize:vertical;min-height:260px;padding:16px;line-height:1.55}.story-form input::placeholder,.story-form textarea::placeholder{color:#777d9a}.story-form input[aria-invalid=true],.story-form textarea[aria-invalid=true]{border-color:var(--danger)}.field-meta{min-height:21px;color:var(--muted);justify-content:space-between;gap:12px;font-size:12px;display:flex}.field-meta span:last-child{white-space:nowrap;margin-left:auto}.form-error,.over-limit{color:#ff8891!important}.submit-error{margin:2px 0;font-size:14px}.form-actions{margin-top:13px}.success-state{text-align:center;align-content:center;justify-items:center;gap:12px;min-height:calc(100dvh - 110px);display:grid}.success-icon{background:var(--accent);border-radius:22px;place-items:center;width:70px;height:70px;margin-bottom:5px;font-size:34px;display:grid;box-shadow:6px 6px #8a6322}.success-state h3{margin:0;font-size:27px}.success-state>p{max-width:31ch;color:var(--muted);margin:0 0 14px;line-height:1.55}.story-preview{border:1px solid var(--line);background:var(--panel);text-align:left;border-radius:18px;width:100%;max-height:240px;margin:6px 0 14px;padding:18px;overflow:auto}.story-preview h4{margin:0 0 9px;font-size:18px}.story-preview p{color:#d8d8e1;white-space:pre-wrap;margin:0;line-height:1.55}.bit-wrap{width:72px;height:65px;margin:58px 5px 8px auto;position:relative}.bit-mascot{background:var(--accent);width:47px;height:47px;box-shadow:5px 0 0 var(--accent-warm), 0 5px 0 var(--accent-warm), 5px 5px 0 #7d4c19;border:4px solid #7d4c19;position:absolute;top:4px;left:8px;transform:rotate(-4deg)}.bit-eye,.bit-mouth{background:#372514;position:absolute}.bit-eye{width:5px;height:7px;top:14px}.bit-eye-left{left:10px}.bit-eye-right{right:9px}.bit-mouth{border-radius:0 0 9px 9px;width:15px;height:6px;bottom:9px;right:12px}.bit-shadow{filter:blur(3px);background:#00000057;width:51px;height:7px;position:absolute;bottom:1px;right:10px}.bit-spark{color:var(--accent);font-size:18px;position:absolute;top:1px;right:0}.empty-state .bit-wrap{margin:0 auto 2px}.toast{z-index:200;bottom:calc(104px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 42px);color:var(--text);background:#171c39;border:1px solid #353b67;border-radius:14px;padding:12px 16px;font-size:14px;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 14px 34px #0000006b}.setup-state{text-align:center;align-content:center;justify-items:center;gap:30px;width:min(100% - 40px,520px);min-height:100dvh;margin:0 auto;display:grid}.setup-state .wordmark{transform:scale(1.2)}.setup-state h1{margin:0;font-size:25px}.setup-state p{color:var(--muted);margin:0;line-height:1.55}@media (min-width:620px){.reader-shell{border-left:1px solid #5a5e9533;border-right:1px solid #5a5e9533}.story-area{padding-left:38px;padding-right:38px}.overlay{padding-bottom:34px}.write-screen{border:1px solid var(--line);border-radius:28px;min-height:min(850px,100dvh - 36px);max-height:calc(100dvh - 36px);margin:18px;box-shadow:0 30px 90px #00000080}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}