/* Appearance changes materials only; page dimensions and section layout stay shared. */
:root{--surface:#081822;--surface-soft:#07141c;--selected:#132c38;--on-accent:#041115;--art:none;--art-shade:rgba(3,7,9,.84);--grid:rgba(99,216,237,.08)}
:root[data-skin=air]{color-scheme:light;--bg:#eef4f8;--text:#101820;--muted:#465e70;--cyan:#006d93;--line:#a9c1d0;--gold:#715318;--surface:#f9fcfe;--surface-soft:#e7f0f5;--selected:#dceef7;--on-accent:#fff;--art:url('/ioi/assets/skins/air.png');--art-shade:rgba(238,244,248,.87);--grid:rgba(0,80,116,.08)}
:root[data-skin=atelier]{--bg:#020405;--text:#f5f3ef;--muted:#b0c0c8;--cyan:#42d7fb;--line:#344951;--surface:#071014;--surface-soft:#030709;--selected:#13252d;--art:url('/ioi/assets/skins/atelier.png');--art-shade:rgba(2,4,5,.80)}
:root[data-skin=living]{--art:url('/ioi/assets/skins/living.png');--art-shade:rgba(3,7,9,.83)}
:root[data-skin=developer]{--bg:#03070a;--text:#dcebf0;--muted:#9bb3bf;--cyan:#42d7fb;--line:#23414e;--surface:#08131a;--surface-soft:#071016;--selected:#102a35;--art:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
:root[data-skin=focus]{--bg:#101112;--text:#f1f2ef;--muted:#b3b8b3;--cyan:#d4ded1;--line:#424742;--surface:#191c1b;--surface-soft:#151617;--selected:#303630;--gold:#d8d3bb;--grid:rgba(211,222,209,.07)}
/* Match the console collection; light-skin accents are darker for small links over the page artwork. */
:root[data-skin=pearl]{color-scheme:light;--bg:#f3f0e8;--text:#123e48;--muted:#22434f;--cyan:#00606d;--line:#bad2d4;--gold:#715318;--surface:#fafbf8;--surface-soft:#f3f8f6;--selected:#dceff0;--on-accent:#fff;--art:url('/ioi/assets/skins/pearl.webp');--art-shade:rgba(243,240,232,.87);--grid:rgba(0,96,109,.08)}
:root[data-skin=terra]{color-scheme:light;--bg:#e5d8c3;--text:#382d21;--muted:#514631;--cyan:#304e35;--line:#b9ad90;--gold:#67442e;--surface:#f6ecdc;--surface-soft:#eee4d1;--selected:#d7ddc7;--on-accent:#fff;--art:url('/ioi/assets/skins/terra.webp');--art-shade:rgba(229,216,195,.87);--grid:rgba(48,78,53,.09)}
:root[data-skin=tide]{--bg:#002638;--text:#e0f8ff;--muted:#b7dce8;--cyan:#4ce4e8;--line:#2582a0;--gold:#d8cfb3;--surface:#073f59;--surface-soft:#01344c;--selected:#0c536a;--art:url('/ioi/assets/skins/tide.webp');--art-shade:rgba(0,38,56,.83);--grid:rgba(76,228,232,.08)}
:root[data-skin=forge]{--bg:#081219;--text:#dceef7;--muted:#acc7d7;--cyan:#57dbc5;--line:#395566;--gold:#d8ccba;--surface:#14232e;--surface-soft:#0b1922;--selected:#1b393e;--art:url('/ioi/assets/skins/forge.webp');--art-shade:rgba(8,18,25,.85);--grid:rgba(87,219,197,.08)}
body{isolation:isolate;background:var(--bg)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--art-shade),var(--art-shade)),var(--art);background-position:center;background-size:cover;opacity:1}
:root[data-skin=developer] body::before{background-image:var(--art);background-size:36px 36px}
:root[data-background=quiet] body::before{display:none}
:root[data-background=grid] body::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:36px 36px}
.button,.task-starter,.product-switch,.console-figure,.plugin-screen,.draft-evidence,.film-chapters button{background:var(--surface);border-color:var(--line)}
.button.primary,.button.primary:hover{background:var(--cyan);color:var(--on-accent);border-color:var(--cyan)}
.button.primary:hover{filter:brightness(1.08)}
.skip-link{color:var(--on-accent)}
.builder-mark{color:var(--cyan)}
.task-options button,.task-destination,.task-status,.hero-copy .small-note,.edition-description span,.understated,.plugin-screen figcaption,.draft-evidence figcaption,.film-runtime,.film-chapters span{color:var(--muted)}
.task-prompt,.draft-evidence strong{color:var(--text)}
.task-options button,.plugin-screen figcaption,.console-figure figcaption,.ecosystem-item,.draft-evidence img,.plugin-section,.connection-steps li::before{border-color:var(--line)}
.ecosystem-section,.plugin-section{background:var(--surface-soft)}
.product-switch button[aria-pressed=true],.task-options button[aria-pressed=true],.edition-switch button[aria-pressed=true],.film-chapters button[aria-pressed=true]{background:var(--selected);color:var(--text);border-color:var(--cyan)}
.appearance-open{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px 13px;background:var(--surface);font-size:12px;white-space:nowrap}
.appearance-open:hover{border-color:var(--cyan)}
.appearance-dot{width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:inset 0 0 0 1px currentColor}
.appearance-note{margin-top:20px;font-size:12px;line-height:1.7;color:var(--muted)}
.appearance-note button{background:none;border:0;padding:7px 0;color:var(--cyan);text-decoration:underline;text-underline-offset:4px;min-height:44px}
.appearance-dialog{width:min(700px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);overflow:auto;box-shadow:0 28px 100px #0006}
.appearance-dialog::backdrop{background:#030709b8;backdrop-filter:blur(8px)}
.appearance-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}
.appearance-dialog-header h2{font-size:26px;line-height:1.2}
.appearance-close{height:44px;min-width:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);font-size:24px}
.appearance-dialog>p{font-size:13px;max-width:58ch}
.appearance-dialog fieldset{border:0;padding:0;margin:25px 0}
.appearance-dialog legend{font-size:14px;font-weight:600;margin-bottom:13px;padding:0}
.appearance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.appearance-choice{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-soft)}
.appearance-choice input{position:absolute;left:12px;bottom:12px;width:16px;height:16px;margin:0;accent-color:var(--cyan)}
.appearance-choice:has(input:checked){outline:2px solid var(--cyan);outline-offset:2px}
.appearance-choice:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:4px}
.appearance-thumb{height:72px;display:block;background-position:center;background-size:cover}
.appearance-choice-name{display:block;padding:12px 10px 12px 36px;font-size:13px;line-height:17px}
.appearance-thumb.air{background-image:url('/ioi/assets/skins/air.png')}.appearance-thumb.atelier{background-image:url('/ioi/assets/skins/atelier.png')}.appearance-thumb.living{background-image:url('/ioi/assets/skins/living.png')}
.appearance-thumb.pearl{background-image:url('/ioi/assets/skins/pearl.webp')}.appearance-thumb.terra{background-image:url('/ioi/assets/skins/terra.webp')}.appearance-thumb.tide{background-image:url('/ioi/assets/skins/tide.webp')}.appearance-thumb.forge{background-image:url('/ioi/assets/skins/forge.webp')}
.appearance-thumb.developer{background-color:#03070a;background-image:linear-gradient(#42d7fb26 1px,transparent 1px),linear-gradient(90deg,#42d7fb26 1px,transparent 1px);background-size:16px 16px}.appearance-thumb.focus{background:#161a19}
.appearance-background-label{display:block;font-size:14px;font-weight:600;margin-bottom:9px}
.appearance-dialog select{display:block;width:100%;min-height:46px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:14px}
.appearance-dialog select:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.appearance-help{font-size:12px!important;margin-top:10px!important}
.appearance-status{min-height:20px;font-size:12px!important;line-height:1.6;margin-top:14px!important;color:var(--muted)}
.appearance-dialog-footer{display:flex;justify-content:flex-end;margin-top:15px}
.appearance-dialog-footer button{min-height:44px}
@media(max-width:1200px){.masthead{gap:22px}.masthead nav{gap:18px}.masthead>.appearance-open{padding-inline:11px}.masthead>.button.compact{gap:10px}}
@media(max-width:1000px){.masthead nav{display:none}.masthead>.appearance-open{margin-left:auto}.masthead>.button.compact{margin-left:0}}
@media(max-width:540px){.masthead{gap:10px}.masthead>.button.compact{font-size:11px;padding:10px;gap:6px}.masthead>.appearance-open{font-size:11px;padding-inline:9px}.masthead>.appearance-open .appearance-dot{display:none}.appearance-dialog{padding:20px}.appearance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.appearance-thumb{height:58px}.appearance-choice-name{font-size:11px;padding-left:30px}.appearance-choice input{left:9px;width:14px;height:14px;bottom:13px}}
@media(max-width:360px){.masthead>.button.compact{display:none}.appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}