/* Aethara character creation: an original carved-frame desktop composition.
   Scoped to creation so in-world HUD, service panels and saved layouts stay independent. */
#creation {
 --creation-gold:#b69a62; --creation-bright:#f0dba8; --creation-ink:#11191a;
 position:absolute; inset:0; z-index:12; display:grid;
 grid-template-columns:280px minmax(260px,1fr) 320px;
 grid-template-rows:96px minmax(0,1fr) auto 24px;
 gap:0 20px; padding:12px 24px 8px; isolation:isolate;
 color:#e4d9bc;
 background:linear-gradient(90deg,#0b1218ee 0,#11191cc7 25%,#14202512 43%,#14202512 58%,#11191cd4 78%,#0b1218f2 100%),linear-gradient(#081219b8,transparent 24%,transparent 70%,#081216ed);
}
#creation::before {content:'';position:absolute;inset:8px;z-index:-1;pointer-events:none;border:1px solid #b69a623c;box-shadow:inset 0 0 0 3px #07111555;}
#creation .brand {position:relative;inset:auto;grid-column:1/-1;grid-row:1;width:auto;align-self:center;margin:0;padding:0 240px;text-align:center;}
#creation .brand small {font:10px/1.4 Georgia,serif;letter-spacing:5px;color:#bdac80;}
#creation .brand h1 {font:normal 34px/1.05 Georgia,serif;letter-spacing:7px;margin:5px 0 0;color:#ead39b;text-shadow:0 2px 2px #000,0 0 22px #d7b15c1a;}
#creation .brand h1 span {font-size:inherit;letter-spacing:inherit;margin:0;}
#creation .brand h1 br {display:none;}
#creation .brand p {font:italic 12px/1.4 Georgia,serif;margin:5px 0;color:#c5c3ad;}
#creation .brand .rule {margin:6px 0;gap:12px;font-size:8px;}
#creation .brand .rule i {width:80px;}
#creation .creation-left,#creation .creation-right {
 min-width:0;min-height:0;grid-row:2;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
 padding:15px 14px 18px;border:1px solid #a98b555e;border-top:3px double #a98b558c;
 background:linear-gradient(115deg,#27302be8,#111b1def 68%);box-shadow:inset 0 0 0 3px #09101190,0 5px 18px #0207084d;
 scrollbar-width:thin;scrollbar-color:#806c48 #111a1b;
}
#creation .creation-left {grid-column:1;}
#creation .creation-right {grid-column:3;}
#creation .eyebrow {font:10px/1.5 Arial,sans-serif;letter-spacing:2px;color:#c9af7c;}
#creation h2,#creation h3 {font-weight:normal;color:#e7c991;}
#creation h2 {font-size:21px;margin:8px 0 14px;}
#creation h3 {font-size:17px;margin:14px 0 9px;}
#creation p {overflow-wrap:break-word;}
#creation button {border-radius:1px;transition:background-color .14s,border-color .14s,color .14s;}
#creation button:focus-visible,#creation input:focus-visible,#creation select:focus-visible {outline:2px solid #f4d693;outline-offset:3px;}
#creation button:disabled {cursor:not-allowed;}
#creation-factions {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 13px;}
#creation-factions button {position:relative;min-height:48px;padding:7px 5px;font:12px/1.25 Georgia,serif;background:#10191c;border:1px solid #5c655d;color:#bbbba8;text-align:center;}
#creation-factions button small {display:block;font:9px/1.35 Arial,sans-serif;letter-spacing:.7px;margin-top:3px;color:inherit;}
#creation-factions button.active,#creation-factions button[aria-pressed=true] {border-color:#d0ab68;color:#f2d99e;background:linear-gradient(#4f4630,#282d26);box-shadow:inset 0 -2px #b99b60;}
#creation-races {display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#creation-races button {min-height:52px;min-width:0;display:flex;align-items:center;gap:7px;padding:7px 6px;text-align:left;border:1px solid #576050;background:linear-gradient(120deg,#26322c,#151f20);color:#d7cfb5;}
#creation-races button strong {display:block;font:normal 12px/1.25 Georgia,serif;}
#creation-races button small {display:block;font:9px/1.25 Arial,sans-serif;color:#a5b09e;margin-top:3px;}
#creation-races .race-sigil,#creation-races img {flex:none;width:29px;height:34px;object-fit:contain;font-size:25px;text-align:center;color:#b8ac80;}
#creation-races button:hover:not(:disabled),#creation #classes button:hover:not(:disabled),#creation-specs button:hover:not(:disabled) {background:#354134;border-color:#bca06b;color:#f3dfae;}
#creation-races button.active,#creation-races button[aria-pressed=true],#creation #classes button.active,#creation #classes button[aria-pressed=true],#creation-specs button.active,#creation-specs button[aria-pressed=true] {border-color:#d7b679;background:linear-gradient(100deg,#5a4b2f,#2c352b);box-shadow:inset 2px 0 #e8ce8c;color:#ffe5ac;}
#creation-races button.active strong::after,#creation-races button[aria-pressed=true] strong::after {content:' ◆';font-size:8px;color:#f1d596;}
#creation-stage {position:relative;grid-column:2;grid-row:2;min-width:0;min-height:260px;overflow:hidden;align-self:stretch;}
#creation-stage::before {content:'';position:absolute;left:8%;right:8%;bottom:7%;height:1px;background:linear-gradient(90deg,transparent,#bca16b70,transparent);pointer-events:none;}
#creation-stage canvas {display:block;width:100%;height:100%;touch-action:none;}
#creation-stage .stage-title,#creation-stage .creation-stage-title {position:absolute;top:6px;left:8px;right:8px;text-align:center;text-shadow:0 2px 4px #000;pointer-events:none;}
#creation-stage .stage-title h2,#creation-stage .creation-stage-title h2 {font-size:24px;margin:0 0 5px;letter-spacing:1px;}
#creation-stage .stage-hint,#creation-stage .creation-stage-hint {position:absolute;bottom:8px;left:8px;right:8px;text-align:center;font:11px/1.4 Arial,sans-serif;color:#c7c8b8;text-shadow:0 2px 3px #000;pointer-events:none;}
#creation-stage .stage-controls {position:absolute;bottom:32px;left:0;right:0;display:flex;justify-content:center;gap:12px;}
#creation-stage .stage-controls button {background:#152122dd;border:1px solid #8f7950;color:#d8c28e;min-width:34px;padding:5px 9px;}
#creation #classes {display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0 12px;}
#creation #classes .class-choice {min-height:42px;min-width:0;width:100%;margin:0;padding:6px 7px;gap:6px;border-color:#596250;background:linear-gradient(120deg,#25312a,#142020);}
#creation #classes .class-choice strong {font:normal 12px/1.2 Georgia,serif;}
#creation #classes .class-choice small {font:9px/1.2 Arial,sans-serif;margin-top:3px;color:#a8af9b;}
#creation #classes .class-sigil {width:24px;flex:none;font-size:22px;}
#creation #classes .class-sigil img {display:block;width:25px;height:25px;object-fit:contain;}
#creation #classes .check {font-size:10px;margin-left:auto;}
#creation #classes button:disabled {opacity:.46;filter:saturate(.35);}
#creation-details {font:12px/1.55 Georgia,serif;color:#c9cbb8;padding:0 1px;}
#creation-details h2,#creation-details h3 {margin:9px 0 5px;}
#creation-details p {margin:7px 0;}
#creation #class-description {font:12px/1.55 Georgia,serif;min-height:0;color:#c9cbb8;margin:9px 0 12px;}
#creation-specs {display:grid;gap:5px;margin:9px 0;}
#creation-specs button {padding:7px 9px;text-align:left;border:1px solid #566054;background:#192522;font:12px/1.3 Georgia,serif;}
#creation-specs button strong {font-weight:normal;color:inherit;}
#creation-specs button small {display:block;font:10px/1.4 Arial,sans-serif;color:#b4baa5;margin-top:3px;}
#creation-availability {border-top:1px solid #8a75444f;margin-top:13px;padding-top:10px;font:11px/1.5 Arial,sans-serif;color:#d0b685;}
#creation .appearance-controls {margin:14px 0 0;padding:12px 0 0;border-top:1px solid #8a754455;}
#creation .appearance-controls label {font:11px/1.4 Arial,sans-serif;color:#c9c6ad;}
#creation select {max-width:100%;background:#14201e;color:#e1d4b1;border:1px solid #75694b;padding:5px;font:12px Georgia,serif;}
#creation .create-panel {position:relative;inset:auto;grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(180px,280px) minmax(210px,300px) 1fr;align-items:center;gap:9px 15px;width:auto;margin:13px 0 0;padding:12px 15px;background:linear-gradient(#29312beb,#111c1af7);border:1px solid #a68a55;box-shadow:inset 0 0 0 3px #111b16,0 -4px 20px #09121355;}
#creation .create-panel>.eyebrow {display:none;}
#creation .create-panel>label {font:12px Georgia,serif;letter-spacing:.3px;margin:0;color:#d6c49c;}
#creation .create-panel #name {width:100%;min-width:0;height:40px;padding:8px 12px;font-size:17px;letter-spacing:.6px;color:#f3dfb5;background:#0b1618;border:1px solid #92805b;box-shadow:inset 0 2px 5px #0008;}
#creation #enter {height:42px;padding:9px 18px;font:15px Georgia,serif;letter-spacing:.8px;background:linear-gradient(#876b37,#493a23);border:1px solid #d2b67a;color:#ffedbf;box-shadow:inset 0 0 0 2px #282719,0 3px 8px #03080966;}
#creation #enter:hover:not(:disabled) {background:linear-gradient(#9e8046,#5c4727);filter:none;}
#creation #enter:disabled {opacity:.55;}
#creation #saved-journeys {min-width:0;max-height:90px;overflow:auto;grid-column:1/-1;font:11px/1.4 Arial,sans-serif;scrollbar-width:thin;}
#creation #saved-journeys button {padding:6px 9px;margin:3px;background:#192622;border:1px solid #716447;font-size:11px;}
#creation #resume {margin:0;padding:6px;text-align:right;font:11px/1.4 Arial,sans-serif;color:#cbb57f;text-underline-offset:3px;}
#creation #login-error {grid-column:1/-1;margin:0;font:12px/1.5 Arial,sans-serif;color:#ffc0a2;}
#creation #login-error:empty {display:none;}
#creation .creation-footer {position:relative;inset:auto;grid-column:1/-1;grid-row:4;display:flex;align-items:end;justify-content:space-between;font:9px/1.3 Arial,sans-serif;letter-spacing:1.3px;color:#a5b09c;}
@media (min-width:1600px) {#creation{grid-template-columns:300px minmax(300px,1fr) 340px;padding-left:3vw;padding-right:3vw;gap:0 28px;grid-template-rows:112px minmax(0,1fr) auto 28px;}#creation .creation-left,#creation .creation-right{padding:20px;}#creation-races button{min-height:61px;}#creation #classes .class-choice{min-height:48px;}}
@media (max-width:1100px) {#creation{grid-template-columns:230px minmax(210px,1fr) 280px;gap:0 12px;padding-left:16px;padding-right:16px;}#creation .creation-left,#creation .creation-right{padding:12px 10px;}#creation .brand{padding:0 160px;}#creation .brand h1{font-size:29px;letter-spacing:5px;}#creation-races button{padding:6px 4px;gap:4px;}#creation-races .race-sigil,#creation-races img{width:23px;}#creation .create-panel{grid-template-columns:auto minmax(150px,1fr) minmax(190px,1fr);gap:8px 12px;}#creation #resume{grid-column:1/-1;text-align:center;}}
@media (max-height:740px) and (min-width:781px) {#creation{grid-template-rows:78px minmax(0,1fr) auto 20px;padding-top:7px;}#creation .brand h1{font-size:29px;margin-top:2px;}#creation .brand small{font-size:9px;}#creation .brand p{font-size:11px;margin-top:3px;}#creation .brand .rule{margin:4px 0;}#creation .creation-left,#creation .creation-right{padding-top:10px;padding-bottom:10px;}#creation .create-panel{margin-top:9px;padding:9px 12px;}#creation-factions{margin:7px 0 10px;}#creation-factions button{min-height:42px;}#creation-races button{min-height:47px;}}
@media (max-width:780px) {#creation{overflow-y:auto;grid-template-columns:minmax(170px,1fr) minmax(220px,1.3fr);grid-template-rows:85px minmax(300px,46vh) auto auto 28px;padding:10px 14px;gap:12px;}#creation .brand{grid-column:1/-1;padding:0;align-self:center;}#creation .brand h1{font-size:27px;}#creation .creation-left{grid-column:1;grid-row:2;}#creation-stage{grid-column:2;grid-row:2;min-height:300px;}#creation .creation-right{grid-column:1/-1;grid-row:3;overflow:visible;}#creation #classes{grid-template-columns:repeat(5,minmax(0,1fr));}#creation #classes .class-choice{flex-direction:column;text-align:center;gap:4px;}#creation #classes .class-choice small,#creation #classes .check{display:none;}#creation-specs{grid-template-columns:repeat(3,minmax(0,1fr));}#creation .create-panel{grid-row:4;grid-template-columns:1fr 1fr;margin-top:0;}#creation .create-panel>label{grid-column:1/-1;}#creation #resume{grid-column:1/-1;}#creation .creation-footer{grid-row:5;}#creation .creation-footer span+span{display:block;}}
@media (max-width:480px) {#creation{grid-template-columns:minmax(145px,1fr) minmax(160px,1fr);gap:8px;padding:8px;}#creation .brand h1{font-size:23px;letter-spacing:3px;}#creation .brand p{font-size:10px;}#creation .creation-left{padding:8px;}#creation-factions{grid-template-columns:1fr;gap:4px;}#creation-factions button{min-height:32px;font-size:10px;}#creation-races{gap:4px;}#creation-races button{min-height:41px;padding:4px;text-align:center;justify-content:center;}#creation-races button strong{font-size:10px;}#creation-races button small,#creation-races .race-sigil{display:none;}#creation #classes{grid-template-columns:repeat(5,minmax(0,1fr));}#creation #classes .class-choice{padding:5px 2px;}#creation #classes .class-choice strong{font-size:10px;}#creation .create-panel{grid-template-columns:1fr;}#creation .create-panel #name,#creation #enter{grid-column:1/-1;}#creation .creation-footer{font-size:8px;letter-spacing:.5px;}}
@media (prefers-reduced-motion:reduce) {#creation button{transition:none;}#creation *,#creation *::before,#creation *::after{scroll-behavior:auto;}}
@media (forced-colors:active) {#creation button,#creation .creation-left,#creation .creation-right,#creation .create-panel{border:1px solid ButtonText;}#creation button.active,#creation button[aria-pressed=true]{outline:2px solid Highlight;}#creation::before{display:none;}}
/* Integrated live model and the existing appearance editor share the central stage. */
#creation .brand p {display:block;}
#creation .creation-stage-title {height:57px;}
#creation .creation-stage-title small {display:block;font:10px/1.4 Arial,sans-serif;letter-spacing:1.5px;color:#cdb888;margin:2px 0 5px;}
#creation-model-host {position:absolute;inset:62px 0 66px;min-height:0;}
#creation #appearance-panel {position:relative;inset:auto;width:100%;height:100%;max-height:none;min-height:0;display:flex;flex-direction:column;gap:0;padding:0;overflow:visible;border:0;box-shadow:none;background:none;}
#creation #appearance-panel>header,#creation #people-culture {display:none;}
#creation #appearance-preview {position:relative;display:block;flex:1 1 200px;min-height:150px;width:100%;height:0;border:0;background:transparent;touch-action:none;}
#creation #appearance-panel .appearance-view {display:flex;flex:none;align-items:center;justify-content:center;gap:16px;margin:5px 0;font:10px/1.4 Arial,sans-serif;color:#c9cbb8;text-shadow:0 1px 3px #000;}
#creation #appearance-panel .appearance-view button {font:11px Georgia,serif;background:#172526d9;border:1px solid #89754d;color:#e9d0a0;padding:5px 9px;}
#creation #appearance-fields {flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 9px;padding:9px 11px;margin-top:5px;background:#111e20f2;border:1px solid #8d79537d;box-shadow:inset 0 0 0 2px #0b1318;max-height:170px;overflow-y:auto;scrollbar-width:thin;}
#creation #appearance-fields label {display:grid;gap:3px;min-width:0;font:10px/1.3 Arial,sans-serif;color:#c9c5ad;}
#creation #appearance-fields label:has(select[aria-label="People"]) {display:none;}
#creation #appearance-fields select {width:100%;min-width:0;margin:0;padding:5px;font:11px Arial,sans-serif;border-color:#6b644a;background:#22322e;color:#e8dbb9;}
#creation-race-description {position:absolute;bottom:0;left:8px;right:8px;margin:0;max-height:57px;overflow-y:auto;text-align:center;font:12px/1.45 Georgia,serif;color:#d1d1bc;text-shadow:0 2px 3px #000;scrollbar-width:thin;}
#creation .creation-spec-note {font:10px/1.4 Arial,sans-serif;color:#aebaa4;margin:7px 0;}
#creation-resource {font:10px/1.5 Arial,sans-serif;color:#b8c6ae;}
#creation .create-panel {grid-template-columns:minmax(220px,1fr) minmax(150px,200px) minmax(220px,300px) auto;}
#creation .creation-name {display:flex;align-items:center;gap:12px;min-width:0;}
#creation .creation-name label {font:12px/1.35 Georgia,serif;flex:0 0 105px;color:#d9c89f;}
#creation .create-panel .appearance-button {margin:0;height:40px;padding:8px 10px;font:12px Georgia,serif;background:linear-gradient(#354239,#1b2927);border:1px solid #8e7c53;color:#ddcea6;}
#creation .appearance-eligibility:empty {display:none;}
#creation .appearance-eligibility:not(:empty) {grid-column:1/-1;}
#creation #saved-journeys {margin:0;max-height:76px;}
#creation #saved-character-select {max-width:340px;padding:6px 8px;font:12px Georgia,serif;}
@media(max-width:1100px){#creation .create-panel{grid-template-columns:minmax(180px,1fr) 150px minmax(190px,1fr);}#creation .creation-name{gap:8px;}#creation .creation-name label{flex-basis:74px;font-size:11px;}#creation .creation-name #name{font-size:15px;}#creation #appearance-fields{gap:5px;padding:7px;}}
@media(max-width:780px){#creation-model-host{inset:60px 0 53px;}#creation-race-description{font-size:10px;max-height:46px;}#creation #appearance-fields{grid-template-columns:1fr 1fr;max-height:110px;}#creation .create-panel{grid-template-columns:1fr 1fr;}#creation .creation-name{grid-column:1/-1;}#creation .creation-name label{flex-basis:auto;}#creation .create-panel .appearance-button,#creation #enter{grid-column:auto;}#creation .creation-stage-title h2{font-size:20px;}#creation .creation-stage-title small{font-size:9px;}#creation #appearance-panel .appearance-view{gap:5px;flex-wrap:wrap;}#creation #appearance-panel .appearance-view span{display:none;}}
@media(max-width:480px){#creation .create-panel{grid-template-columns:1fr;}#creation .create-panel .appearance-button,#creation #enter{grid-column:1/-1;}#creation .creation-name{flex-direction:column;align-items:start;gap:5px;}#creation .creation-name label{font-size:12px;}#creation-model-host{inset:58px 0 48px;}#creation #appearance-preview{min-height:140px;}#creation #appearance-fields{grid-template-columns:1fr;max-height:95px;}}
/* Saved travelers form one compact control, not a second panel below the screen. */
#creation .create-panel {grid-template-columns:minmax(220px,1fr) 156px minmax(190px,230px) minmax(140px,190px) 94px;gap:7px 10px;}
#creation .creation-name {grid-column:1;grid-row:1;}
#creation .create-panel .appearance-button {grid-column:2;grid-row:1;}
#creation #enter {grid-column:3;grid-row:1;}
#creation #saved-journeys {grid-column:4;grid-row:1;max-height:none;overflow:visible;}
#creation #saved-journeys label {display:none;}
#creation #saved-character-select {width:100%;max-width:none;height:40px;font-size:11px;}
#creation #resume {grid-column:5;grid-row:1;font-size:10px;text-align:center;padding:4px;max-width:94px;}
@media(max-width:1100px){#creation .create-panel{grid-template-columns:minmax(220px,1fr) 150px minmax(190px,1fr);}#creation #saved-journeys{grid-column:1/3;grid-row:2;}#creation #saved-character-select{height:28px;max-width:360px;}#creation #resume{grid-column:3;grid-row:2;max-width:none;padding:2px;}#creation .create-panel .appearance-button{grid-column:2;}#creation #enter{grid-column:3;}}
@media(max-width:780px){#creation .create-panel{grid-template-columns:1fr 1fr;}#creation .creation-name{grid-column:1/-1;grid-row:1;}#creation .create-panel .appearance-button{grid-column:1;grid-row:2;}#creation #enter{grid-column:2;grid-row:2;}#creation #saved-journeys{grid-column:1;grid-row:3;}#creation #resume{grid-column:2;grid-row:3;}#creation #saved-character-select{height:32px;}}
@media(max-width:480px){#creation .create-panel{grid-template-columns:1fr 1fr;}#creation .create-panel .appearance-button{font-size:11px;}#creation #enter{font-size:12px;padding:7px;}#creation .creation-name{flex-direction:row;align-items:center;}#creation .creation-name label{flex:0 0 90px;font-size:11px;}}
#creation #classes>button {min-width:0;min-height:40px;text-align:left;font:12px/1.3 Georgia,serif;}
#creation #classes>button small {font:9px/1.2 Arial,sans-serif;color:#aab59f;margin-left:3px;}
#creation-specs details {border:1px solid #566054;background:linear-gradient(110deg,#27332b,#16221f);font:11px/1.45 Georgia,serif;}
#creation-specs summary {cursor:pointer;min-height:34px;display:flex;align-items:center;gap:7px;padding:7px 9px;list-style:none;color:#dacead;}
#creation-specs summary::-webkit-details-marker {display:none;}
#creation-specs summary::before {content:'›';font-size:18px;line-height:14px;color:#c5ab74;}
#creation-specs details[open] summary::before {transform:rotate(90deg);}
#creation-specs summary strong {font:normal 13px Georgia,serif;}
#creation-specs summary small {margin-left:auto;font:9px/1.3 Arial,sans-serif;color:#a7b89e;text-align:right;}
#creation-specs summary:focus-visible {outline:2px solid #f4d693;outline-offset:2px;}
#creation-specs details[open] {border-color:#b59961;}
#creation-specs details[open] summary {border-bottom:1px solid #7d70454a;color:#f0d59e;}
#creation-specs details p {padding:0 10px;margin:8px 0;color:#c1c7b0;font:11px/1.5 Georgia,serif;}
#creation-specs details ul {padding:0 12px 0 24px;font:11px/1.5 Georgia,serif;color:#bec5ae;}
#creation #appearance-preview {mask-image:radial-gradient(ellipse 73% 82% at 50% 50%,#000 58%,#000c 75%,transparent 100%);}
@media(max-width:780px){#creation #classes>button{font-size:11px;text-align:center;padding:7px 3px;}#creation #classes>button small{display:block;margin:2px 0 0;}#creation-specs summary{padding:6px;gap:4px;flex-wrap:wrap;}#creation-specs summary strong{font-size:12px;}#creation-specs summary small{display:block;width:100%;text-align:left;margin:0 0 0 12px;}}
@media(min-width:1101px){
 #creation #appearance-fields {position:fixed;left:40px;top:375px;bottom:110px;width:248px;max-height:none;grid-template-columns:1fr 1fr;align-content:start;gap:7px 9px;margin:0;padding:10px;z-index:2;}
 #creation #appearance-fields::before {content:'APPEARANCE';grid-column:1/-1;font:9px/1.4 Arial,sans-serif;letter-spacing:1.8px;color:#c9af7c;margin-bottom:2px;}
}
@media(min-width:1600px){#creation #appearance-fields{left:calc(3vw + 20px);top:435px;width:260px;bottom:125px;}}
@media(min-width:781px) and (max-width:1100px){#creation #appearance-fields{position:fixed;left:27px;top:385px;bottom:155px;width:208px;max-height:none;grid-template-columns:1fr 1fr;align-content:start;z-index:2;}}
@media(min-width:781px) and (max-height:620px){#creation #appearance-fields{position:relative;inset:auto;width:100%;max-height:100px;grid-template-columns:repeat(4,minmax(0,1fr));}}
/* Concept-board refinement: aged bronze around quiet blue-black content surfaces. */
#creation {--faction-deep:#152b46;--faction-light:#7cadd1;--faction-glow:#4e7ba44a;--frame-high:#d1af6f;--frame-low:#57432b;--panel-face:#101c24;gap:0 20px;background:linear-gradient(90deg,#07111be8,#0a14208a 25%,#07111b08 43%,#07111b08 58%,#09111bb0 78%,#07111bf2),linear-gradient(#06101ad9,transparent 29%,transparent 67%,#071019ef);}
#creation[data-faction=pact] {--faction-deep:#3b2022;--faction-light:#dba18b;--faction-glow:#9a493b42;--panel-face:#191a21;}
#creation::before {inset:7px;border:3px double #ad8f555e;box-shadow:inset 0 0 0 1px #04090e,0 0 0 1px #02060a;}
#creation .brand small {display:block;font:normal 30px/.95 Georgia,serif;letter-spacing:5px;color:#edcd8d;text-shadow:0 2px #221a12,0 0 20px #d09c401a;}
#creation .brand h1 {font:normal 13px/1.35 Georgia,serif;text-transform:uppercase;letter-spacing:3px;color:#e1d4b4;margin:7px 0 0;}
#creation .brand p {font:italic 10px/1.4 Georgia,serif;color:#aebbc0;margin:3px 0;}
#creation .creation-left,#creation .creation-right {position:relative;padding:17px 15px 15px;border:1px solid #937849;background:radial-gradient(ellipse at 50% 0,var(--faction-glow),transparent 62%),repeating-linear-gradient(113deg,#fff2dc02 0 1px,transparent 1px 7px),linear-gradient(112deg,var(--panel-face),#091117 78%);box-shadow:inset 0 0 0 2px #040b0f,inset 0 0 0 3px #a58a4932,0 5px 20px #0007;scrollbar-color:#92734a #0d171e;}
#creation .creation-left::before,#creation .creation-right::before,#creation .create-panel::before {content:'';position:absolute;inset:0;pointer-events:none;border:18px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%239c7b46' stroke-width='1'%3E%3Cpath d='M24 3H3v21m69-21h21v21M3 72v21h21m48 0h21V72M24 7H7v17m65-17h17v17M7 72v17h17m48 0h17V72'/%3E%3Cpath d='m3 18 9-6 6-9 3 9-9 9Z'/%3E%3Cpath d='m93 18-9-6-6-9-3 9 9 9ZM3 78l9 6 6 9 3-9-9-9Zm90 0-9 6-6 9-3-9 9-9Z'/%3E%3C/g%3E%3Cg fill='%23d8b678'%3E%3Cpath d='m12 9 3 3-3 3-3-3Zm72 0 3 3-3 3-3-3ZM12 81l3 3-3 3-3-3Zm72 0 3 3-3 3-3-3Z'/%3E%3C/g%3E%3C/svg%3E") 25% stretch;}
#creation .eyebrow {color:#d5b980;font-size:9px;letter-spacing:1.9px;}
#creation .creation-left>.eyebrow,#creation .creation-right>.eyebrow {display:flex;align-items:center;gap:10px;}
#creation .creation-left>.eyebrow::after,#creation .creation-right>.eyebrow::after {content:'';height:1px;flex:1;background:linear-gradient(90deg,#a080485e,transparent);}
#creation-factions {gap:8px;margin:10px 0 16px;}
#creation-factions button {min-height:57px;padding:9px 6px;border:1px solid #80663d;box-shadow:inset 0 0 0 2px #080e17,inset 0 10px 20px #e7c99009;font-size:12px;color:#c9c6ba;}
#creation-factions button:first-child {background:linear-gradient(110deg,#24466a,#0f2135);}
#creation-factions button:last-child {background:linear-gradient(110deg,#58312c,#251b24);}
#creation-factions button[aria-pressed=true] {border-color:#e2bd76;box-shadow:inset 0 0 0 2px #090e14,inset 0 -3px #c3a362,0 0 10px var(--faction-glow);color:#ffe5b0;}
#creation-factions button[aria-pressed=true]::after {content:'';display:block;width:28px;height:2px;margin:6px auto 0;background:linear-gradient(90deg,transparent,#efcb83,transparent);}
#creation-races {gap:7px;}
#creation-races button {min-height:53px;padding:7px 6px;border-color:#685d43;background:linear-gradient(120deg,#1b2a31,#0f1920);box-shadow:inset 0 0 0 1px #02070a;}
#creation-races .race-sigil {display:grid;place-items:center;width:28px;height:35px;flex:none;font-size:22px;color:#c5ad78;text-shadow:0 2px 2px #000;background:radial-gradient(ellipse,var(--faction-glow),transparent 73%);}
#creation-races button small {font-size:9px;color:#a9b5b5;}
#creation-races button[aria-pressed=true],#creation #classes button[aria-pressed=true] {background:linear-gradient(100deg,var(--faction-deep),#333124);border-color:#d4b275;box-shadow:inset 0 0 0 1px #121316,inset 3px 0 #c8a35d;color:#f6db9e;}
#creation #classes {gap:4px;margin:10px 0 11px;}
#creation #classes>button.class-choice {min-height:36px;padding:7px 8px;font:12px/1.25 Georgia,serif;border-color:#645b44;background:linear-gradient(115deg,#1d2b32,#0b151e);box-shadow:inset 0 0 0 1px #05090d;}
#creation #classes>button.class-choice[aria-pressed=true] {background:linear-gradient(100deg,var(--faction-deep),#333124);border-color:#d4b275;box-shadow:inset 3px 0 #c8a35d;}
#creation #classes>button small {margin-left:auto;color:#aab8bd;font-size:8px;}
#creation-details {padding:9px 0 10px;border-top:1px solid #8f74494d;border-bottom:1px solid #8f74494d;margin:0 0 11px;}
#creation-details h2 {font-size:23px;color:#eed19a;margin:0 0 5px;}
#creation #class-description {font-size:11px;line-height:1.55;margin:5px 0 7px;color:#cad0c7;}
#creation-resource {color:var(--faction-light);font-size:10px;}
#creation-specs {gap:5px;margin:8px 0;}
#creation-specs details {border-color:#695d42;background:linear-gradient(100deg,#1c2a2f,#0c171f);box-shadow:inset 0 0 0 1px #04090d;}
#creation-specs summary {min-height:32px;padding:6px 8px;}
#creation-specs summary strong {font-size:12px;}
#creation-specs summary small {color:#a5b7b6;}
#creation-availability {margin:9px 0 0;padding-top:8px;font-size:10px;line-height:1.45;color:#d9bc84;}
#creation .creation-spec-note {margin:6px 0;font-size:9px;}
#creation-stage {overflow:visible;}
#creation-stage::before {bottom:59px;left:12%;right:12%;background:linear-gradient(90deg,transparent,#d1b16b80,transparent);}
#creation .creation-stage-title h2 {font-size:27px;color:#f0d39d;text-shadow:0 2px 3px #070b10;}
#creation .creation-stage-title small {font-size:10px;letter-spacing:2px;color:var(--faction-light);}
#creation-model-host {inset:61px 0 65px;}
#creation #appearance-preview {mask-image:radial-gradient(ellipse 81% 90% at 50% 51%,#000 66%,#000d 84%,transparent 100%);}
#creation #appearance-panel .appearance-view button {border-color:#a68a55;background:linear-gradient(#263841,#0d1b26);box-shadow:inset 0 0 0 1px #070b10;color:#e6c994;}
#creation #appearance-fields {border-color:#80683f;background:linear-gradient(120deg,#172631,#0a151e);box-shadow:inset 0 0 0 2px #080e14;}
#creation #appearance-fields select {background:linear-gradient(#20343e,#12212a);border-color:#796746;color:#e0d7be;}
#creation .create-panel {background:linear-gradient(#263038,#101820);border-color:#9f814d;box-shadow:inset 0 0 0 2px #03090d,inset 0 0 0 3px #ac8c4e42,0 -4px 24px #0007;}
#creation .create-panel #name {border-color:#a48755;background:#0a121a;color:#f5dfb0;}
#creation .create-panel .appearance-button {background:linear-gradient(#2b3e48,#111f2c);border-color:#9a8153;color:#d8c69f;box-shadow:inset 0 0 0 2px #0b131b;}
#creation #enter {background:linear-gradient(#987447,#513820 53%,#66472a);border-color:#dfbd7f;box-shadow:inset 0 0 0 2px #302315,inset 0 3px #d9b57266,0 3px 7px #0009;text-shadow:0 1px 2px #20100a;font-size:16px;}
#creation #enter:hover:not(:disabled) {background:linear-gradient(#b48a50,#74532e);}
#creation #saved-character-select {background:#111e28;border-color:#82714c;color:#d4ccae;}
@media(min-width:1101px){#creation #appearance-fields{top:396px;}}
@media(min-width:1600px){#creation #appearance-fields{top:435px;}#creation #classes>button.class-choice{min-height:43px;}}
@media(max-height:740px) and (min-width:781px){#creation .creation-left,#creation .creation-right{padding-top:14px;}#creation-factions{margin:8px 0 13px;}#creation-factions button{min-height:48px;}#creation-races button{min-height:49px;}#creation .brand small{font-size:27px;}#creation .brand h1{font-size:12px;margin-top:5px;}#creation .brand p{font-size:9px;}#creation #appearance-fields{top:376px;}}
@media(max-width:1100px){#creation .creation-left,#creation .creation-right{padding-left:11px;padding-right:11px;}#creation #classes>button.class-choice{font-size:11px;padding:6px;}#creation-races button strong{font-size:11px;}#creation .creation-stage-title h2{font-size:23px;}#creation #appearance-fields{top:388px;}}
@media(max-width:780px){#creation{gap:12px;}#creation-factions button{font-size:10px;min-height:44px;}#creation-races button{min-height:46px;}#creation .brand small{font-size:29px;}#creation .brand h1{font-size:11px;letter-spacing:2px;}#creation .brand p{font-size:9px;}#creation .creation-left,#creation .creation-right{padding:13px 10px;}#creation #classes>button.class-choice{min-height:44px;justify-content:center;font-size:11px;}#creation #appearance-fields{position:relative;inset:auto;width:100%;}#creation .creation-stage-title small{font-size:9px;}#creation .creation-stage-title h2{font-size:21px;}#creation-model-host{inset:60px 0 52px;}#creation-stage::before{bottom:49px;}#creation #enter{font-size:13px;}}
@media(max-width:480px){#creation{gap:8px;}#creation .creation-left{padding:11px 7px;}#creation-factions button{min-height:32px;padding:5px;}#creation-factions{margin:8px 0 10px;}#creation-races button{min-height:40px;}#creation-races button strong{font-size:10px;}#creation #classes>button.class-choice{font-size:10px;padding:5px 2px;}#creation .creation-stage-title small{letter-spacing:.6px;}#creation .creation-stage-title h2{font-size:18px;}}
@media(forced-colors:active){#creation .creation-left::before,#creation .creation-right::before,#creation .create-panel::before{display:none;}}
#creation-details {padding:6px 0 7px;margin-bottom:8px;}
#creation #creation-details h2 {margin:0 0 4px;}
#creation #creation-specs {margin:7px 0;}
#creation #creation-specs summary {min-height:30px;padding:5px 8px;}
#creation #creation-availability {padding-top:6px;margin-top:7px;}
@media(max-height:740px) and (min-width:781px){#creation #classes>button.class-choice{min-height:33px;padding-top:5px;padding-bottom:5px;}#creation .creation-right{padding-bottom:10px;}#creation #creation-details{margin-bottom:6px;padding-top:5px;padding-bottom:5px;}#creation .creation-right .creation-spec-note{margin:4px 0;}}

/* Full-body canvas includes the painted floor; controls float clear of the feet. */
@media(min-width:781px){
 #creation-stage.preview-fullbody #creation-model-host{inset:61px 0 35px;}
 #creation .preview-fullbody #appearance-preview{position:absolute;inset:0;width:100%;height:100%;min-height:0;}
 #creation .preview-fullbody #appearance-panel .appearance-view{position:absolute;top:6px;right:10px;margin:0;z-index:2;flex-direction:column;gap:3px;align-items:flex-end;}
 #creation .preview-fullbody #appearance-preview-status{position:absolute;bottom:0;left:8px;right:8px;pointer-events:none;}
}