@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=IM+Fell+English:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#100f0e;--panel:#211e19;--panel-dark:#141310;--text:#eee3ce;--muted:#b7aa91;--line:#514431;--gold:#e4ba69;--button:#792a22;--button-hover:#a33e2a;--input:#171510;--stage:#131918;--glow:#77704838;--heading:'Cinzel',Georgia,serif;--radius:3px;--accent:#e4ba69}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 15%,#76614024,transparent 65%),repeating-linear-gradient(110deg,#ffffff02 0 1px,transparent 1px 5px),var(--bg);color:var(--text);font:14px/1.5 'Inter',system-ui,sans-serif}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{color:var(--gold);text-underline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{max-width:1280px;margin:auto;padding:0 38px}header{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-family:var(--heading);font-weight:700;font-size:19px;letter-spacing:1px;color:var(--gold)}.brand-die{width:38px;height:38px}.header-tools{display:flex;gap:28px;align-items:center}.edition{color:var(--muted);font-size:9px;letter-spacing:1.5px}.theme-picker{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.theme-picker select{padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--input);color:var(--text);font-size:12px;max-width:158px}
main{max-width:1120px;margin:auto}.intro{text-align:center;padding:29px 0 25px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px;font-weight:600;margin:0}h1,h2,h3{font-family:var(--heading);font-weight:500}h1{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:10px 0;letter-spacing:-1px}h1 em{font-style:normal;color:var(--gold)}.intro>p:last-child{color:var(--muted);font-size:13px;margin:0}h2{font-size:33px;line-height:1.2;margin:7px 0 3px;overflow-wrap:anywhere}h3{font-size:23px;margin:0}
.picker{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:'filters filters' 'identity appearance' 'viewer appearance' 'roll locks' 'status locks';background:linear-gradient(110deg,#ffffff03,transparent 40%),var(--panel);border:3px ridge var(--line);border-radius:var(--radius);box-shadow:0 0 0 1px #0a0908,0 0 0 5px #77614222,0 24px 60px #0007;position:relative}.picker::before,.picker::after{content:'◆';position:absolute;z-index:2;color:var(--gold);font-size:16px;top:-14px;text-shadow:0 2px 2px #000}.picker::before{left:-10px}.picker::after{right:-10px}.picker-top{grid-area:filters;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 22px;border-bottom:3px ridge var(--line);background:linear-gradient(#ffffff06,#0002)}.factions{display:flex;gap:2px;padding:3px;margin:0;border:1px solid var(--line);background:var(--panel-dark);border-radius:var(--radius)}.factions label{position:relative;cursor:pointer}.factions input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%}.factions span{display:block;padding:6px 12px;font-size:11px;color:var(--muted);border:1px solid transparent}.factions input:checked+span{background:linear-gradient(#ffffff0e,#0001),var(--panel);color:var(--gold);border-color:var(--line)}.factions input:focus-visible+span{outline:2px solid var(--gold)}
.identity{grid-area:identity;text-align:center;padding:21px 20px 5px;background:var(--stage);color:#eee3ce}.identity p{color:#c6c3b5;margin:2px 0;font-size:13px}.faction-badge{font-size:9px;font-weight:700;color:#e4947d;letter-spacing:2px}.faction-badge.alliance{color:#9abfed}.text-button{background:none;border:0;color:var(--muted);padding:6px;font-size:11px}.identity .text-button{color:#bcb39f}.text-button:hover{color:var(--gold)}
.model-stage{grid-area:viewer;position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 60%,var(--glow),transparent 70%),var(--stage);color:#eee3ce}.model-stage::before{content:'';pointer-events:none;position:absolute;inset:0 25px 68px;border:1px solid #9b87542b;border-bottom:0;border-radius:50% 50% 0 0;box-shadow:0 0 0 10px #00000016,inset 0 0 25px #0002}.model-stage::after{content:'';pointer-events:none;position:absolute;width:62%;height:18px;border:1px solid #a79c6655;box-shadow:0 0 24px #b6a85d25;bottom:88px;left:19%;border-radius:50%;background:#0002}#model-preview{position:relative;width:100%;height:330px;min-height:300px;flex:1;touch-action:none;z-index:1}#model-preview canvas{position:absolute;inset:0;display:block;width:100%;height:100%}#model-status{position:absolute;top:35%;left:10%;width:80%;z-index:3;background:#15130fed;color:#e4ba69;text-align:center;border:1px solid #675137;padding:14px;font-size:13px}.model-toolbar{position:relative;z-index:2;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 12px 0}.model-toolbar button{border:1px solid #675b45;border-radius:2px;background:linear-gradient(#393329,#201d18);box-shadow:inset 0 1px #ffffff0e;color:#e1d4bd;min-height:35px;padding:5px 10px;font-size:11px}.model-toolbar button:hover{border-color:#e4ba69}.model-toolbar button[aria-pressed=true]{border-color:#e4ba69;color:#ffe0a1;background:#5d4125}.model-help{text-align:center;font-size:10px;line-height:1.6;color:#aca896;margin:7px 10px 13px}#outfit-name{color:#d8bd82}.face-hint{display:none}
.roll-area{grid-area:roll;text-align:center;padding:18px 24px 5px;background:var(--panel-dark);border-top:2px ridge var(--line)}.roll{display:flex;gap:12px;align-items:center;justify-content:center;min-height:55px;padding:12px 20px;width:100%;background:linear-gradient(#ffffff12,transparent 45%,#0003),var(--button);border:2px ridge #b58d4f;border-radius:2px;box-shadow:inset 0 0 0 2px #0004,0 3px 8px #0006;color:#ffdd8e;font-family:var(--heading);font-size:17px;font-weight:700;text-shadow:0 2px 2px #000;transition:filter .15s,transform .15s}.roll:hover{background-color:var(--button-hover);filter:brightness(1.1)}.roll:active{transform:translateY(1px)}.roll>span:first-child{font:25px Georgia,serif}.key-hint{font:8px 'Inter',sans-serif;border:1px solid #d9bc6655;padding:4px;color:#dbc78f;text-shadow:none}.roll-area p{color:var(--muted);font-size:10px;margin:9px 0 0}.roll-area #unlock{font-size:11px}.status{grid-area:status;text-align:center;font-size:10px;min-height:24px;padding:2px 15px 8px;background:var(--panel-dark);color:var(--gold)}
.appearance-panel{grid-area:appearance;min-width:0;padding:26px;border-left:2px ridge var(--line);container-type:inline-size}.appearance-panel h3{color:var(--gold)}.appearance-panel>p{color:var(--muted);font-size:12px;margin:6px 0 24px}.appearance-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;align-items:center;margin:15px 0}.appearance-row label{font-size:12px;color:var(--text)}.appearance-stepper{display:grid;grid-template-columns:34px minmax(0,1fr) 34px 48px;gap:4px;min-width:0}.appearance-row select{width:100%;min-width:0;padding:6px;background:var(--input);border:1px solid var(--line);color:var(--text);font-size:12px;border-radius:var(--radius);text-align:center}.appearance-cycle{background:linear-gradient(#ffffff08,#0002),var(--panel-dark);border:1px solid var(--line);color:var(--gold);font-size:24px;line-height:1;min-height:39px;border-radius:var(--radius)}.appearance-cycle:hover,.lock:hover{border-color:var(--gold)}.lock{font-size:10px;padding:4px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--muted);min-height:28px}.lock[aria-pressed=true]{background:#a5823533;color:var(--gold);border-color:var(--gold)}.secondary-button{width:100%;background:linear-gradient(#ffffff09,#0002),var(--panel-dark);border:1px solid var(--line);border-radius:var(--radius);color:var(--gold);padding:11px;margin-top:13px;font-size:12px}.secondary-button:hover{border-color:var(--gold)}.appearance-panel .appearance-note{font-size:10px;line-height:1.6;margin:12px 0 0;color:var(--muted)}
.attributes{grid-area:locks;display:grid;grid-template-columns:1fr 1fr;min-width:0;border-left:2px ridge var(--line);border-top:2px ridge var(--line);background:#00000013}.attribute{min-width:0;padding:12px 20px;border-right:1px solid var(--line)}.attribute:nth-child(2n){border-right:0}.attribute:nth-child(-n+2){border-bottom:1px solid var(--line)}.field-label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.6px;gap:8px;margin-bottom:6px}.attribute strong{font-size:15px;font-weight:500;overflow-wrap:anywhere}.attribute[data-field=class] strong{color:var(--accent)}
.history{margin:32px 0}.history-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}.history-heading h3{font-size:18px}.history-heading>span{font-size:9px;color:var(--muted);letter-spacing:1px}.history-list{display:flex;flex-wrap:wrap;gap:9px}.history-item{flex:1;min-width:140px;padding:12px 15px;text-align:left;color:var(--text);border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}.history-item:hover{border-color:var(--gold)}.history-item strong{display:block;font-family:var(--heading);font-weight:500;font-size:13px}.history-item small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.history-empty{color:var(--muted);font-size:12px}
footer{text-align:center;font-size:10px;color:var(--muted);padding:0 0 30px}footer p{margin:5px 0}footer a{color:inherit}.support{border-top:1px solid var(--line);padding:28px 0 22px;margin:0 0 15px}.support>p:first-child{font-family:var(--heading);color:var(--text);font-size:17px;margin-bottom:13px}.donate-button{border:1px solid var(--line);background:var(--panel);color:var(--gold);padding:10px 17px;border-radius:var(--radius);font-size:12px}.donate-button span{color:#db8870;font-size:17px;margin-right:5px}.donate-button:hover{border-color:var(--gold)}.support .maker{font-size:10px;letter-spacing:.6px;margin-top:18px}.maker a{font-weight:700;color:var(--gold)}.maker span{margin-left:5px;color:var(--gold)}dialog{color:var(--text);background:var(--panel);border:3px ridge var(--line);padding:35px;width:440px;max-width:calc(100vw - 32px);box-shadow:0 25px 80px #0008;border-radius:var(--radius)}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog h2{font-size:25px;margin:15px 0}dialog p{color:var(--muted);font-size:13px}.dialog-close{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--muted);font-size:26px;width:36px;height:36px}.donation-options{display:grid;gap:10px;margin-top:24px}.donation-options a{display:flex;justify-content:space-between;border:1px solid var(--line);padding:12px 16px;text-decoration:none;background:var(--panel-dark)}.donation-options a:hover{border-color:var(--gold)}dialog .donation-thanks{font-size:11px;margin:20px 0 0}
/* A warm quest log: parchment, ink, leather and brass. */
:root[data-theme=journal]{color-scheme:light;--bg:#382a1e;--panel:#e1cca4;--panel-dark:#d2b98d;--text:#302416;--muted:#6b5131;--line:#a68651;--gold:#755017;--button:#637146;--button-hover:#758650;--input:#eee0c1;--stage:#26271e;--glow:#d1b36d33;--heading:'IM Fell English',Georgia,serif;--radius:4px}
[data-theme=journal] body{background:repeating-linear-gradient(95deg,#ffffff03 0 2px,#00000005 2px 5px),var(--bg)}[data-theme=journal] header{border-color:#9f794940}[data-theme=journal] .brand,[data-theme=journal] .intro h1,[data-theme=journal] .intro .eyebrow,[data-theme=journal] .intro h1 em{color:#f0d5a0}[data-theme=journal] .header-tools,[data-theme=journal] .edition,[data-theme=journal] .theme-picker,[data-theme=journal] .intro>p:last-child{color:#ceb78f}[data-theme=journal] .picker{background:radial-gradient(ellipse at 40% 30%,#fff7d350,transparent 65%),var(--panel);box-shadow:0 0 0 6px #21180f,0 0 0 8px #88704b,0 20px 60px #0008;border:2px solid #d3bb8e}[data-theme=journal] .roll{color:#fff1cb;text-shadow:0 1px #283a20;font-size:22px}[data-theme=journal] .key-hint{color:#fff1cb}[data-theme=journal] h1{font-size:53px}[data-theme=journal] .history,[data-theme=journal] footer{color:#ceb78f}[data-theme=journal] .history-heading>span,[data-theme=journal] .history-empty,[data-theme=journal] .maker,[data-theme=journal] .maker a,[data-theme=journal] .maker span{color:#ceb78f}[data-theme=journal] .support>p:first-child{color:#f0d5a0}[data-theme=journal] .attribute[data-field=class] strong{color:#674215}[data-theme=journal] .appearance-panel h3{font-size:29px}
/* Black iron, red banners and ember light. */
:root[data-theme=horde]{--bg:#120909;--panel:#281815;--panel-dark:#1a1010;--text:#f1d5ba;--muted:#bb9481;--line:#78412e;--gold:#eea258;--button:#9d281c;--button-hover:#bd3b20;--input:#180c0b;--stage:#1e1411;--glow:#d3562535;--radius:0}
[data-theme=horde] body{background:radial-gradient(ellipse at 50% 5%,#9c301629,transparent 55%),repeating-linear-gradient(135deg,#ffffff02 0 2px,transparent 2px 8px),var(--bg)}[data-theme=horde] .picker{border:4px ridge #87402c;box-shadow:0 0 0 5px #1c1010,0 0 0 6px #613022,0 15px 60px #0009}[data-theme=horde] .picker-top{background:linear-gradient(90deg,#551f18,#211311 60%)}[data-theme=horde] .identity{background:linear-gradient(#74241755,transparent),var(--stage)}[data-theme=horde] .model-stage::before{border-radius:0;transform:skew(-6deg);border-color:#a3492533}[data-theme=horde] .model-stage::after{border-color:#de6b3744;box-shadow:0 0 30px #ee632c30}[data-theme=horde] h1{letter-spacing:1px;text-transform:uppercase;font-size:40px}[data-theme=horde] .roll{border-color:#cf7747;box-shadow:inset 0 0 0 3px #38100d,0 3px 12px #0008}
@container(max-width:350px){.appearance-row{grid-template-columns:1fr;gap:5px;margin:13px 0}.appearance-stepper{grid-column:1}.appearance-panel>p{margin-bottom:16px}}
@media(max-width:760px){.shell{padding:0 12px}header{height:60px;gap:8px;border:0}.brand{font-size:14px;letter-spacing:.5px;gap:7px}.brand-die{width:29px;height:29px}.header-tools{gap:0}.edition{display:none}.theme-picker{font-size:0;gap:0}.theme-picker select{max-width:133px;font-size:11px;min-height:34px;padding:6px}.intro{display:none}.picker{grid-template-columns:minmax(0,1fr);grid-template-areas:'filters' 'identity' 'viewer' 'roll' 'status' 'locks' 'appearance';border-width:2px}.picker::before,.picker::after{display:none}.picker-top{padding:7px 9px;justify-content:center;border-bottom-width:1px}.picker-top>.eyebrow{display:none}.factions{width:100%;padding:2px;border:0;background:transparent;gap:4px}.factions label{flex:1;text-align:center}.factions span{padding:6px;font-size:11px;min-height:31px}.identity{padding:12px 12px 0;position:relative}.identity h2{font-size:27px;margin:2px 0}.identity p{font-size:12px}.faction-badge{font-size:8px;letter-spacing:1.5px}.identity .text-button{position:absolute;right:9px;top:8px;font-size:10px}#model-preview{height:clamp(180px,34svh,330px);min-height:0;flex:none}.model-stage::before{inset:4px 28px 60px}.model-stage::after{bottom:75px}.model-toolbar{gap:5px;padding:4px 7px 0;flex-wrap:nowrap}.model-toolbar button{font-size:10px;padding:6px 7px;min-height:34px}.model-help{font-size:9px;margin:5px 8px 8px}.model-help br{display:none}#outfit-name::after{content:' · '}.roll-area{padding:10px 12px 5px;position:sticky;top:0;z-index:4;box-shadow:0 5px 8px #0002}.roll{min-height:49px;font-size:16px;padding:10px}.key-hint{display:none}.roll-area p{margin-top:5px;font-size:9px}.status{min-height:20px;font-size:9px;padding-bottom:6px}.attributes{border-left:0;border-top:1px solid var(--line)}.attribute{padding:12px}.field-label{font-size:9px;letter-spacing:.4px}.attribute strong{font-size:15px}.attribute .lock{min-height:34px;min-width:44px}.appearance-panel{border-left:0;border-top:2px ridge var(--line);padding:22px 16px}.appearance-panel h3{font-size:24px}.appearance-row{grid-template-columns:1fr;margin:16px 0;gap:6px}.appearance-row label{font-size:12px}.appearance-stepper{grid-template-columns:42px minmax(0,1fr) 42px 52px;gap:6px}.appearance-cycle,.appearance-row select,.appearance-row .lock{min-height:44px}.appearance-row select{font-size:14px}.appearance-row .lock{font-size:11px}.secondary-button{min-height:44px}.appearance-panel .appearance-note{font-size:11px}.history{margin:26px 0}.history-heading h3{font-size:17px}.history-heading>span{font-size:8px;letter-spacing:.4px}.history-item{min-width:125px;flex-basis:40%}.support{padding:24px 0 18px}.support>p:first-child{font-size:16px}footer{font-size:10px;padding-bottom:25px}.donate-button{min-height:44px}dialog{padding:28px 22px}[data-theme=journal] .picker{box-shadow:0 0 0 3px #21180f,0 12px 30px #0007}[data-theme=horde] .picker{border-width:2px;box-shadow:0 0 0 3px #311712,0 15px 30px #0007}}
@media(max-width:359px){.shell{padding:0 7px}.brand{font-size:12px}.brand-die{width:25px;height:25px}.theme-picker select{max-width:116px}.model-toolbar button{font-size:9px;padding:5px}.identity h2{font-size:24px}}
@media(prefers-reduced-motion:no-preference){.identity.flash{animation:arrive .25s ease-out}@keyframes arrive{from{opacity:.4}to{opacity:1}}}

/* Static Classic scenery: no extra WebGL context or animation work. */
.model-stage::before,.model-stage::after{display:none}
#model-preview{background-image:linear-gradient(180deg,#080a0c18 0%,transparent 45%,#100e0c20 100%),var(--zone-background);background-size:cover;background-position:center 72%;background-color:#1b2426}
.model-toolbar{background:var(--stage);padding-top:9px}
.model-stage{background:var(--stage)}
.ambience-bar{position:absolute;z-index:3;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
#zone-name{font-family:Cinzel,Georgia,serif;font-size:10px;letter-spacing:.8px;color:#f3e0b6;text-shadow:0 1px 3px #000,0 0 8px #000;background:#15120bb3;border:1px solid #b3996355;padding:6px 9px;border-radius:2px}
.music-controls{display:flex;align-items:stretch;pointer-events:auto;border:1px solid #b3996377;border-radius:3px;box-shadow:0 2px 6px #0004;background:#15120be8}
#music-toggle,.music-settings summary{color:#f1dfbd;border:0;background:transparent;min-height:32px;padding:6px 9px;font-size:11px;cursor:pointer}
#music-toggle[aria-pressed=true]{color:#ffe5a5}
.music-settings summary{list-style:none;border-left:1px solid #b3996344;min-width:29px;text-align:center;font-size:16px;padding:3px 6px}
.music-settings summary::-webkit-details-marker{display:none}
.music-popover{position:absolute;right:0;top:42px;width:230px;padding:15px;background:#191610fa;border:1px solid #9b8052;box-shadow:0 6px 20px #0008;border-radius:3px;color:#efe0c3;font-size:11px}
.music-popover strong{display:block;color:#ead19b;font-family:Cinzel,Georgia,serif;margin-bottom:14px;font-size:12px}
.music-popover label{display:block;margin-bottom:4px}.music-popover input{width:100%;accent-color:#dcb972;min-height:24px;margin:0}.music-popover p{font-size:10px;color:#b9af9a;margin:9px 0 0;line-height:1.5}
@media(max-width:760px){.ambience-bar{top:7px;left:8px;right:8px}#zone-name{font-size:8px;letter-spacing:.3px;padding:5px 6px}#music-toggle{font-size:10px;padding:5px 7px}.music-settings summary{min-width:28px}.music-controls{background:#15120bdd}.model-toolbar{padding-top:6px}}

.recreate-button{display:block;margin:8px auto 0;color:var(--gold);font-size:12px;padding:6px 12px;border:1px solid var(--line)}#recreate-dialog{width:650px;max-height:90svh;overflow:auto}#recreate-name{font-family:var(--heading);font-size:25px;margin:10px 0 0}#recreate-description{margin:6px 0 16px}.card-actions{display:flex;gap:8px;flex-wrap:wrap}.card-actions .secondary-button{width:auto;margin:0;text-decoration:none;padding:10px 14px;font-size:12px}#character-card{display:block;width:100%;height:auto;border:1px solid var(--line);margin:12px 0}#character-card[hidden],.card-actions [hidden]{display:none}#recreate-dialog summary{cursor:pointer;color:var(--gold);padding:12px 0}#recreate-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}#recreate-choices dd{margin:0;text-align:right;color:var(--gold)}.recreate-steps{padding-left:22px;font-size:13px;line-height:1.6}.recreate-steps li{margin:7px 0}#recreate-dialog .reference-note{font-size:11px}#card-message{min-height:18px}@media(max-width:760px){.recreate-button{font-size:10px;margin-top:5px;padding:5px 10px;min-height:40px}.roll-area{padding-bottom:3px}.roll-area #lock-hint{display:none}}