/* s09 standard: calm certainty on a cool dark lightbox (the frame is a black product shot, so the ground is dark and the guides stay gold) */
#s-standard.z7{padding:0;background:#0d1417;color:#e8e2d4}
#s-standard .s9-track{height:300vh;position:relative}
#s-standard .s9-stage{position:sticky;top:calc(var(--hdr) + var(--tabs));height:calc(100vh - var(--hdr) - var(--tabs));overflow:hidden;
  background:radial-gradient(50% 60% at 50% 52%,#1e2b31 0%,#141e23 45%,#0b1114 100%)}
#s-standard .s9-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(rgba(150,185,205,.10) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(150,185,205,.10) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 52%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 70% at 50% 52%,#000 30%,transparent 80%)}
#s-standard .s9-in{position:relative;height:100%;width:min(1240px,calc(100% - 48px));margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(24px,4vw,64px);padding:clamp(30px,5vh,56px) 0 clamp(22px,4vh,40px)}
#s-standard .s9-sh{grid-column:1/-1;display:flex;align-items:flex-end;gap:20px}
#s-standard .s9-no{font-family:var(--serif);font-size:clamp(60px,6.4vw,104px);line-height:.8;color:#c9a84c;letter-spacing:-.02em}
#s-standard .s9-eb{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8fa0aa;margin-bottom:6px}
#s-standard .s9-sh h2{font-size:clamp(34px,4.2vw,66px);line-height:.95;color:#eef0ee;max-width:none;letter-spacing:-.015em}
#s-standard .s9-list{list-style:none;align-self:center;display:grid;gap:clamp(10px,1.8vh,18px)}
#s-standard .s9-list li{display:flex;align-items:center;gap:14px;color:#5f6f78;transition:color .5s}
#s-standard .s9-list h3{font-family:var(--serif);font-weight:400;white-space:nowrap;font-size:clamp(18px,1.75vw,28px);letter-spacing:-.01em;color:inherit}
#s-standard .s9-n{font-size:11px;font-weight:800;letter-spacing:.16em;color:#55656e;width:20px}
#s-standard .s9-box{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid #3b4b53;display:grid;place-items:center;color:transparent;background:#131c21;transition:background .35s,border-color .35s,color .35s,box-shadow .5s}
#s-standard .s9-box svg{width:16px;height:16px;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s .1s}
#s-standard .s9-list li.on{color:#eef0ee}
#s-standard .s9-list li.on .s9-n{color:#c9a84c}
#s-standard .s9-list li.on .s9-box{background:#c9a84c;border-color:#c9a84c;color:#0d1417;box-shadow:0 0 0 4px rgba(201,168,76,.18),0 0 22px rgba(223,196,116,.55)}
#s-standard .s9-list li.on .s9-box svg{stroke-dashoffset:0}
#s-standard .s9-list li.now .s9-box{animation:s9click .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes s9click{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
#s-standard .s9-table{align-self:center;justify-self:center;padding:clamp(30px,5vh,56px) clamp(40px,4vw,70px) clamp(50px,8vh,80px)}
#s-standard .s9-frame{position:relative;width:min(50vh,440px,40vw);aspect-ratio:1;background:#000;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(150,175,190,.28),0 0 120px rgba(120,160,185,.14)}
#s-standard .s9-frame img{width:100%;height:100%;object-fit:cover}
#s-standard .s9-flash{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:0 0 0 2px rgba(223,196,116,.9),0 0 50px 8px rgba(223,196,116,.55)}
#s-standard .s9-flash.go{animation:s9flash .9s ease-out}
@keyframes s9flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#s-standard .s9-guides{position:absolute;left:-11%;top:-11%;width:122%;height:129%;overflow:visible;pointer-events:none}
#s-standard .s9-g{opacity:0;fill:none;stroke:#c9a84c;stroke-width:3;transform-box:view-box;transform-origin:50% 45%;
  transition:opacity .3s,transform .7s cubic-bezier(.2,1.35,.35,1)}
