@layer skins {
  /* A skin changes materials and light while the working layout stays put. */
  :root {
    --ui-font:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --control-corner:14px;
    --thumb:var(--orb);
    font-family:var(--ui-font);
  }
  .begin-button,.preview-button,.choice>span,select,.band-inner,.hold-action,dialog {
    border-radius:var(--control-corner);
  }
  .range::-webkit-slider-thumb{background:var(--thumb)}
  .range::-moz-range-thumb{background:var(--thumb)}
  .field-light {
    background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--glow) 24%,transparent),transparent 53%),radial-gradient(ellipse at 0% 76%,color-mix(in srgb,var(--other) 13%,transparent),transparent 54%);
  }
  .field-pattern{mask-image:linear-gradient(#000a,transparent 90%);filter:none}
  .identity>div{min-width:0}

  /* orthogarden — phosphorescent growth rings and soft organic enclosures. */
  [data-skin="orthogarden"]{--control-corner:28px;--thumb:#fa8bdf}
  [data-skin="orthogarden"] .wordmark{color:#f3ffe9;text-shadow:0 0 35px #c3ff4d25}
  [data-skin="orthogarden"] .field-pattern{
    background:repeating-radial-gradient(ellipse at 112% -8%,transparent 0 50px,#bfff7040 51px,transparent 52px 77px),repeating-radial-gradient(ellipse at -30% 80%,transparent 0 88px,#ff84cd30 89px,transparent 90px 140px);
    opacity:.32;
  }
  [data-skin="orthogarden"] .begin-button{background:linear-gradient(110deg,#dbff6b,#b9ff51 55%,#89f3a1);box-shadow:0 5px 0 #173723,0 0 32px #b7ff4916,inset 0 1px 0 #faffdc}
  [data-skin="orthogarden"] .choice>span{border-color:#649c654d;background:linear-gradient(130deg,#173d2dcc,#0b211a99)}
  [data-skin="orthogarden"] .choice input:checked+span{background:#c3ff4d;color:#142500;border-color:#d6ff94}
  [data-skin="orthogarden"] .hold-row{border-color:#bfff6a18}
  [data-skin="orthogarden"] .settings-tabs button[aria-selected="true"]{color:var(--accent)}
  [data-skin="orthogarden"] .orb-core{background:radial-gradient(ellipse at 30% 20%,#ffd1f3 0%,#fa6fdd 24%,#9738a8 47%,#102e24 77%,#a5e884 98%);box-shadow:inset 0 0 0 1px #eaffc999,inset -9px -8px 24px #baff4b6b,0 0 46px #f84ce72b}
  [data-skin="orthogarden"] .orb-inner{inset:20%;border:1px solid #e5ff8880;background:radial-gradient(ellipse at 70% 65%,#14382d70,transparent 75%);box-shadow:0 0 0 10px #d3ff7a08,inset 0 0 25px #70e5a347;transform:rotate(-30deg)}
  [data-skin="orthogarden"] .orb-orbit{border-color:#bcff4c50;box-shadow:0 0 0 9px #bdff4a08,0 0 0 26px #fa6fdd06}

  /* epistemostasis — an amber display in a cobalt instrument housing. */
  [data-skin="epistemostasis"]{--ui-font:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--control-corner:3px;--thumb:#69b5ff}
  [data-skin="epistemostasis"] .wordmark,[data-skin="epistemostasis"] .small-wordmark{color:#ffdc85;text-shadow:0 2px 0 #000}
  [data-skin="epistemostasis"] .field-light{background:radial-gradient(ellipse at 60% 5%,#2e71d032,transparent 60%)}
  [data-skin="epistemostasis"] .field-pattern{background-image:repeating-linear-gradient(0deg,#132e5360 0 1px,transparent 1px 4px),linear-gradient(#4b8cc32c 1px,transparent 1px),linear-gradient(90deg,#4b8cc32c 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;opacity:.55}
  [data-skin="epistemostasis"] .begin-button,[data-skin="epistemostasis"] .preview-button{background:linear-gradient(#ffdd87 0%,#f5bb46 47%,#e7a32d 50%,#ffc856 100%);border:1px solid #f9dd96;box-shadow:inset 0 1px 0 #fff7d4,inset 0 -2px 0 #a57026,0 3px 0 #030914;font-weight:700}
  [data-skin="epistemostasis"] .choice>span,[data-skin="epistemostasis"] select,[data-skin="epistemostasis"] .band-inner{background:linear-gradient(#233858,#14233c);border:1px solid #527199;box-shadow:inset 1px 1px 0 #6181aa33,inset -1px -1px 0 #050b18}
  [data-skin="epistemostasis"] .choice input:checked+span{color:#ffd275;background:linear-gradient(#102744,#071526);border-color:#eeb84f;box-shadow:inset 0 2px 6px #020714,0 0 10px #ffbd3910}
  [data-skin="epistemostasis"] .settings-tabs{border-bottom-color:#4a658b}
  [data-skin="epistemostasis"] .preset{border-radius:3px}
  [data-skin="epistemostasis"] .hold-select select{background:#050c1c;border-color:#304b6e;box-shadow:inset 0 1px 6px #0008}
  [data-skin="epistemostasis"] .phase-copy h1{font-family:var(--ui-font);font-size:clamp(1.75rem,7vw,2.5rem);letter-spacing:-.05em;color:#ffd275}
  [data-skin="epistemostasis"] .orb-core{background:repeating-linear-gradient(0deg,#07112000 0 2px,#050f2a36 2px 3px),radial-gradient(circle at 44% 40%,#ffe7a0 0%,#ffbd37 19%,#cc7519 44%,#112139 75%,#030c20 100%);box-shadow:inset 0 0 0 2px #ffdb799c,0 0 0 7px #0b1c34,0 0 0 8px #7197c966,0 0 36px #ffac3226}
  [data-skin="epistemostasis"] .orb-inner{inset:16%;border:1px dashed #fff3b55c;background:none;box-shadow:none;transform:none}
  [data-skin="epistemostasis"] .orb-glint{display:none}
  [data-skin="epistemostasis"] .orb-orbit{inset:-7%;border:1px dashed #53a8ff80;box-shadow:none}
  [data-skin="epistemostasis"] .round-track i{border-radius:0;height:3px}

  /* cryptopresence — polished metal, almost-black glass, and a trace of heat. */
  [data-skin="cryptopresence"]{--control-corner:3px 17px 3px 17px;--thumb:#d5f5ff}
  [data-skin="cryptopresence"] .wordmark,[data-skin="cryptopresence"] .small-wordmark{background:linear-gradient(175deg,#fff 12%,#a6b7c6 43%,#f5fdff 48%,#70899d 67%,#d4eaff 90%);background-clip:text;-webkit-background-clip:text;color:transparent}
  [data-skin="cryptopresence"] .field-light{background:radial-gradient(ellipse at 100% 30%,#c630191b,transparent 42%),radial-gradient(ellipse at 0% 70%,#358aaa16,transparent 54%)}
  [data-skin="cryptopresence"] .field-pattern{background:linear-gradient(90deg,transparent 7%,#7cd4ed55 7.1%,transparent 7.2%,transparent 92.8%,#ff805c66 92.9%,transparent 93%),repeating-linear-gradient(0deg,transparent 0 63px,#a5c7da22 64px,transparent 65px 128px);opacity:.36}
  [data-skin="cryptopresence"] .begin-button{background:linear-gradient(175deg,#3f4e5b 0%,#222d36 45%,#141b23 48%,#2a343d 100%);color:#f1faff;border:1px solid #95b5c374;border-left:3px solid #ff805c;box-shadow:inset 0 1px 0 #eefaff3d,0 4px 0 #000,0 0 24px #ff542018}
  [data-skin="cryptopresence"] .begin-button>.icon,[data-skin="cryptopresence"] .begin-button span>.icon{color:#ff956d}
  [data-skin="cryptopresence"] .choice>span,[data-skin="cryptopresence"] .band-inner{background:linear-gradient(130deg,#202b36bd,#0c1118);border-color:#8294a142;box-shadow:inset 0 1px 0 #cee6f51a}
  [data-skin="cryptopresence"] .choice input:checked+span{background:#351710;border-color:#ff805c;color:#ffad90}
  [data-skin="cryptopresence"] .preset{border-radius:3px 9px 3px 9px}
  [data-skin="cryptopresence"] .orb-core{background:conic-gradient(from -35deg,#e0f9ff 0deg,#263543 37deg,#e9fbff 68deg,#829eae 97deg,#0b141d 151deg,#a1c0d2 211deg,#e6faff 247deg,#294655 289deg,#e0f9ff 360deg);box-shadow:inset 0 0 0 1px #e6f7ffcc,inset 0 0 20px #06101d,0 0 0 4px #141e29,0 0 0 5px #9ed3e43b,0 0 45px #ff4a2726}
  [data-skin="cryptopresence"] .orb-inner{inset:19%;background:radial-gradient(circle at 35% 28%,#725c68,#111a24 43%,#060a11 67%,#fc7e54 97%);border:1px solid #d9eeffbf;box-shadow:0 0 0 3px #06101d80,inset 0 0 25px #000;transform:none}
  [data-skin="cryptopresence"] .orb-orbit{border:1px solid #ff805c73;border-bottom-color:#78e5ff88;border-right-color:transparent;box-shadow:none;transform:rotate(-30deg)}

  /* velum — ruby silk, fine gold inlay, and a luminous jade lens. */
  [data-skin="velum"]{--ui-font:"Iowan Old Style","Palatino Linotype",Georgia,serif;--control-corner:20px 4px 20px 4px;--thumb:#95f2d7}
  [data-skin="velum"] .wordmark,[data-skin="velum"] .small-wordmark{color:#f8de94;text-shadow:0 2px 0 #09001055}
  [data-skin="velum"] .field-pattern{background:repeating-linear-gradient(55deg,transparent 0 74px,#f7d87942 75px,transparent 76px 150px),repeating-linear-gradient(-55deg,transparent 0 74px,#f7d87942 75px,transparent 76px 150px);opacity:.2;mask-image:linear-gradient(#0009,transparent 83%)}
  [data-skin="velum"] .field-light{background:radial-gradient(ellipse at 90% 0%,#f2639a36,transparent 56%),radial-gradient(ellipse at 0% 90%,#75d8c119,transparent 56%)}
  [data-skin="velum"] .begin-button{background:linear-gradient(115deg,#e7bb69,#ffe7a2 45%,#ebc87c);border:3px double #75451d;box-shadow:0 4px 12px #18001345,inset 0 0 0 2px #fbe29e;font-weight:600;letter-spacing:.025em}
  [data-skin="velum"] .choice>span,[data-skin="velum"] .band-inner{background:linear-gradient(130deg,#68244980,#3b102a);border-color:#e4b76959}
  [data-skin="velum"] .choice input:checked+span{color:#b3ffe8;background:#163e37;border-color:#83d9b7;box-shadow:inset 0 0 0 3px #350e2522}
  [data-skin="velum"] .preview-button{background:linear-gradient(115deg,#f7d879,#ffedb8);border:1px solid #f7d879;outline-color:#e8cd8099}
  [data-skin="velum"] .preset{border-radius:2px 12px 2px 12px;border-color:#ecce6b44}
  [data-skin="velum"] .control-label output,[data-skin="velum"] .hold-select select{color:#9be9d1}
  [data-skin="velum"] .orb-core{background:radial-gradient(ellipse at 32% 20%,#eeffdb 0%,#aeffdb 15%,#5dc3a6 45%,#16464a 74%,#d3d78d 100%);box-shadow:inset 0 0 0 1px #fff4bbba,inset 0 0 26px #205b5880,0 0 0 5px #350e25,0 0 0 6px #edcf7777,0 0 36px #62f6d32b}
  [data-skin="velum"] .orb-inner{inset:11%;background:radial-gradient(ellipse at 80% 85%,#15343626,transparent 60%);border:1px solid #fff1a84d;box-shadow:inset 0 0 30px #deefae33;transform:none}
  [data-skin="velum"] .orb-orbit{inset:-6%;border:1px solid #f1d5785c;box-shadow:0 0 0 7px #f4cf6211}

  /* metanoosphere — ultramarine, fluorescent ink, and liquid spectral glass. */
  [data-skin="metanoosphere"]{--ui-font:"Trebuchet MS","Avenir Next",sans-serif;--control-corner:25px;--thumb:#ff9be9}
  [data-skin="metanoosphere"] .wordmark{color:#f0ff91;text-shadow:3px 3px 0 #061644,0 0 35px #a1ffef24}
  [data-skin="metanoosphere"] .field-light{background:radial-gradient(ellipse at 100% 0%,#ff54e66b,transparent 57%),radial-gradient(ellipse at -10% 85%,#36ffcb3b,transparent 55%)}
  [data-skin="metanoosphere"] .field-pattern{background:repeating-radial-gradient(ellipse at 110% 30%,transparent 0 82px,#8fffea99 83px,transparent 84px 114px),repeating-linear-gradient(135deg,transparent 0 140px,#ffc9f329 141px,transparent 142px 280px);opacity:.16;mask-image:linear-gradient(#000,transparent 90%)}
  [data-skin="metanoosphere"] .begin-button{background:linear-gradient(115deg,#f2ff5c,#ccff93);border:2px solid #132359;box-shadow:4px 4px 0 #10184f,inset 0 1px 0 #ffffe0}
  [data-skin="metanoosphere"] .choice>span{background:#153b9a;border-color:#a8c8ff73;box-shadow:2px 2px 0 #05184655}
  [data-skin="metanoosphere"] .choice input:checked+span{color:#152753;background:#ff9ce4;border-color:#ffccf8;box-shadow:2px 2px 0 #071748}
  [data-skin="metanoosphere"] .preview-button{background:#f0ff60;border-color:#f9fcff;outline-color:#ffd0f3;box-shadow:3px 3px 0 #0c1c59}
  [data-skin="metanoosphere"] .band-inner{background:#183892;border-color:#a9d8ff66}
  [data-skin="metanoosphere"] .band-choice input:checked+.band-inner{background:#21437c;border-color:#bfff99}
  [data-skin="metanoosphere"] .preset{border:1px solid #c8dcff69}
  [data-skin="metanoosphere"] .orb-core{background:radial-gradient(ellipse at 27% 18%,#fffbc1ba,transparent 45%),conic-gradient(from 55deg,#fd77d8,#dd73fc,#81c7ff,#4ef4c0,#eafa6b,#ffc18a,#fd77d8);box-shadow:inset 0 0 0 1px #f9fcff,inset -8px -8px 32px #16278d6b,0 0 0 4px #152c8750,0 0 0 5px #ceffff88,0 0 50px #fa68df44}
  [data-skin="metanoosphere"] .orb-inner{inset:16%;background:linear-gradient(135deg,#ffffff35,transparent 50%,#093b7255);border:1px solid #fdffffb3;box-shadow:inset 0 0 0 8px #254fb212,0 0 0 12px #f4efff13;transform:rotate(-35deg) scaleX(.84)}
  [data-skin="metanoosphere"] .orb-orbit{inset:-7%;border:1px solid #a7ffb680;box-shadow:0 0 0 12px #ffb1ea0c;transform:rotate(32deg) scaleY(.85)}

  /* aletheia — daylight porcelain, cobalt ink, and a copper eclipse. */
  [data-skin="aletheia"]{--control-corner:5px;--thumb:#c94c24}
  [data-skin="aletheia"] .wordmark{color:#173bac;text-shadow:0 1px 0 #fff}
  [data-skin="aletheia"] .field-light{background:linear-gradient(118deg,transparent 7%,#ffffff7d 24%,#ffffff12 42%,transparent 60%),radial-gradient(ellipse at 95% 5%,#efd5ad3b,transparent 56%),radial-gradient(ellipse at 5% 80%,#769be41a,transparent 58%)}
  [data-skin="aletheia"] .field-pattern{background-image:url('./porcelain-grain.svg');background-size:192px 192px;opacity:.66;mix-blend-mode:multiply;mask-image:none}
  [data-skin="aletheia"] .begin-button{background:linear-gradient(170deg,#4566e8,#2046d5 52%,#193bb8);border:1px solid #173aad;box-shadow:inset 0 1px 1px #b6cbff85,inset 0 -2px 2px #10267733,0 3px 0 #a9b5c9,0 5px 12px #1a355417;color:#fff}
  [data-skin="aletheia"] .choice>span,[data-skin="aletheia"] .band-inner,[data-skin="aletheia"] select{background:url('./porcelain-grain.svg'),linear-gradient(155deg,#fffef7,#f5f5eb 46%,#e9ede7);border:1px solid #9daab6;box-shadow:inset 0 2px 2px #ffffffcc,inset 0 -2px 3px #5164790e,0 2px 4px #31455e0a}
  [data-skin="aletheia"] .choice input:checked+span{background:#2046d5;color:#fff;border-color:#2046d5}
  [data-skin="aletheia"] .preview-button{background:#2046d5;color:#fff;border-color:#ecf0eb;outline-color:#2046d5}
  [data-skin="aletheia"] .band-choice input:checked+.band-inner{background:#dce5ff;border-color:#2046d5}
  [data-skin="aletheia"] .preset{border-radius:4px;border-color:#9ba8b8}
  [data-skin="aletheia"] .preset.selected{background:#dce5ff;border-color:#2046d5}
  [data-skin="aletheia"] .control-label output,[data-skin="aletheia"] .hold-select select{color:#a83c20}
  [data-skin="aletheia"] .safety-note{color:#4c5d70}
  [data-skin="aletheia"] .orb-core{background:radial-gradient(ellipse at 32% 18%,#fff8d5 0%,#ffd293 16%,#fb8f47 34%,#ad472f 48%,#162651 73%,#061437 100%);box-shadow:inset 0 0 0 1px #071c4380,inset 0 0 24px #061d54b3,0 0 0 5px #f8f9ef,0 0 0 6px #2046d550,0 14px 35px #1c33502a}
  [data-skin="aletheia"] .orb-halo{background:radial-gradient(circle,#152b4826,transparent 68%)}
  [data-skin="aletheia"] .orb-inner{inset:16%;background:radial-gradient(ellipse at 29% 18%,#fffdf04a,transparent 43%),radial-gradient(ellipse at 30% 25%,#ffe7ae20,transparent 65%);border:1px solid #eaf3ec6b;box-shadow:inset 0 1px 2px #fff8d670,inset 0 0 18px #0b1d4b35;transform:none}
  [data-skin="aletheia"] .orb-orbit{border:1px solid #2046d56b;box-shadow:0 1px 0 #ffffffc4,0 0 0 4px #fcfcf328}
  [data-skin="aletheia"] .hold-action{color:#143bb3;background:#e0e7fd;border-color:#5974c0}

  /* Swatches keep their own materials and readable ink under every active skin. */
  .skin-grid{gap:12px}
  .skin-tile{position:relative;isolation:isolate;overflow:hidden;gap:10px;min-height:145px;padding:20px 9px 16px;border:1px solid color-mix(in srgb,var(--swatch-text) 28%,transparent);background:var(--swatch-field);color:var(--swatch-text);font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border-radius:12px}
  .skin-name{font-size:.8125rem;line-height:1.4;font-weight:500;white-space:nowrap}
  .skin-style{color:var(--swatch-muted);font-size:.75rem;line-height:1.4}
  .skin-swatch{margin-bottom:1px;box-shadow:0 0 20px color-mix(in srgb,var(--swatch) 18%,transparent)}
  .skin-choice input:checked+.skin-tile{border-color:var(--swatch);color:var(--swatch-text);box-shadow:inset 0 0 0 1px var(--swatch),0 0 18px color-mix(in srgb,var(--swatch) 8%,transparent)}
  .skin-choice:hover .skin-tile{border-color:var(--swatch);transform:translateY(-2px)}
  [data-preview="orthogarden"] .skin-tile{border-radius:26px;background:repeating-radial-gradient(ellipse at 100% 0%,transparent 0 22px,#baff6a18 23px,transparent 24px 37px),#0b2b20}
  [data-preview="epistemostasis"] .skin-tile{border-radius:3px;background:repeating-linear-gradient(0deg,#0b1b3040 0 1px,transparent 1px 4px),linear-gradient(#1d3150,#091326);border-top-color:#6489b9;border-bottom-color:#030b1b}
  [data-preview="cryptopresence"] .skin-tile{border-radius:3px 18px 3px 18px;background:linear-gradient(155deg,#354451,#111820 25%,#08090d 65%,#59261d);border-top-color:#98b3c4}
  [data-preview="velum"] .skin-tile{border-radius:20px 4px 20px 4px;background:repeating-linear-gradient(55deg,transparent 0 30px,#f7d8790c 31px,transparent 32px 60px),linear-gradient(150deg,#591b3e,#350e25);border-color:#ddc07880}
  [data-preview="metanoosphere"] .skin-tile{border-radius:23px;background:radial-gradient(ellipse at 100% 0%,#fa4ce166,transparent 80%),#123baf;border-color:#b7d1fd8c}
  [data-preview="aletheia"] .skin-tile{border-radius:5px;background:url('./porcelain-grain.svg'),linear-gradient(135deg,#fffef5,#edf0e9 55%,#dde5e8);border-color:#98a7bf;box-shadow:inset 0 2px 2px #ffffffcc,inset 0 -2px 4px #31456912}
  .skin-caption{align-items:flex-start;line-height:1.7;max-width:100%;font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .skin-caption .accent-dot{margin-top:8px}
  .skin-caption>span:last-child{min-width:0}
  .preview-button:disabled{background:var(--soft);color:var(--muted);border:1px solid var(--line);outline-color:transparent;box-shadow:none}
  .choice input:focus-visible+span,.band-choice input:focus-visible+.band-inner{outline:2px solid var(--accent);outline-offset:4px}

  @media(max-width:600px){
    .skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .skin-tile{min-height:132px;padding:17px 8px 14px}
    .skin-name{font-size:.8125rem}
    .skin-style{font-size:.75rem}
    [data-skin="epistemostasis"] .session-summary{font-size:.75rem;white-space:normal;max-width:210px}
    [data-skin="epistemostasis"] .session-summary span{margin:0 1px}
    [data-skin="epistemostasis"] .preflight{flex-wrap:wrap;gap:5px 12px}
    [data-skin="epistemostasis"] .footer-line>span:nth-child(2){display:none}
  }
  @media(max-width:370px){.skin-grid{gap:9px}.skin-name{font-size:.75rem}.skin-style{font-size:.75rem}}
  @media(prefers-reduced-motion:reduce){.skin-choice:hover .skin-tile{transform:none}}
  @media(forced-colors:active){
    .wordmark,.small-wordmark{background:none!important;color:CanvasText!important;text-shadow:none!important}
    .orb-core{background:Canvas!important;border:2px solid CanvasText!important}
    .skin-tile,.choice>span,.band-inner{background:Canvas!important;color:CanvasText!important}
    .skin-choice input:checked+.skin-tile,.choice input:checked+span,.band-choice input:checked+.band-inner{border:2px solid Highlight!important}
    .skin-style{color:CanvasText}
  }
}