/* Edge-to-edge night mode. Character badges retain their own visual identities. */
:root{color-scheme:dark;color:#e4e7eb;background:#101215;--line:#343a42;--muted:#a0a9b5}
html{height:100%;overflow:hidden}
body,body[data-scene]{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;margin:0;background:#101215;color:#e4e7eb}
.header{margin:0;padding:0 20px;height:42px;flex:0 0 42px;background:#121518;border-bottom:1px solid #30353c}
.header .brand{cursor:default;user-select:none}.header .brand-wordmark{filter:grayscale(1);pointer-events:none}
.workspace{flex:1;min-height:0;width:100%;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.stage{background:#14181e;border-color:#303741}.editor{background:linear-gradient(120deg,#22272e,#181c22);color:#e4e7eb;border-radius:0;min-height:0}
.tabs{background:#161a20;border-bottom-color:#343c46}.tabs button{color:#a5afbb}.tabs button.active{background:linear-gradient(#414b58,#303945);color:#fff;box-shadow:inset 0 1px #ffffff18,0 2px 5px #0003}.tabs button:hover{color:#fff;background:#303945}
.tabs .porsche-wordmark{filter:invert(1);mix-blend-mode:screen}
.panel,.scene-panel{scrollbar-color:#536071 transparent}
.section,.kit-part{border-color:#353d4780}.section-heading{color:#ebedf1}
.section-heading small,.section-heading button,.field output,.color-detail,.custom-color,.option-card small,.decal-row small,.empty,.panel-note{color:#acb7c5}.color-detail strong{color:#dbe1e9}
.swatch{border-color:#ffffff40}.swatch.active:after{border-color:#e1e7ee}
.segmented{background:#121820;border-color:#394554}.segmented button{color:#b2bece}.segmented button.active,.view-controls button.active{background:linear-gradient(#526172,#3c4a5c);color:#fff;box-shadow:inset 0 1px #ffffff20}
.option-card,.plain-option,.livery-card,.decal-tile{background:#202832;border-color:#3b4858;color:#dce4ee}.option-card:hover,.plain-option:hover,.decal-tile:hover{background:#2c3846;border-color:#8193aa}
.option-card.active,.plain-option.active,.livery-card.active{background:#334253;border-color:#9aaec6;box-shadow:inset 0 0 0 1px #9aaec6}
.option-card.active:after,.check,.part-status,.link-button{color:#bdd5f2!important}.part-icon{color:#a7b9ce}.livery-caption{background:#1a222c;color:#e3e9f1}.livery-caption span{color:#a9b9cd}
.fit-controls,.selected-decal{background:#141c25;border-color:#354354}.fit-controls summary{color:#bbcadc}.field{color:#d3dce7}
input[type=range],input[type=checkbox]{accent-color:#a8bcd5}select,input[type=text]{background:#19222d;color:#e3eaf2;border-color:#435267}.custom-color input{background:#242f3e;border-color:#64758d}
.primary-button{background:linear-gradient(#9caec4,#788ea8);color:#131c28;border-color:#aebed2}.decal-row{background:#273444}.decal-row.active{background:#3b4e64;box-shadow:inset 2px 0 #b9cde6}.decal-row>button:last-child{color:#c2d1e5}
.scene-toggle,.round-button,.view-controls{background:linear-gradient(135deg,#303c49ed,#19232fe8);border-color:#697b8f80;color:#e0e9f4;box-shadow:0 5px 18px #0005}.view-controls button{color:#b7c6d9}.stage-bottom .segmented{background:#1e2a38ed;border-color:#66798e80;box-shadow:0 4px 16px #0005}
.scene-toggle[aria-expanded=true],.round-button.active{background:#506782;border-color:#9ab2cc;color:#fff}
.scene-drawer{background:#1b2633f7;border-color:#53657b;color:#dde6f2;box-shadow:0 15px 40px #0007}.scene-drawer-heading{background:#17202b;border-color:#3f4f63}.scene-drawer-heading button{color:#bacbe0}
.character-actions .factory-reset{background:linear-gradient(#39495d,#253347);border-color:#7589a1;color:#e0e9f6;box-shadow:0 3px 10px #0004}.character-actions .factory-reset:hover{background:#465d79;color:#fff}
#loading{background:#17202bea;color:#d1dfef}#toast{background:#273749ed;color:#e5eef8;border-color:#647c98;box-shadow:0 8px 32px #0006}.panel-note{border-color:#465971}
@media(max-width:760px){.header{height:36px;flex-basis:36px;padding:0 12px}.header .brand-wordmark{height:26px}.workspace{margin:0;height:auto;border:0;border-radius:0}.stage{border-color:#384758}.editor{border-radius:0}}

.stage-wordmark{position:absolute;left:18px;bottom:16px;width:100px;height:auto;max-height:50px;object-fit:contain;filter:grayscale(1);opacity:.8;pointer-events:none;user-select:none;z-index:2}
@media(max-width:1100px){.stage-wordmark{width:72px;bottom:100px;left:12px}}
@media(max-width:760px){.stage-wordmark{width:60px;bottom:10px;left:10px}.stage-bottom{max-width:calc(100% - 82px);left:auto;right:8px;transform:none;padding:0}.stage-bottom .view-controls button{padding:7px 8px;font-size:10px}.stage-bottom .decal-mode-controls{max-width:190px;flex-basis:100%;margin:0}.stage-bottom .view-controls{padding:2px}.stage-bottom .round-button{width:30px;height:30px;flex-shrink:0}}


/* Left-bottom badges. Skew only the backing, keeping text at native resolution. */
.character-actions{top:auto;bottom:18px;left:18px;gap:9px;grid-template-columns:126px}
.character-actions .jennifer-toggle,.character-actions .itsumi-toggle{transform:none;border:0;background:transparent;box-shadow:none;border-radius:0;isolation:isolate;overflow:visible;-webkit-font-smoothing:antialiased}
.character-actions .jennifer-toggle::before,.character-actions .itsumi-toggle::before{content:'';position:absolute;inset:0;z-index:-1;transform:skew(-8deg) translateZ(0);border:1px solid #cdd6df;box-shadow:3px 3px 0 #08090a;background:linear-gradient(120deg,#d6dce0,#88949f);backface-visibility:hidden}
.character-actions .jennifer-toggle:hover,.character-actions .jennifer-toggle[aria-pressed=true],.character-actions .itsumi-toggle:hover,.character-actions .itsumi-toggle[aria-pressed=true]{background:transparent;box-shadow:none}
.character-actions .jennifer-toggle:hover::before,.character-actions .jennifer-toggle[aria-pressed=true]::before{background:linear-gradient(120deg,#f5f6ee,#b8c1c9)}
.character-actions .jennifer-name{transform:none;font:italic 900 20px/1 Impact,'Arial Black',sans-serif;letter-spacing:-.6px;text-shadow:none}
.character-actions .jennifer-toggle{color:#101419;text-shadow:none}
.character-actions .itsumi-toggle::before{transform:skew(-4deg) translateZ(0);background:linear-gradient(130deg,#37151b,#171316);border-color:#ac4a50;border-right:3px solid #d93b45}
.character-actions .itsumi-toggle:hover::before,.character-actions .itsumi-toggle[aria-pressed=true]::before{background:linear-gradient(130deg,#722230,#24161b)}
.character-actions .factory-reset{position:relative;isolation:isolate;overflow:hidden;border-radius:1px;border:1px solid #80634d;color:#f0dbc0;font:italic 900 12px/1.2 'Arial Black','Microsoft YaHei',sans-serif;text-shadow:1px 2px 1px #120c08;background:radial-gradient(ellipse at 8% 20%,#ab572b 0%,#633820 11%,transparent 30%),radial-gradient(ellipse at 92% 90%,#b46b36 0%,#583a28 17%,transparent 40%),repeating-linear-gradient(4deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(140deg,#4c4a40,#262c2c 55%,#5e4937);box-shadow:inset 0 1px #c4a07770,inset 0 -2px #0f1316,3px 3px 0 #08090a}
.character-actions .factory-reset::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.7;background:linear-gradient(118deg,transparent 16%,#0c0b0999 16.5%,#bc956e99 17%,transparent 17.8%),linear-gradient(26deg,transparent 76%,#090b0ddd 76.5%,#c7a47a88 77%,transparent 77.5%);clip-path:polygon(0 0,36% 0,22% 26%,34% 41%,20% 55%,0 42%,0 100%,100% 100%,100% 62%,79% 63%,69% 45%,82% 20%,100% 8%,100% 0)}
.character-actions .factory-reset:hover{filter:brightness(1.16);color:#fff0d9;background-color:#584435}
.stage-bottom{max-width:calc(100% - 174px);left:auto;right:16px;transform:none;justify-content:center;padding:0}
@media(max-width:760px){.character-actions{top:auto;left:12px;bottom:10px;gap:7px;grid-template-columns:108px}.character-actions .jennifer-toggle,.character-actions .itsumi-toggle,.character-actions .factory-reset{width:108px;height:39px}.character-actions .jennifer-name{font-size:18px}.stage-bottom{max-width:calc(100% - 138px);right:8px;bottom:10px}.stage-bottom .view-controls{display:flex;flex-wrap:wrap;justify-content:center}.stage-bottom .view-controls button{padding:6px 7px}.scene-drawer{left:12px;top:54px;bottom:152px;max-width:calc(100% - 24px)}}

/* Keep both control rows aligned to the right, with rotation in the view group. */
.stage-bottom{right:10px;left:auto;justify-content:flex-end;align-items:center;column-gap:0;row-gap:7px}
.stage-bottom .decal-mode-controls{flex:0 0 230px;margin:0 0 0 auto}
.stage-bottom .view-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;margin-left:auto}
.stage-bottom .view-controls #auto-rotate{width:34px;height:32px;flex:0 0 34px;margin:0 0 0 3px;padding:0;border:0;border-left:1px solid #8ca0b533;border-radius:0 14px 14px 0;background:transparent;box-shadow:none;backdrop-filter:none;color:#c9d8e9;font-size:21px}
.stage-bottom .view-controls #auto-rotate.active{background:#506782;color:#fff}
@media(max-width:760px){.stage-bottom{right:6px;max-width:calc(100% - 134px)}.stage-bottom .decal-mode-controls{flex-basis:190px;max-width:100%;margin-left:auto}.stage-bottom .view-controls{flex-wrap:wrap;justify-content:flex-end}.stage-bottom .view-controls #auto-rotate{width:28px;height:28px;flex-basis:28px;font-size:19px}.stage-bottom .view-controls button{padding:6px}}
/* Scene popover anchors below its trigger; small screens use the options area. */
.scene-drawer{position:absolute;left:16px;right:auto;top:62px;bottom:auto;width:290px;max-width:calc(100% - 32px);height:min(540px,calc(100% - 238px));max-height:calc(100% - 238px);z-index:8;min-height:0}
.scene-drawer-heading{flex-shrink:0}.scene-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(min-width:761px) and (max-height:520px){.scene-drawer{left:158px;top:16px;height:calc(100% - 90px);max-height:calc(100% - 90px);max-width:calc(100% - 174px)}}
@media(max-width:760px){.scene-drawer{position:fixed;left:0;right:0;top:45vh;top:45dvh;bottom:0;width:100%;max-width:none;height:auto;max-height:none;border-radius:16px 16px 0 0;z-index:20;box-shadow:0 -6px 24px #0005}.scene-drawer-heading{padding:12px 18px}.scene-panel{padding:18px 20px;padding-bottom:max(20px,env(safe-area-inset-bottom))}}

#mobile-notice{max-width:calc(100vw - 48px);width:320px;box-sizing:border-box;padding:28px 24px;background:#202a36;color:#edf2f8;border:1px solid #647489;border-radius:18px;text-align:center;box-shadow:0 20px 70px #0008}#mobile-notice h2{font-size:21px;margin:0 0 24px}#mobile-notice button{width:100%;padding:12px}#mobile-notice::backdrop{background:#080c12aa;backdrop-filter:blur(5px)}