/* SHOPLET_ORRERY_P1_V001 */
.shoplet-orrery{position:relative;width:min(100%,1120px);margin:28px auto 34px;min-height:clamp(420px,58vw,690px);overflow:hidden;isolation:isolate;border-radius:32px;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.075),transparent 16%),radial-gradient(circle at 50% 50%,rgba(120,150,255,.045),transparent 42%);touch-action:pan-y}
.shoplet-orrery::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.015) 22%,transparent 58%);filter:blur(18px);pointer-events:none}
.shoplet-orrery__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.shoplet-orrery[data-ready="true"] .shoplet-orrery__canvas{opacity:1}
.shoplet-orrery__core{position:absolute;left:50%;top:50%;z-index:3;width:130px;height:130px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;text-align:center}
.shoplet-orrery__core::before{content:"";position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 46px rgba(255,255,255,.12),inset 0 0 28px rgba(255,255,255,.06)}
.shoplet-orrery__core-mark{position:relative;display:grid;gap:2px;font-size:10px;font-weight:800;letter-spacing:.28em;line-height:1.25;text-transform:uppercase;color:rgba(255,255,255,.72)}
.shoplet-orrery__status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.shoplet-orrery__fallback{position:absolute;inset:0;z-index:2}
.shoplet-orrery[data-ready="true"] .shoplet-orrery__fallback{opacity:0;pointer-events:none}
.shoplet-orrery__planet{--x:50%;--y:50%;--s:1;position:absolute;left:var(--x);top:var(--y);width:clamp(48px,7vw,76px);aspect-ratio:1;padding:0;border:0;border-radius:22%;transform:translate(-50%,-50%) scale(var(--s));background:transparent;cursor:pointer;transition:transform .22s ease}
.shoplet-orrery__planet img{width:100%;height:100%;display:block;border-radius:22%;box-shadow:0 12px 35px rgba(0,0,0,.34)}
.shoplet-orrery__planet:focus-visible{outline:3px solid currentColor;outline-offset:5px}
#apps .app.orrery-target-pulse{animation:orrery-target-pulse 1.05s ease-out}
@keyframes orrery-target-pulse{0%{outline:1px solid rgba(255,255,255,.55);outline-offset:2px}100%{outline:1px solid transparent;outline-offset:18px}}
@media(hover:hover) and (pointer:fine){.shoplet-orrery__planet:hover{transform:translate(-50%,-50%) scale(calc(var(--s)*1.08))}}
@media(max-width:640px){.shoplet-orrery{min-height:470px;margin-top:18px;border-radius:24px}.shoplet-orrery__core{width:104px;height:104px}.shoplet-orrery__planet{width:clamp(44px,14vw,62px)}}
@media(prefers-reduced-motion:reduce){.shoplet-orrery__canvas{display:none!important}.shoplet-orrery__fallback{opacity:1!important;pointer-events:auto!important}.shoplet-orrery__planet{transition:none}#apps .app.orrery-target-pulse{animation:none}}


/* SHOPLET_ORRERY_SINGLE_FOCUS_V002 */
#apps[hidden] { display: none !important; }
#apps[data-orrery-selection] { display: block; }
#apps .app[hidden] { display: none !important; }
#apps .app.orrery-focus-active {
  animation: orrery-focus-enter .46s cubic-bezier(.2,.8,.2,1);
}
@keyframes orrery-focus-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #apps .app.orrery-focus-active { animation: none; }
}
/* SHOPLET_ORRERY_P14_WIDE_VIEWPORT_V002 */
@media (min-width: 980px) and (min-aspect-ratio: 4/3) {
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
  }

  header {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: clamp(24px, 3vw, 54px);
    box-sizing: border-box;
    overflow: hidden;
  }

  header .wrap {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(330px, 36vw) minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: clamp(24px, 3vw, 56px);
    align-items: center;
  }

  header .hero {
    grid-column: 1;
    align-self: center;
    min-width: 0;
    max-width: 650px;
    z-index: 4;
  }

  header .hero h1 {
    font-size: clamp(56px, 6.1vw, 112px);
    line-height: .86;
    letter-spacing: -.07em;
    margin-bottom: clamp(16px, 2vh, 26px);
  }

  header .hero p {
    max-width: 580px;
    font-size: clamp(16px, 1.25vw, 22px);
    line-height: 1.38;
  }

  header .controls {
    grid-column: 1;
    align-self: end;
    z-index: 5;
    margin: 0 0 clamp(6px, 1vh, 14px);
  }

  header .shoplet-orrery {
    position: absolute;
    left: calc(36vw + clamp(24px, 3vw, 56px));
    right: clamp(18px, 2.4vw, 42px);
    top: clamp(18px, 2.4vw, 42px);
    bottom: clamp(18px, 2.4vw, 42px);
    width: auto;
    min-height: 0;
    margin: 0;
    border-radius: clamp(24px, 2.2vw, 38px);
  }

  main {
    position: absolute;
    left: clamp(24px, 3vw, 54px);
    bottom: clamp(72px, 9vh, 120px);
    width: min(34vw, 620px);
    max-height: 42dvh;
    margin: 0;
    padding: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
  }

  #apps {
    margin: 0;
    pointer-events: auto;
  }

  #apps[hidden] {
    display: none !important;
  }

  #apps .app[hidden] {
    display: none !important;
  }

  #apps .app.orrery-focus-active {
    max-height: 40dvh;
    margin: 0 !important;
    overflow: auto;
    overscroll-behavior: contain;
    animation: orrery-wide-detail-in .36s cubic-bezier(.2,.8,.2,1);
  }

  @keyframes orrery-wide-detail-in {
    from { opacity: 0; transform: translateY(12px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (min-width: 1500px) and (min-aspect-ratio: 16/10) {
  header .wrap {
    grid-template-columns: minmax(390px, 32vw) minmax(0, 1fr);
  }

  header .shoplet-orrery {
    left: calc(32vw + clamp(24px, 3vw, 56px));
  }

  main {
    width: min(30vw, 640px);
  }
}

@media (max-width: 979px), (max-aspect-ratio: 4/3) {
  html, body {
    height: auto;
    overflow: auto;
  }

  header {
    height: auto;
  }

  main {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #apps .app.orrery-focus-active {
    animation: none !important;
  }
}


/* SHOPLET_ORRERY_P15_FULL_VIEWPORT_V002 */
@media (min-width: 980px) and (min-aspect-ratio: 4/3) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
  }

  header {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  header .wrap {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  header .shoplet-orrery {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1;
  }

  header .hero {
    position: absolute !important;
    top: clamp(26px, 4vh, 58px);
    left: clamp(28px, 4vw, 74px);
    width: min(34vw, 650px);
    max-width: none !important;
    margin: 0 !important;
    z-index: 5;
    pointer-events: none;
  }

  header .hero h1 {
    font-size: clamp(58px, 6.7vw, 126px) !important;
    line-height: .84 !important;
    letter-spacing: -.075em !important;
    margin: 0 0 clamp(14px, 1.8vh, 24px) !important;
  }

  header .hero p {
    width: min(32vw, 590px);
    max-width: none !important;
    font-size: clamp(15px, 1.15vw, 21px) !important;
    line-height: 1.38 !important;
    margin: 0 !important;
  }

  header .controls {
    position: absolute !important;
    top: clamp(24px, 3.8vh, 54px);
    right: clamp(28px, 4vw, 74px);
    width: auto !important;
    margin: 0 !important;
    z-index: 7;
  }

  main {
    position: absolute !important;
    left: clamp(28px, 4vw, 74px);
    bottom: clamp(26px, 4vh, 58px);
    width: min(38vw, 680px) !important;
    max-height: min(42dvh, 460px);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 8;
    pointer-events: none;
  }

  #apps {
    margin: 0 !important;
    pointer-events: auto;
  }

  #apps[hidden],
  #apps .app[hidden] {
    display: none !important;
  }

  #apps .app.orrery-focus-active {
    max-height: min(40dvh, 440px);
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: orrery-p15-detail-in .42s cubic-bezier(.2,.8,.2,1);
  }

  @keyframes orrery-p15-detail-in {
    from { opacity: 0; transform: translateY(14px) scale(.988); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (min-width: 1600px) and (min-aspect-ratio: 16/10) {
  header .hero { width: min(30vw, 650px); }
  header .hero p { width: min(28vw, 590px); }
  main { width: min(31vw, 680px) !important; }
}

@media (min-width: 2100px) and (min-aspect-ratio: 2/1) {
  header .hero { width: min(27vw, 700px); }
  header .hero p { width: min(25vw, 620px); }
  main { width: min(28vw, 720px) !important; }
}

@media (max-width: 979px), (max-aspect-ratio: 4/3) {
  html,
  body {
    height: auto !important;
    overflow: auto !important;
  }

  header {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  header .wrap {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }

  header .hero,
  header .controls,
  header .shoplet-orrery,
  main {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    inset: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  header .shoplet-orrery {
    min-height: 460px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #apps .app.orrery-focus-active {
    animation: none !important;
  }
}