/* Reference detail pass: sampled from the user-supplied 260 × 284 image.
   Sage #aab9b3 · amber #ffc366 · olive #989576 · neutral #e5e5e5.
   Four minor cells make one major cell. Surfaces are opaque so the original
   aurora stays outside the working panels and cannot dilute their palette. */
:root {
  --ref-sage: #aab9b3;
  --ref-amber: #ffc366;
  --ref-olive: #989576;
  --ref-gray: #e5e5e5;
  --ref-white: #f2f2f2;
  --ref-black: #000;
  --ref-cell: 16px;
  --ref-major: 64px;
  --ref-grid-minor: rgb(0 0 0 / 6%);
  --ref-grid-major: rgb(0 0 0 / 18%);
  --ink: #000;
}

.folder {
  --surface: var(--ref-sage);
  --text: var(--ref-black);
  --quiet: #303a35;
  --rule: rgb(0 0 0 / 23%);
  --tab: var(--ref-amber);
  --spot: #ee93dc;
  --grid-minor: var(--ref-grid-minor);
  --grid-major: var(--ref-grid-major);
}
.folder[data-folder=making] {
  --surface: var(--ref-sage);
  --text: var(--ref-black);
  --quiet: #303a35;
  --rule: rgb(0 0 0 / 23%);
  --tab: var(--ref-olive);
  --spot: #9be96e;
}
.folder[data-folder=color] {
  --surface: var(--ref-black);
  --text: var(--ref-white);
  --quiet: #c9cfcb;
  --rule: rgb(255 255 255 / 24%);
  --tab: var(--ref-gray);
  --spot: var(--ref-amber);
  --grid-minor: rgb(255 255 255 / 6%);
  --grid-major: rgb(255 255 255 / 16%);
}
.folders { border-color: #000; border-radius: 7px; background:#000; box-shadow:none; }
.folder-heading { border-bottom:0; }
.folder-tab { position:relative; align-items:flex-start; color:#000; background:var(--ref-gray); padding-right:17px; }
.folder-tab::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:10px; background:var(--tab); }
.folder[data-folder=making] .folder-tab::after { background:#000; }
.folder[data-folder=color] .folder-tab::after { background:var(--surface); }
.folder-label { position:relative; z-index:1; min-height:39px; height:39px; padding-top:9px; padding-bottom:9px; border-radius:12px 0 0 0; clip-path:polygon(0 0,calc(100% - 29px) 0,100% 100%,0 100%); }
.folder-label b { display:grid; place-items:center; flex-shrink:0; width:18px; height:18px; border-radius:50%; background:rgb(0 0 0 / 10%); font-size:9px; }
.folder-label small { opacity:.63; }
.folder-toggle { position:relative; z-index:1; margin-top:8px; font-size:18px; }
.folder-tab:hover { filter:none; }
.folder-tab:hover .folder-label { filter:brightness(1.04); }
.folder-tab:focus-visible { outline-offset:-4px; }
.folder-content {
  background-color:var(--surface);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:
    var(--ref-major) var(--ref-major), var(--ref-major) var(--ref-major),
    var(--ref-cell) var(--ref-cell), var(--ref-cell) var(--ref-cell);
  background-position:-1px -1px;
  isolation:isolate;
}
.folder-content::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgb(0 0 0 / 7%),rgb(0 0 0 / 7%)) 192px 0 /128px 128px no-repeat,
    linear-gradient(rgb(255 255 255 / 15%),rgb(255 255 255 / 15%)) 0 192px /128px 64px no-repeat,
    linear-gradient(rgb(0 0 0 / 5%),rgb(0 0 0 / 5%)) right 64px bottom 0 /128px 64px no-repeat;
}
.folder[data-folder=color] .folder-content::before { opacity:.5; }
.lesson-topline { color:var(--text); }
.lesson-topline i { width:6px; height:6px; border-radius:0; }
.lesson-topline>span:last-child { padding:3px 5px; background:var(--text); color:var(--surface); font-size:8px; }
.lesson-heading { position:relative; }
.lesson-heading::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; right:80px; top:8px; background:var(--spot); }
.mini-orbit { width:57px; height:57px; background:var(--text); border:0; }
.mini-orbit::before { inset:auto; top:9px; left:calc(50% - 1px); width:2px; height:10px; background:var(--surface); border:0; border-radius:0; }
.mini-orbit b { width:2px; height:10px; top:auto; bottom:9px; left:calc(50% - 1px); background:var(--surface); border-radius:0; }
.mini-orbit i,.mini-orbit b::after { display:none; }
.artwork { border-radius:0; border:1px solid rgb(0 0 0 / 22%); }
.image-label { background:var(--ref-white); color:#000; border-radius:0; }
.step-dots { gap:7px; }
.step-dots button { position:relative; color:var(--text); border-radius:0; }
.step-dots button[aria-current=step] { background:var(--text); color:var(--surface); border-radius:0; }
.step-dots button[aria-current=step]::before { content:''; position:absolute; inset:3px; border:1px solid currentColor; border-radius:50%; opacity:.8; }
.next-step { border-radius:2px; }
.next-step>span { display:grid; place-items:center; background:var(--surface); color:var(--text); width:19px; height:19px; border-radius:50%; font-size:16px; }
.brand-heading h1>span { color:#000; }
.brand-mascot {
  background-image:
    linear-gradient(rgb(0 0 0 / 13%) 1px,transparent 1px),
    linear-gradient(90deg,rgb(0 0 0 / 13%) 1px,transparent 1px),
    linear-gradient(rgb(0 0 0 / 4%) 1px,transparent 1px),
    linear-gradient(90deg,rgb(0 0 0 / 4%) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,16px 16px,16px 16px;
  background-position:-1px -1px;
}
.dial,.dial-button.is-current .dial { background:#000; }
.dial-disc em { display:none; }
.dial-disc i { background:var(--ref-white); width:1.5px; height:10px; }
.dial-light { background:#ee93dc; width:5px; height:5px; }
.dial-button:nth-child(2) .dial-light { background:#9be96e; }
.dial-button:nth-child(3) .dial-light { background:var(--ref-amber); }
.dial-button.is-current .dial-light { background:#ee93dc; box-shadow:0 0 0 2px var(--paper),0 0 0 3px #000; }
.dial-button:nth-child(2).is-current .dial-light { background:#9be96e; }
.dial-button:nth-child(3).is-current .dial-light { background:var(--ref-amber); }
.dial-button.is-current .dial-name { text-decoration:underline; text-underline-offset:4px; }
.dial-index { color:#000; font-weight:600; }
.footer-eyes>i { background:#000; }
.footer-eyes>i::after { background:var(--ref-white); }
@media(max-width:760px) {
  :root { --ref-cell:12px; --ref-major:48px; }
  .folder-label { min-height:36px; height:36px; padding-top:7px; padding-bottom:7px; line-height:22px; }
  .folder-label b { width:17px; height:17px; font-size:8px; }
  .folder-toggle { margin-top:7px; }
  .folder-content::before { background-position:96px 0,0 192px,right 0 bottom 0; background-size:96px 96px,48px 96px,96px 48px; }
  .mini-orbit { width:46px; height:46px; }
  .mini-orbit::before,.mini-orbit b { height:8px; }
  .mini-orbit::before { top:8px; }
  .mini-orbit b { bottom:8px; }
  .lesson-heading::after { right:61px; top:6px; }
  .lesson-topline>span:last-child { font-size:6px; padding:2px 4px; }
  .brand-mascot { background-size:48px 48px,48px 48px,12px 12px,12px 12px; }
}