/* Shared visual system. Reader colors and the drawing studio keep their own controls. */
:root{--radius:16px;--ui-border:color-mix(in srgb,var(--line) 65%,var(--surface));--ui-shadow:0 8px 28px #00000012}
body{isolation:isolate;line-height:1.65}
.page-shell{max-width:1320px}
.site-header{box-shadow:0 1px 0 #00000008}
.header-inner{height:80px;gap:28px}
.desktop-nav{gap:24px}
.desktop-nav a{font-weight:650}
.header-actions{gap:14px}
.brand small{letter-spacing:2.1px}
.mobile-nav{gap:4px;border-top:1px solid var(--ui-border)}
.mobile-nav a{padding:10px 12px;border-radius:9px}
.mobile-nav a:hover{background:var(--surface-2)}
.header-search{padding-block:18px}
.header-search .input{flex:1;min-width:0}
.page-heading{padding-block:40px 28px}
.page-heading h1{letter-spacing:-1.2px}
.page-heading p{max-width:720px;line-height:1.75}
.explore-intro{padding-top:36px}
.btn{border-radius:10px;min-height:44px;font-weight:650;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:none}
.btn-small{min-height:38px}
.btn-primary{box-shadow:0 2px 6px #0000000d}
.btn-secondary{border-color:var(--ui-border)}
.btn-danger{background:color-mix(in srgb,#c75060 12%,var(--surface));color:var(--text);border-color:color-mix(in srgb,#c75060 55%,var(--line))}
.btn-danger:hover{background:color-mix(in srgb,#c75060 22%,var(--surface))}
.icon-button{border-radius:10px}
.panel{border-color:var(--ui-border);border-radius:var(--radius);box-shadow:var(--ui-shadow)}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{border-radius:10px;padding:12px 14px}
.field label,.field>span{font-weight:600}
.field textarea{line-height:1.7}
.form-grid{gap:22px}
.notice{border-radius:12px;line-height:1.65}
.hero{border-radius:20px}
.hero h2{letter-spacing:-2px}
.hero-tags span{border-radius:6px}
.genre-bar{gap:9px}
.genre-pill{border-radius:9px}
.genre-pill:hover{color:var(--text);border-color:var(--yellow)}
.story-grid{gap:24px}
.story-card{padding:12px;border:1px solid var(--ui-border);border-radius:16px;background:var(--surface);box-shadow:0 3px 15px #0000000a;overflow:hidden;display:flex;flex-direction:column}
.story-card .cover-link{border-radius:10px;flex-shrink:0}
.story-card-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:0 3px 3px}
.card-labels{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:13px;font-size:11px}
.card-labels .badge{padding:2px 6px;font-size:10px;border-radius:5px}
.story-card h3{font-size:16px;line-height:1.4;margin-top:15px;overflow-wrap:anywhere}
.story-card .card-author{font-size:12px;line-height:1.6;margin-top:5px}
.story-card .card-meta{font-size:11px;padding-top:12px;gap:9px;flex-wrap:wrap}
.story-card-body .card-meta{margin-top:auto}
.story-card .card-meta .book-like-form{margin-top:0}
.story-card .card-genre{color:var(--muted)}
.story-card .cover-title{font-size:clamp(23px,2.2vw,34px)}
.cover-link>img{transition:transform .25s}
.cover-link:hover>img{transform:scale(1.02)}
.cover-badge{border-radius:6px}
.book-like-form{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
.story-card>.book-like-form{margin-top:auto;padding-top:14px}
.book-like-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 12px;border:1px solid var(--ui-border);border-radius:9px;background:var(--surface-2);color:var(--text);font-weight:600;font-size:12px;cursor:pointer}
.book-like-button svg{width:16px;height:16px}
html[data-site-theme] .book-like-button:hover,html[data-site-theme] .book-like-button[aria-pressed=true]{border-color:var(--yellow);color:var(--yellow);background:color-mix(in srgb,var(--yellow) 7%,var(--surface))}
.book-like-button[aria-pressed=true] svg{fill:currentColor}
.book-like-button:disabled{cursor:wait;opacity:.65}
.book-like-count{font-variant-numeric:tabular-nums}
.book-like-message{font-size:12px;color:var(--muted);flex-basis:100%}
.book-like-message:empty{display:none}
.catalog-layout{gap:28px;grid-template-columns:minmax(0,1fr) 310px}
.leaderboard{padding:24px 20px;border-radius:16px;top:24px}
.leaderboard h2{font-size:22px}
.leaderboard ol{margin-top:16px}
.leaderboard li{padding:16px 0;border-color:var(--ui-border);gap:10px}
.leaderboard li:last-child{padding-bottom:0}
.leader-rank{font-size:12px;min-width:22px;font-weight:700;font-variant-numeric:tabular-nums}
.leaderboard .leader-cover{width:44px;height:60px;object-fit:cover;border-radius:5px;flex-shrink:0}
.leaderboard .leader-cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.leaderboard .leader-book{font-weight:650;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.leaderboard .leader-copy{min-width:0;display:grid;gap:4px}
.leaderboard .leader-copy strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.leaderboard .leader-copy .username{font-size:11px;font-weight:500}
.leaderboard .leader-likes{font-size:11px;color:var(--muted);white-space:nowrap}
.leaderboard .leader-likes svg{width:12px;height:12px}
.leaderboard .leader-book:hover strong{color:var(--yellow)}
.library-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:8px;margin-bottom:28px;border:1px solid var(--ui-border);border-radius:14px;background:var(--surface)}
.library-tabs a,.library-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:0;border-radius:9px;color:var(--muted);font-weight:600;background:transparent}
html[data-site-theme] .library-tabs .active,.library-tabs [aria-current=page],.library-tabs [aria-selected=true]{background:var(--surface-2);color:var(--yellow)}
.library-tabs a:hover{background:var(--surface-2);color:var(--text)}
.library-section{padding-bottom:28px}
.library-section>.admin-filters{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-bottom:26px;padding:20px}
.library-section>.admin-filters .field{flex:1;min-width:180px}
.library-section>.admin-filters label{display:block;margin-bottom:8px;font-weight:600}
.library-section>.admin-filters .input{width:100%}
.library-book{min-width:0}
.library-card-progress{display:grid;justify-items:start;gap:8px;padding:0 4px}
.library-card-progress .reading-meter{width:100%}
.library-section+.library-section{padding-top:25px;border-top:1px solid var(--ui-border)}
.library-summary{flex-wrap:wrap}
.status-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ui-border);border-radius:7px;padding:4px 8px;color:var(--muted);background:var(--surface-2);font-size:11px;font-weight:600;line-height:1.45}
.status-badge[data-status=accepted],.status-accepted,.status-public{color:#90d6ac;background:#1c503025;border-color:#64ad7a60}
.status-badge[data-status=pending],.status-pending{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 8%,var(--surface));border-color:color-mix(in srgb,var(--yellow) 40%,var(--line))}
.status-badge[data-status=rejected],.status-rejected{color:var(--text);background:color-mix(in srgb,#c75060 10%,var(--surface));border-color:#c7506060}
html[data-site-theme=light] .status-accepted,html[data-site-theme=light] .status-public,html[data-site-theme=light] .status-badge[data-status=accepted]{color:#28673c}
.creator-banner{background:var(--surface);padding:30px;border-color:var(--ui-border);border-radius:16px}
.profile-card{gap:16px}
.stickman-profile{background:var(--surface);box-shadow:inset 3px 0 var(--yellow)}
.detail-layout{gap:40px}
.detail-stats{border-color:var(--ui-border)}
.detail-buttons{gap:12px}
.detail-buttons .book-like-form{margin-top:0}
.publication-notice{padding:17px 19px;margin:20px 0;border:1px solid var(--ui-border);border-left:3px solid var(--yellow);border-radius:10px;background:var(--surface);line-height:1.7}
.publication-notice strong{display:block;margin-bottom:5px}
.publication-notice p{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.publication-notice p+p{margin-top:8px}
.reader-reactions{display:grid;gap:9px;margin:20px 0 24px;padding-top:18px;border-top:1px solid var(--ui-border)}
.reader-reactions form{display:flex;flex-wrap:wrap;gap:9px}
.reader-reactions small{font-size:12px;line-height:1.65}
.chapter-row{border-color:var(--ui-border);padding-block:22px}
.chapter-row:hover{background:var(--surface)}
.reader-toolbar,.reader-settings{box-shadow:0 1px 6px #00000005}
.reader-controls select,.reader-settings select{border-radius:8px;min-height:36px}
.reader-heading{padding-top:52px}
.reader-completion{border-radius:12px}
.admin-nav{border-color:var(--ui-border);padding:10px}
.admin-nav a.active{box-shadow:inset 3px 0 var(--yellow)}
.admin-stat{border:1px solid var(--ui-border)!important;border-radius:14px;padding:22px;box-shadow:var(--ui-shadow)}
.admin-stat strong{color:var(--text);font-size:1.8rem}
.admin-stats{gap:16px}
.data-table{border-collapse:collapse}
.data-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding-block:14px}
.data-table td{padding-block:18px;border-color:var(--ui-border)}
.admin-entry{border-color:var(--ui-border);padding-block:24px}
.admin-actions{gap:9px}
.moderation-grid{display:grid;gap:18px}
.moderation-queue-item{flex-wrap:wrap;gap:22px;align-items:center}
.moderation-summary{display:flex;gap:20px;align-items:center;flex:1;min-width:240px}
.moderation-summary>div{min-width:0}
.moderation-summary h2{font-size:22px;line-height:1.35;margin:7px 0;overflow-wrap:anywhere}
.moderation-summary p{font-size:13px;overflow-wrap:anywhere}
.moderation-summary .moderation-cover{flex-shrink:0;height:auto}
.moderation-queue-item>.stack{max-width:260px;flex-shrink:0}
.moderation-book{display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px;align-items:start;padding:22px;border:1px solid var(--ui-border);border-radius:14px;background:var(--surface)}
.moderation-cover{width:74px;aspect-ratio:3/4;object-fit:cover;border-radius:7px}
.moderation-book h2,.moderation-book h3{font-size:20px;margin-bottom:6px;overflow-wrap:anywhere}
.moderation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.moderation-reason{margin-top:14px;max-width:600px}
.publishing-visibility{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0;padding:0}
.visibility-option{display:flex;gap:12px;padding:18px;border:1px solid var(--ui-border);border-radius:12px;background:var(--surface);cursor:pointer}
.visibility-option:has(input:checked){border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 5%,var(--surface))}
.visibility-option input{accent-color:var(--yellow);flex-shrink:0;margin-top:5px}
.visibility-option small{display:block;color:var(--muted);margin-top:4px}
dialog:not(#design-studio){border:1px solid var(--ui-border);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px #0005;max-width:min(640px,calc(100% - 32px));padding:26px}
dialog:not(#design-studio)::backdrop{background:#080c1480}
.site-footer{border-color:var(--ui-border);margin-top:52px}
.theme-effects-control{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.theme-effects-control>div{max-width:780px;flex:1;min-width:220px}
.theme-effects-control h2{font-size:20px;margin-bottom:7px}
.theme-effects-control p{font-size:13px}
.effects-toggle{display:flex;gap:10px;align-items:center;font-weight:600;white-space:nowrap;cursor:pointer}
.effects-toggle input{width:20px;height:20px;accent-color:var(--yellow)}
.theme-preset{padding:18px;border-color:var(--ui-border);border-radius:14px}
.theme-swatch{height:100px;border-radius:8px}
.theme-controls p{font-size:13px}
.theme-feedback{border-color:var(--ui-border);border-radius:12px}
@media(max-width:1150px){.header-inner{gap:20px}.desktop-nav{gap:18px}.catalog-layout{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.story-grid{gap:20px}.header-actions{gap:12px}}
@media(max-width:850px){.catalog-layout{grid-template-columns:1fr}.leaderboard{position:static}.header-inner{height:76px}.story-grid{gap:16px}.leaderboard ol{gap:0 24px}.library-tabs{gap:5px}.library-tabs a{padding:9px 12px}}
@media(max-width:760px){.desktop-nav{display:none}.page-heading.split{flex-wrap:wrap;gap:18px}}
@media(max-width:620px){.moderation-queue-item{gap:18px}.moderation-summary{gap:14px;min-width:0;flex-basis:100%}.moderation-summary h2{font-size:19px}.moderation-summary p{font-size:12px}.moderation-queue-item>.stack{width:100%;max-width:none}.publication-notice{padding:14px 15px}.reader-reactions{margin-block:18px 22px}}
@media(max-width:620px){.header-inner{height:72px;gap:12px}.header-actions{gap:5px}.page-heading{padding-block:30px 24px}.page-heading h1{font-size:30px}.story-grid,.catalog-layout .story-grid{gap:16px 12px}.story-card{padding:8px;border-radius:12px}.story-card h3{font-size:14px;margin-top:11px}.story-card .card-author{font-size:11px}.story-card .card-meta{font-size:10px;gap:6px}.story-card .cover-link{border-radius:7px}.story-card .cover-title{font-size:25px;left:12px;right:10px}.story-card .book-like-button{width:100%;padding-inline:8px}.hero{border-radius:14px}.library-tabs{padding:6px}.library-tabs a{font-size:12px;padding:8px 10px}.library-tabs a span{font-size:11px}.leaderboard{padding:22px 18px}.leaderboard ol{grid-template-columns:1fr}.publishing-visibility{grid-template-columns:1fr}.moderation-book{padding:16px;grid-template-columns:60px minmax(0,1fr);gap:14px}.moderation-cover{width:60px}.moderation-actions .btn{font-size:12px;padding:10px 13px}.theme-effects-control{padding:20px}.theme-preset{padding:12px}.theme-swatch{height:86px}.theme-controls{grid-template-columns:1fr}.footer-bottom{row-gap:16px}.reader-heading{padding-top:36px}}

/* Three bounded, noninteractive layers; animations only transform/opacity. */
.theme-environment{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;display:none}
.theme-environment>span{position:absolute;inset:-8%;display:block;background-repeat:no-repeat}
html:is([data-site-theme=space],[data-site-theme=ocean],[data-site-theme=forest],[data-site-theme=fire],[data-site-theme=night],[data-site-theme=desert],[data-site-theme=sunset],[data-site-theme=neon],[data-site-theme=cyber]) .theme-environment{display:block}
html[data-theme-effects=off] .theme-environment,.reader-body .theme-environment{display:none}
html[data-site-theme=space] .environment-atmosphere{background:radial-gradient(ellipse at 80% 15%,#7354b42b,transparent 40%),radial-gradient(ellipse at 15% 65%,#23779626,transparent 42%),radial-gradient(ellipse at 50% 100%,#795ba91a,transparent 45%);animation:environment-breathe 32s ease-in-out infinite alternate}
html:is([data-site-theme=space],[data-site-theme=night]) .environment-distance{background-image:radial-gradient(1px 1px at 20% 30%,#fff9 80%,transparent),radial-gradient(1px 1px at 80% 50%,#fff7 80%,transparent),radial-gradient(1px 1px at 35% 85%,#aacbff9c 80%,transparent),radial-gradient(1.5px 1.5px at 60% 15%,#fff8 80%,transparent);background-size:179px 211px,283px 307px,331px 197px,419px 379px;background-repeat:repeat;opacity:.65}
html[data-site-theme=space] .environment-particles{background-image:radial-gradient(1px 1px at 10% 10%,#fff9 80%,transparent),radial-gradient(2px 2px at 70% 60%,#d4c2ff6e 80%,transparent);background-size:257px 341px,467px 523px;background-repeat:repeat;animation:environment-drift 75s linear infinite alternate}
html[data-site-theme=ocean] .environment-atmosphere{background:radial-gradient(ellipse at 50% -15%,#38b1c32e,transparent 65%),repeating-linear-gradient(105deg,transparent 0 10%,#9be9ec04 12%,transparent 16% 25%);animation:environment-sway 25s ease-in-out infinite alternate}
html[data-site-theme=ocean] .environment-distance{inset:55% -15% -25%;border-radius:45% 55% 0 0;background:#36adb80a;box-shadow:0 -18px 0 #55d6d007,0 -45px 0 #7ac9ea04;animation:environment-sway 22s ease-in-out infinite alternate-reverse}
html[data-site-theme=ocean] .environment-particles{background-image:radial-gradient(circle at 20% 20%,transparent 3px,#a6e8eb29 4px,transparent 5px),radial-gradient(circle at 70% 60%,transparent 6px,#a6e8eb1a 7px,transparent 8px);background-size:271px 337px,431px 503px;background-repeat:repeat;animation:environment-rise 42s linear infinite alternate}
html[data-site-theme=forest] .environment-atmosphere{background:radial-gradient(ellipse at 10% 0,#7cbb6226,transparent 45%),radial-gradient(ellipse at 95% 85%,#41794121,transparent 40%),repeating-linear-gradient(80deg,transparent 0 12%,#070e0a18 14% 16%,transparent 20% 32%)}
html[data-site-theme=forest] .environment-distance{background:radial-gradient(ellipse at 60% 0,#b3d87a12,transparent 55%);animation:environment-breathe 25s ease-in-out infinite alternate}
html[data-site-theme=forest] .environment-particles{background-image:radial-gradient(ellipse 3px 8px at 20% 30%,#92bc7e40 60%,transparent 70%),radial-gradient(ellipse 5px 2px at 80% 70%,#a3c98b30 60%,transparent 70%);background-size:373px 293px,499px 457px;background-repeat:repeat;animation:environment-fall 48s ease-in-out infinite alternate}
html[data-site-theme=fire] .environment-atmosphere{background:radial-gradient(ellipse at 30% 120%,#e573252e,transparent 58%),radial-gradient(ellipse at 95% 100%,#e33e181c,transparent 48%);animation:environment-breathe 12s ease-in-out infinite alternate}
html[data-site-theme=fire] .environment-particles{background-image:radial-gradient(1.5px 3px at 25% 80%,#ffa45870 60%,transparent),radial-gradient(1px 2px at 80% 40%,#ff764b50 60%,transparent);background-size:233px 307px,389px 443px;background-repeat:repeat;animation:environment-rise 32s linear infinite alternate}
html[data-site-theme=night] .environment-atmosphere{background:radial-gradient(circle 37px at 84% 17%,#deecf61a 90%,transparent),radial-gradient(circle 90px at 84% 17%,#d4e5ff0a,transparent);opacity:.9}
html[data-site-theme=night] .environment-particles{background:radial-gradient(ellipse at 15% 25%,#7896b912,transparent 32%),radial-gradient(ellipse at 70% 35%,#7896b90d,transparent 35%);animation:environment-sway 65s ease-in-out infinite alternate}
html[data-site-theme=desert] .environment-atmosphere{background:radial-gradient(ellipse at 80% 0,#dba65b24,transparent 50%)}
html[data-site-theme=desert] .environment-distance{inset:65% -20% -35%;border-radius:60% 40% 0 0;background:#d3a6620c;box-shadow:0 -28px 0 #e9bb7708,0 -70px 0 #b7803b06;transform:rotate(-7deg)}
html[data-site-theme=desert] .environment-particles{background-image:radial-gradient(1px 1px at 20% 50%,#f7d49a4a 60%,transparent),radial-gradient(1px 1px at 60% 75%,#efc68538 60%,transparent);background-size:191px 157px,317px 271px;background-repeat:repeat;animation:environment-drift 38s linear infinite alternate}
html[data-site-theme=sunset] .environment-atmosphere{background:radial-gradient(ellipse at 80% 10%,#ffb2711c,transparent 50%),radial-gradient(ellipse at 20% 85%,#bb709d16,transparent 50%);animation:environment-breathe 35s ease-in-out infinite alternate}
html:is([data-site-theme=neon],[data-site-theme=cyber]) .environment-atmosphere{background:radial-gradient(ellipse at 95% 15%,color-mix(in srgb,var(--yellow) 7%,transparent),transparent 50%),radial-gradient(ellipse at 0 95%,color-mix(in srgb,var(--yellow) 5%,transparent),transparent 40%)}
html:is([data-site-theme=neon],[data-site-theme=cyber]) .environment-distance{background-image:linear-gradient(color-mix(in srgb,var(--yellow) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--yellow) 3%,transparent) 1px,transparent 1px);background-size:80px 80px;background-repeat:repeat;opacity:.7}
@keyframes environment-drift{from{transform:translate(-1%,-1%)}to{transform:translate(4%,3%)}}
@keyframes environment-rise{from{transform:translate(0,5%);opacity:.45}to{transform:translate(2%,-6%);opacity:.8}}
@keyframes environment-fall{from{transform:translate(-2%,-5%) rotate(-2deg)}to{transform:translate(4%,5%) rotate(2deg)}}
@keyframes environment-sway{from{transform:translateX(-2%) rotate(-1deg)}to{transform:translateX(3%) rotate(1deg)}}
@keyframes environment-breathe{from{opacity:.5;transform:scale(1)}to{opacity:.9;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.theme-environment>span{animation:none!important;transform:none!important}.cover-link>img,.btn{transition:none}}
@media print{.theme-environment{display:none!important}}