/* Register an angle so the conic-gradient's highlight interpolates smoothly.
   The registered angle animates: the card and its fixed border never rotate. */
@property --runner-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Modern CSS-only studio
   Original, generic educational demonstrations; no imported assets or Atlas-specific
   source, design tokens or proprietary components. No JavaScript is loaded here except
   the optional site-wide motion preference enhancer. Each experiment stands alone. */
@layer components {
  .studio-layout{padding-block:3.2rem 6rem}
  .studio-intro{max-width:920px;padding-bottom:2.2rem;border-bottom:1px solid var(--line)}
  .studio-intro h1{margin:1rem 0 1.4rem;max-width:890px}
  .studio-intro .editorial-lead{max-width:800px}
  .studio-toc{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem}
  .studio-toc a{border:1px solid #7d9188;color:var(--accent);padding:.38rem .8rem;border-radius:100px;font-weight:750;font-size:.85rem;text-decoration:none}
  .studio-toc a:hover{background:#e1eae1}
  .studio-section{padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line);scroll-margin-top:1.5rem}
  .studio-section-head{max-width:830px}
  .studio-section h2{margin:.35rem 0 1rem}
  .studio-section-head>p:not(.section-kicker){font-size:1.08rem;color:var(--muted)}
  .studio-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.2rem 1.8rem}
  .studio-badges span{font-size:.77rem;letter-spacing:.05em;border:1px solid #75897b;border-radius:100px;padding:.16rem .65rem;background:#f8f7ef}
  .studio-card-stage{background:#172d2e;color:#f4f5e9;border-radius:.45rem;padding:clamp(1.2rem,4vw,3rem);margin-block:2rem;isolation:isolate}
  .stage-topline{color:#c8d5ca;font-size:.76rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;margin-bottom:1.5rem}
  .ambient-toggle{display:flex;align-items:center;gap:.6rem;min-height:44px;color:#fff;font-size:.9rem;font-weight:650;margin-bottom:1.5rem}
  .ambient-toggle input{width:21px;height:21px;accent-color:#bfd4ba}
  .ambient-shelf{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2.1rem);padding-block:1rem}
  .ambient-shelf::before{content:"";position:absolute;pointer-events:none;inset:10% -1rem;background:radial-gradient(ellipse at 16% 40%,#749b9145,transparent 55%);opacity:0;transition:opacity .35s ease}
  .studio-card-stage:has(#ambient-enabled:checked) .ambient-shelf::before{opacity:1}
  .luminous-card{--edge:#c9d39d;position:relative;isolation:isolate;min-width:0;display:flex;flex-direction:column;gap:1rem;border-radius:18px;padding:clamp(1.15rem,3vw,2.1rem);border:1px solid #829b96;background:linear-gradient(155deg,#335351 0%,#20393c 65%,#192d32 100%);color:#eff7eb;box-shadow:0 18px 25px #0a1e2030;overflow:visible}
  .luminous-card.alt{--edge:#dda77e;background:linear-gradient(155deg,#46424a,#263638 75%)}
  .luminous-card::before{content:"";position:absolute;inset:-11px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 90%,var(--edge),transparent 55%);opacity:0;filter:blur(15px);transition:opacity .23s ease}
  .luminous-card:hover::before,.luminous-card:focus-within::before,.studio-card-stage:has(#ambient-enabled:checked) .luminous-card::before{opacity:.35}
  /* Two independent surfaces: the card stays fixed, while a light segment
     travels around an unchanging edge track. Never rotate the border box. */
  .luminous-card .edge-track{position:absolute;inset:-2px;z-index:2;border:2px solid transparent;border-radius:20px;pointer-events:none;opacity:0;--runner-angle:0deg;background:conic-gradient(from var(--runner-angle),transparent 0deg,transparent 263deg,var(--edge) 324deg,transparent 357deg) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude}
  .luminous-card:hover .edge-track,.luminous-card:focus-within .edge-track{animation:edge-run 1.6s ease-in-out 1 both}
  @keyframes edge-run{
    0%{--runner-angle:-140deg;opacity:0}
    12%{opacity:1}
    86%{opacity:1}
    100%{--runner-angle:220deg;opacity:0}
  }
  .luminous-card>*{position:relative;z-index:1}
  .luminous-card .card-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#c4e4d8;font-weight:800}
  .luminous-card h3{font:500 clamp(1.8rem,3vw,2.4rem)/1.12 var(--display);letter-spacing:-.02em}
  .luminous-card p{color:#e1e8dc}
  .luminous-card .card-symbol{display:grid;place-items:center;min-height:95px;overflow:hidden;background:radial-gradient(circle at 55% 50%,#e8cba855,transparent 50%)}
  .card-symbol svg{width:130px;max-width:100%;height:100px}
  .luminous-card .card-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #d9e2cd;background:#e4edda;color:#1b3935;border-radius:.35rem;padding:.55rem 1rem;text-decoration:none;font-weight:800;align-self:start}
  .luminous-card .card-action:hover{background:#fff}
  .studio-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-block:1.5rem}
  .studio-code-grid pre{font-size:.82rem}
  .studio-note{margin:1.5rem 0;padding:1rem 1.3rem;border-left:4px solid #2c6a5a;background:#e3eae0}
  .studio-note p{margin:.4rem 0 0}
  .svg-exhibit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center;background:#213a3b;padding:2rem;border-radius:.45rem;color:#e9f2e7;margin-block:1.8rem}
  .svg-exhibit svg{width:100%;max-height:270px}
  .svg-exhibit p{color:#d8e9e5}
  .svg-switch{display:flex;align-items:center;gap:.65rem;min-height:44px;margin-bottom:1rem}
  .svg-switch input{width:21px;height:21px;accent-color:#cfe9c4}
  .svg-exhibit .svg-illustration .trace{stroke-dasharray:100;stroke-dashoffset:0}
  .svg-exhibit:has(#svg-trace-toggle:checked) .trace{animation:draw-trace 1.6s ease-out 1 both}
  
  @keyframes draw-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  .chart-exhibit{background:#f8f6ee;border:1px solid var(--line);padding:clamp(1.1rem,3vw,2rem);margin-block:1.8rem}
  .chart-exhibit .chart-switch{display:flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;min-height:44px;font-weight:750}
  .chart-switch input{width:20px;height:20px}
  .chart-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:220px;gap:1rem;align-items:end;border-bottom:2px solid #376458;padding:0 1rem}
  .chart-bar{height:var(--a);min-height:2px;background:#276957;border-radius:5px 5px 0 0;position:relative;transition:height .3s ease}
  .chart-bar:nth-child(even){background:#c67d5d}
  .chart-exhibit:has(#chart-period:checked) .chart-bar{height:var(--b)}
  .chart-x{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;gap:1rem;padding:1rem .5rem;font-size:.8rem;font-weight:750}
  .chart-exhibit table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.9rem}
  .chart-exhibit caption{text-align:left;font-weight:750;margin-bottom:.4rem}
  .chart-exhibit th,.chart-exhibit td{border-bottom:1px solid #b6c8bb;text-align:left;padding:.5rem}
  .chart-exhibit thead{background:#dce7dd}
  .mini-game{border:1px solid #aeb9ae;background:#faf8f0;padding:clamp(1rem,3vw,2rem);margin-block:1.8rem}
  .mini-game fieldset{margin:0;padding:0;border:0}
  .mini-game legend{font-size:1.05rem;font-weight:750;margin-bottom:1rem}
  .game-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .game-options label{display:flex;align-items:start;gap:.7rem;cursor:pointer;padding:1rem;border:2px solid #80958b;border-radius:.4rem;background:#f1f4ec;min-height:108px}
  .game-options label:has(input:checked){border-color:#14514c;background:#dcead9}
  .game-options input{width:20px;height:20px;flex-shrink:0}
  .game-options span{font-weight:800}
  .game-response{display:none;padding:1rem;background:#deeadf;border-left:4px solid #216c4c;margin-top:1rem}
  .mini-game:has(#option-a:checked) .response-a,.mini-game:has(#option-b:checked) .response-b,.mini-game:has(#option-c:checked) .response-c{display:block}
  .game-response strong{display:block;margin-bottom:.25rem}
  .mini-game details{margin-top:1.4rem;padding:.8rem;border:1px solid #8da29a;background:#fff}
  .mini-game summary{font-weight:750;cursor:pointer}
  .studio-footer-link{display:inline-block;margin-block:2rem;font-weight:800}
}
@media(max-width:800px){.ambient-shelf,.svg-exhibit,.studio-code-grid{grid-template-columns:minmax(0,1fr)}.game-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 .luminous-card::before,.ambient-shelf::before,.luminous-card .edge-track,.chart-bar{animation:none!important;transition:none!important}
 .svg-exhibit .trace{stroke-dashoffset:0}
 .svg-exhibit:has(#svg-trace-toggle:checked) .trace,
 .svg-exhibit:has(#svg-trace-toggle:checked) .satellite{animation:none!important}
}
:root[data-reduce-motion="true"] .luminous-card::before,
:root[data-reduce-motion="true"] .ambient-shelf::before,
:root[data-reduce-motion="true"] .luminous-card .edge-track,
:root[data-reduce-motion="true"] .chart-bar,
:root[data-reduce-motion="true"] .svg-exhibit .trace,
:root[data-reduce-motion="true"] .svg-exhibit .satellite{animation:none!important;transition:none!important}
:root[data-reduce-motion="true"] .svg-exhibit .trace{stroke-dashoffset:0}
@media(forced-colors:active){
 .luminous-card,.game-options label,.chart-bar{forced-color-adjust:auto;border:2px solid CanvasText}
 .luminous-card::before,.luminous-card .edge-track,.ambient-shelf::before{display:none}
}


/* Additive material studies only. The original Ember card's edge runner,
   background and activation behavior remain untouched. The other two cards
   deliberately do NOT use the runner: they keep their stationary rims lit. */
@layer components {
  .studio-card-stage {
    background:
      radial-gradient(ellipse at 72% 15%,#b8794b22,transparent 55%),
      linear-gradient(145deg,#102e31,#183b3d 53%,#142e34);
    border:1px solid #7f807361;
  }
  .ambient-shelf {gap:clamp(1rem,2.4vw,1.9rem)}

  /* 002 — always-visible, two independent gradient surfaces, thicker than
     the 2px original runner. The only motion is luminosity, never geometry. */
  .luminous-card.dual-edge {
    --edge:#f3c78e;
    border:1px solid #cbdbcf;
    background:
      radial-gradient(ellipse at 0% 0%,#68dcd521,transparent 48%),
      linear-gradient(145deg,#173d43,#102e36 62%,#132e35);
    box-shadow:0 18px 36px #071f2c79,inset 0 1px 0 #f6d9bc88;
  }
  .luminous-card.dual-edge .edge-track,
  .luminous-card.dual-edge:is(:hover,:focus-within) .edge-track {
    --runner-angle:0deg;
    inset:-4px;
    border:4px solid transparent;
    border-radius:22px;
    opacity:.85;
    z-index:2;
    background:conic-gradient(
      from 35deg,#fff5e3 0%,#ffba947a 12%,#78dcd690 28%,
      #fff5dd 39%,#ffa96d 43%,#b9eff0b0 61%,#67ebed 78%,#fff5e3 100%) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:dual-edge-breathe 7s ease-in-out infinite;
  }
  .luminous-card.dual-edge .inner-edge {
    position:absolute;inset:10px;z-index:2;pointer-events:none;
    border:3px solid transparent;border-radius:9px;
    background:conic-gradient(
      from 215deg,#fff0d2 0%,#ffb57f 6%,#73d7d67a 27%,
      #79dfe5 46%,#ffeddc 60%,#ed9cb9 68%,#82c9d687 85%,#fff0d2 100%) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:.92;
    animation:dual-inner-breathe 7s ease-in-out -2.5s infinite;
  }
  @keyframes dual-edge-breathe {
    0%,100% {opacity:.88;filter:brightness(1.05)}
    50% {opacity:1;filter:brightness(1.2)}
  }
  @keyframes dual-inner-breathe {
    0%,100% {opacity:.78;filter:brightness(1)}
    50% {opacity:1;filter:brightness(1.18)}
  }
  /* Broad corner light lives outside the masked crisp rims. A shadow on the
     masked element itself would be clipped and read as a flat colored line. */
  .luminous-card.dual-edge::before {
    inset:-13px;opacity:.65;filter:blur(13px);
    background:radial-gradient(ellipse at 0% 0%,#65eaf09c,transparent 25%),
      radial-gradient(ellipse at 100% 100%,#ffae80b0,transparent 26%);
  }
  .luminous-card.dual-edge::after {
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 3px 0 16px #65eff12e,inset -3px -2px 18px #ffbd872e;
  }
  .luminous-card.dual-edge:is(:hover,:focus-within)::before {opacity:.75;}

  /* 003 — full-width, always illuminated by default. Turning the native
     checkbox off disables only decorative lighting and leaves the content. */
  .luminous-card.glass-study {
    --edge:#ecc092;
    grid-column:1/-1;
    min-height:340px;
    border:1px solid #efc59f;
    background:
      radial-gradient(ellipse at 80% 0%,#7dccc51c,transparent 42%),
      linear-gradient(120deg,#10343c,#092730 48%,#15343d);
    box-shadow:0 24px 55px #071e2c9c,inset 0 1px 0 #dffaf4a1;
  }
  .luminous-card.glass-study .edge-track,
  .luminous-card.glass-study:is(:hover,:focus-within) .edge-track {
    inset:-4px;border:4px solid transparent;border-radius:22px;
    z-index:2;opacity:1;
    background:conic-gradient(
      from 110deg,#ffedcf,#ffa86b 5%,#f3b7dc 16%,#70f0dc 25%,
      #80dbe58c 37%,#fff8e9 50%,#ffa571 54%,#80eff4 68%,
      #8cb8ef99 80%,#f7c0db 92%,#ffedcf 100%) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:glass-edge-breathe 8.5s ease-in-out infinite;
  }
  @keyframes glass-edge-breathe {
    0%,100% {opacity:.9;filter:brightness(1.05);}
    50% {opacity:1;filter:brightness(1.23);}
  }
  .luminous-card.glass-study::before {
    opacity:.85;inset:-16px;filter:blur(16px);
    background:
      radial-gradient(ellipse at 2% 4%,#ffc18d,transparent 23%),
      radial-gradient(ellipse at 98% 96%,#ffb56d,transparent 23%),
      radial-gradient(ellipse at 72% 0%,#75dce780,transparent 32%),
      radial-gradient(ellipse at 28% 100%,#77e4c980,transparent 32%);
  }
  .luminous-card.glass-study::after {
    content:"";position:absolute;inset:9px;z-index:0;pointer-events:none;
    border-radius:10px;border:1px solid #b1e1d24d;
    background:
      linear-gradient(116deg,transparent 23%,#dff9ed03 34%,#e6fff71c 42%,#b4e9e309 48%,transparent 54%),
      linear-gradient(150deg,#c4f5e711,transparent 40%,#edba8a12);
    background-size:200% 100%,100% 100%;
    box-shadow:inset 0 1px 0 #ecffeaa3,inset 0 -1px 0 #f6ba8980,
      -6px -5px 20px #ffb87524,6px 5px 20px #ffb87524;
    animation:glass-sheen 12s ease-in-out infinite alternate;
  }
  @keyframes glass-sheen {
    from {background-position:65% 0,0 0;opacity:.8;}
    to {background-position:35% 0,0 0;opacity:1;}
  }
  .glass-study .glass-light-control {
    display:inline-flex;gap:.65rem;align-items:center;align-self:flex-start;
    min-height:44px;padding:.25rem .6rem;border:1px solid #c2dcda92;
    border-radius:.5rem;background:#0b2e3685;color:#f6ead9;
    font-size:.85rem;font-weight:700;cursor:pointer;
  }
  .glass-study .glass-light-control input {width:19px;height:19px;accent-color:#e8be91;cursor:pointer;}
  .glass-study .card-symbol {justify-content:start;min-height:100px;background:radial-gradient(ellipse at 25% 85%,#deac7d3d,transparent 54%);}
  .glass-study .card-symbol svg {width:min(330px,100%);height:130px}
  .glass-study h3 {max-width:20ch}
  .glass-study p {max-width:60ch}
  .glass-study .card-action {background:#f0d1aa;border-color:#f8debb}
  .glass-study .card-action:hover {background:#ffe2ba}
  .glass-study:has(#glass-glow-toggle:not(:checked))::before,
  .glass-study:has(#glass-glow-toggle:not(:checked))::after,
  .luminous-card.glass-study:has(#glass-glow-toggle:not(:checked)) .edge-track {
    opacity:0!important;
    animation:none!important;
    filter:none!important;
  }
  .glass-study:has(#glass-glow-toggle:not(:checked)) {
    border-color:#98aea8;
    box-shadow:0 18px 34px #071f2c79,inset 0 1px 0 #dffaf455;
  }
}
@media(max-width:800px){
  .glass-study {grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .luminous-card.dual-edge .edge-track,
  .luminous-card.dual-edge .inner-edge,
  .luminous-card.glass-study .edge-track,
  .glass-study::after {animation:none!important;transition:none!important;filter:none!important;}
}
:root[data-reduce-motion="true"] .luminous-card.dual-edge .edge-track,
:root[data-reduce-motion="true"] .luminous-card.dual-edge .inner-edge,
:root[data-reduce-motion="true"] .luminous-card.glass-study .edge-track,
:root[data-reduce-motion="true"] .glass-study::after {animation:none!important;transition:none!important;filter:none!important;}
@media(forced-colors:active){
  .luminous-card.dual-edge .edge-track,.dual-edge .inner-edge,
  .luminous-card.glass-study .edge-track,.glass-study::before,.glass-study::after,
  .dual-edge::before,.dual-edge::after {display:none!important;}
  .glass-light-control {border:2px solid CanvasText;}
}