#s-standard .s9-g text{fill:#dfc474;stroke:none;font-family:var(--sans);font-weight:800;font-size:27px;letter-spacing:.14em;text-transform:uppercase}
#s-standard .s9-g text.m{font-family:ui-monospace,Menlo,monospace;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:30px;fill:#efe2b8}
#s-standard .s9-g .f{fill:#c9a84c}
#s-standard .s9-g .d{stroke-dasharray:14 10}
#s-standard .s9-g .sw{stroke:#c9a84c;stroke-width:2}
#s-standard .s9-g .sw.w{fill:#ffffff}#s-standard .s9-g .sw.s{fill:#b6bcc0}#s-standard .s9-g .sw.b{fill:#b8913c}
#s-standard .s9-g.g0{transform:translate(-60px,-60px)}
#s-standard .s9-g.g1{transform:scale(1.12)}
#s-standard .s9-g.g2{transform:scale(.9)}
#s-standard .s9-g.g3{transform:translateX(90px)}
#s-standard .s9-g.g4{transform:translateY(70px)}
#s-standard .s9-g.g5{transform:translate(-50px,-50px)}
#s-standard .s9-g.on{opacity:1;transform:none;animation:s9lock 1s ease-out}
@keyframes s9lock{0%{stroke:#fff1c2;stroke-width:7}35%{stroke:#ffe08a;stroke-width:5}100%{stroke:#c9a84c;stroke-width:3}}
#s-standard .s9-mark{align-self:center;justify-self:start;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:scale(1.5);filter:blur(6px);
  transition:opacity .5s,transform .6s cubic-bezier(.2,1.3,.35,1),filter .5s}
#s-standard.s9-done .s9-mark{opacity:1;transform:none;filter:none}
#s-standard .s9-a{width:clamp(84px,8vw,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(48px,4.6vw,70px);line-height:1;color:#dfc474;
  border:2px solid #c9a84c;background:radial-gradient(circle,#1e2b31,#0d1417 70%);box-shadow:0 0 0 8px rgba(201,168,76,.12),0 0 60px rgba(223,196,116,.35)}
#s-standard .s9-al{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c}
#s-standard .s9-line{grid-column:1/-1;justify-self:center;text-align:center;font-family:var(--serif);font-size:clamp(18px,1.7vw,26px);line-height:1.25;color:#b9c2c7;max-width:46ch;opacity:.35;transition:opacity .8s}
#s-standard .s9-line em{font-style:normal;color:#dfc474}
#s-standard.s9-done .s9-line{opacity:1}
#s-standard.s9-rm .s9-track{height:auto}
#s-standard.s9-rm .s9-stage{position:relative;top:auto;height:auto;min-height:calc(100vh - var(--hdr) - var(--tabs))}
#s-standard.s9-rm .s9-g,#s-standard.s9-rm .s9-mark{transition:none;animation:none}
@media (max-width:760px){
  #s-standard .s9-track{height:260vh}
  #s-standard .s9-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;width:calc(100% - 32px);padding:28px 0 18px;align-content:start}
  #s-standard .s9-sh{gap:12px}
  #s-standard .s9-no{font-size:52px}
  #s-standard .s9-sh h2{font-size:30px}
  #s-standard .s9-table{grid-row:2;padding:34px 34px 46px;position:relative}
  #s-standard .s9-frame{width:min(60vw,32vh)}
  #s-standard .s9-list{grid-row:3;grid-template-columns:1fr 1fr;gap:10px 12px}
  #s-standard .s9-list h3{font-size:16px}
  #s-standard .s9-n{display:none}
  #s-standard .s9-box{width:22px;height:22px}
  #s-standard .s9-mark{grid-row:2;justify-self:end;align-self:start;margin-top:4px}
  #s-standard .s9-a{width:58px;font-size:34px}
  #s-standard .s9-al{display:none}
  #s-standard .s9-line{grid-row:4;font-size:16px;margin-top:16px}
}
