/* Steadman Secret Santa: invite + install gate. Workshop look (parchment on pine and red, Fraunces + Pinyon Script). */
.sg{
  --floor:#1b120c; --parch:#f4e8cc; --parch-2:#e9d8b2; --paper:#fffaf0; --snow:#fbf8f1;
  --red:#c42f27; --red-deep:#8e1d17; --pine:#164f3a; --pine-deep:#0d3426; --brass:#d8a64a; --brass-hi:#f2d08a;
  --ink:#21170f; --muted:#7a6650; --line:#e4d5b5;
  --display:"Fraunces",Georgia,serif; --body:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif; --script:"Pinyon Script","Snell Roundhand",cursive;
  --top:env(safe-area-inset-top,0px); --bot:env(safe-area-inset-bottom,0px);
  position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;container-type:size;
  font-family:var(--body);font-size:15px;line-height:1.45;color:var(--ink);background:var(--pine-deep);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
}
.sg *{box-sizing:border-box}
.sg p{margin:0}
.sg button{font:inherit;color:inherit;cursor:pointer}
.sg .scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.sg .in{animation:sgIn .7s cubic-bezier(.2,.8,.2,1) both}
.sg .out{animation:sgOut .5s cubic-bezier(.5,0,.6,1) both;pointer-events:none}
@keyframes sgIn{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(6px)}}
@keyframes sgOut{to{opacity:0;transform:translateY(-18px) scale(1.03);filter:blur(4px)}}
.sg .body{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;
  padding:calc(var(--top) + 22px) 22px calc(var(--bot) + 22px)}
.sg .lbl{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sg .h{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:800;font-size:34px;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
.sg .h em{font-style:italic;font-weight:600;color:var(--red)}
.sg .sub{color:var(--muted);font-size:15px;text-wrap:pretty}
.sg .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:18px;padding:17px 18px;font-weight:800;font-size:16px;
  background:var(--red);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 26px -12px rgba(196,47,39,.8);transition:transform .15s}
.sg .btn:active{transform:scale(.97)}
.sg .btn:focus-visible,.sg .link:focus-visible,.sg .step:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.sg .btn.brass{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 30px -12px rgba(216,166,74,.9)}
.sg .btn img{width:26px;height:26px;border-radius:7px}
.sg .link{background:none;border:0;color:var(--muted);font-weight:700;padding:10px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(122,102,80,.4)}
.sg .snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ---------- 1. arrival: the invite lands ---------- */
.sg .arrive{background:#2a1a10;color:#fff}
.sg .arrive .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:sgKb 22s ease-in-out infinite alternate}
@keyframes sgKb{from{transform:scale(1.05)}to{transform:scale(1.16) translate(-2%,2%)}}
.sg .arrive .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,10,4,.88),rgba(20,10,4,.2) 40%,rgba(20,10,4,.15) 52%,rgba(20,10,4,.94) 82%)}
.sg .arrive .body{justify-content:space-between}
.sg .arrive .lbl{color:var(--brass-hi)}
.sg .arrive .h{color:#fff;font-size:clamp(34px,10.5cqw,46px)}
.sg .arrive .h em{color:var(--brass-hi)}
.sg .arrive .sub{color:#eadfc6}
.sg .letter{position:absolute;left:50%;top:46%;width:min(62%,320px);z-index:2;transform:translate(-50%,-50%);
  animation:sgDrop 1.3s cubic-bezier(.2,1.25,.4,1) .25s both}
.sg .letter img{width:100%;display:block;filter:drop-shadow(0 30px 34px rgba(0,0,0,.55));animation:sgBob 4.5s ease-in-out 1.6s infinite}
.sg .letter .to{position:absolute;left:18%;top:20%;font-family:var(--script);font-size:clamp(26px,9cqw,40px);color:#4a2a14;transform:rotate(-8deg);
  opacity:0;animation:sgInk 1.2s ease-out 1.3s forwards;clip-path:inset(0 100% 0 0)}
@keyframes sgInk{to{opacity:.9;clip-path:inset(0 0 0 0)}}
@keyframes sgDrop{from{transform:translate(-50%,-160%) rotate(-24deg) scale(.6);opacity:0}}
@keyframes sgBob{50%{transform:translateY(-5%) rotate(2deg)}}
.sg .arrive .elf{position:absolute;right:10%;top:56%;width:64px;height:64px;z-index:3;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#fff5e0,var(--parch-2));box-shadow:0 0 0 3px #fff,0 0 0 6px var(--brass),0 14px 30px rgba(0,0,0,.5);
  animation:sgPop .7s cubic-bezier(.2,1.6,.4,1) 1.6s both}
.sg .elf img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.12) translateY(3%)}
@keyframes sgPop{from{transform:scale(0) rotate(-30deg)}}
.sg .arrive .foot{display:flex;flex-direction:column;gap:12px;animation:sgUp .8s cubic-bezier(.2,.8,.2,1) 1.1s both}
@keyframes sgUp{from{opacity:0;transform:translateY(30px)}}
.sg .why{display:flex;gap:8px;flex-wrap:wrap}
.sg .why span{display:inline-flex;align-items:center;gap:6px;border-radius:30px;padding:7px 12px;font-weight:700;font-size:12.5px;
  background:rgba(255,255,255,.13);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22)}

/* ---------- 2. steps: how to add it ---------- */
.sg .steps{background:var(--snow)}
.sg .steps::before{content:"";position:absolute;inset:0 0 auto;height:48%;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,#1f6a4e,var(--pine-deep) 70%);clip-path:ellipse(95% 100% at 50% 0)}
.sg .steps .body{gap:10px}
.sg .steps .head{color:#fff;display:flex;align-items:flex-start;gap:12px}
.sg .steps .head .h{color:#fff;font-size:28px}
.sg .steps .head .h em{color:var(--brass-hi)}
.sg .steps .head .lbl{color:var(--brass-hi)}
.sg .steps .head .elf{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff5e0,var(--parch-2));box-shadow:0 0 0 3px var(--brass)}
/* the mini phone that acts out each step */
.sg .demo{position:relative;flex:none;height:clamp(160px,29cqh,250px);border-radius:26px;background:#0d0a08;padding:7px;box-shadow:0 22px 50px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) inset;overflow:hidden}
.sg .demo .scrn{position:relative;height:100%;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#f7efe0,#efe2c6)}
.sg .demo .page{position:absolute;inset:0 0 44px;padding:14px 14px 0;display:flex;flex-direction:column;gap:7px}
.sg .demo .page i{display:block;height:9px;border-radius:5px;background:rgba(33,23,15,.1)}
.sg .demo .page i:first-child{height:44px;border-radius:10px;background:linear-gradient(120deg,var(--pine),var(--pine-deep))}
.sg .demo .bar{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;background:rgba(250,246,238,.94);border-top:1px solid rgba(0,0,0,.06);font-size:16px;color:#1d6fe0}
.sg .demo .bar.top{top:0;bottom:auto;border-top:0;border-bottom:1px solid rgba(0,0,0,.06)}
.sg .demo .bar.top~.page{inset:44px 0 0}
.sg .demo .url{flex:1;height:28px;border-radius:14px;background:rgba(0,0,0,.07);display:grid;place-items:center;font-size:11px;font-weight:600;color:#555}
.sg .demo .ic{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;position:relative;flex:none}
.sg .demo .ic svg{width:19px;height:19px}
.sg .demo .ic.hot::after,.sg .demo .row.hot::after,.sg .demo .addb.hot::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2.5px solid var(--red);animation:sgRing 1.1s ease-out infinite}
.sg .demo .row.hot::after{border-radius:10px}
.sg .demo .addb.hot::after{border-radius:8px}
@keyframes sgRing{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.25);opacity:0}}
.sg .demo .menu{position:absolute;right:8px;bottom:50px;width:58%;background:rgba(255,255,255,.97);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.25);padding:4px;
  transform-origin:90% 100%;transform:scale(.4);opacity:0;transition:all .35s cubic-bezier(.2,1.2,.4,1)}
.sg .demo .sheet{position:absolute;left:0;right:0;bottom:0;height:74%;background:#f2f2f6;border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.2);padding:10px;
  transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;gap:6px}
.sg .demo .apps{display:flex;gap:8px;padding:4px 2px 8px;border-bottom:1px solid rgba(0,0,0,.06)}
.sg .demo .apps b{width:30px;height:30px;border-radius:8px;background:#ccc}
.sg .demo .apps b:nth-child(1){background:#34c759}.sg .demo .apps b:nth-child(2){background:#0a84ff}.sg .demo .apps b:nth-child(3){background:#ffcc00}.sg .demo .apps b:nth-child(4){background:#ff375f}
.sg .demo .row{position:relative;display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:8px 10px;font-size:11.5px;font-weight:600;color:#222}
.sg .demo .row svg{width:14px;height:14px;color:#444}
.sg .demo .menu .row{background:transparent}
.sg .demo .add{position:absolute;inset:0;background:#f2f2f6;padding:10px;display:flex;flex-direction:column;gap:8px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.sg .demo .add .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:#1d6fe0}
.sg .demo .add .top b{color:#111}
.sg .demo .addb{position:relative;padding:3px 6px;border-radius:8px;font-weight:800}
.sg .demo .add .card{display:flex;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:8px}
.sg .demo .add .card img{width:40px;height:40px;border-radius:10px}
.sg .demo .add .card span{font-size:12px;font-weight:700}
.sg .demo .tgl{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:8px 10px;font-size:11.5px;font-weight:600}
.sg .demo .tgl i{width:30px;height:18px;border-radius:9px;background:#34c759;position:relative}
.sg .demo .tgl i::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.sg .demo .home{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,#2d7a5c,#0b2a20 70%);display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:12px 6px;padding:16px 12px;opacity:0;transition:opacity .4s}
.sg .demo .home b{aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.18)}
.sg .demo .home .me{background:none;position:relative}
.sg .demo .home .me img{width:100%;border-radius:22%;display:block;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.sg .demo .home .me small{position:absolute;left:50%;top:104%;transform:translateX(-50%);font-size:9px;color:#fff;font-weight:600}
.sg .demo .tap{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(196,47,39,.35);border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:9;opacity:0;transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none}
.sg .demo[data-s] .tap{opacity:1;animation:sgTap 1.1s ease-in-out infinite}
@keyframes sgTap{0%,100%{transform:scale(1)}45%{transform:scale(.7)}}
.sg .demo[data-s="2"] .menu{transform:none;opacity:1}
.sg .demo[data-s="3"] .sheet,.sg .demo[data-s="4"] .sheet{transform:none}
.sg .demo[data-s="4"] .add{transform:none}
.sg .demo[data-s="5"] .home{opacity:1}
.sg .demo[data-s="5"] .home .me img{animation:sgLand .8s cubic-bezier(.2,1.6,.4,1) both}
@keyframes sgLand{from{transform:translateY(-140%) scale(.4) rotate(-20deg);opacity:0}}
.sg .demo[data-s="5"] .tap{opacity:0}
/* the numbered step list */
.sg .list{position:relative;display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;scrollbar-width:none}
.sg .step{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:8px 12px;transition:border-color .25s,background .25s,transform .25s}
.sg .step .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--red-deep);background:var(--parch);box-shadow:0 0 0 2px var(--brass) inset;transition:all .25s}
.sg .step p{font-size:14.5px;font-weight:600;line-height:1.3}
.sg .step p b{font-weight:800}
.sg .step .gly{display:inline-grid;place-items:center;vertical-align:-4px;width:22px;height:20px;border-radius:6px;background:#eef2f8;color:#1d6fe0;margin:0 2px}
.sg .step .gly svg{width:14px;height:14px}
.sg .step[aria-current="step"]{border-color:var(--red);background:#fff4ee;transform:translateX(4px)}
.sg .step[aria-current="step"] .n{background:var(--red);color:#fff;box-shadow:none}
.sg .steps .foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;align-items:center}
/* the arrow that points at the real browser button (outside the page) */
.sg .pointer{position:absolute;z-index:20;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;color:var(--red);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  animation:sgPoint 1.2s ease-in-out infinite}
.sg .pointer svg{width:34px;height:34px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.sg .pointer span{white-space:nowrap;background:var(--red);color:#fff;border-radius:20px;padding:5px 10px;box-shadow:0 6px 16px rgba(196,47,39,.4)}
.sg .pointer.b{bottom:calc(var(--bot) + 4px)}
.sg .pointer.t{top:calc(var(--top) + 2px);flex-direction:row-reverse;align-items:center;gap:6px}
.sg .steps.pbot .body{padding-bottom:calc(var(--bot) + 56px)}
.sg .steps.ptop .body{padding-top:calc(var(--top) + 52px)}
.sg .pointer.t svg{transform:rotate(180deg)}
.sg .pointer.r{right:6px}
.sg .pointer.l{left:max(8px,calc(16% - 17px));align-items:flex-start}
.sg .pointer.b.r{align-items:flex-end}
.sg .pointer.c{left:50%;margin-left:-60px;width:120px}
@keyframes sgPoint{50%{transform:translateY(8px)}}
.sg .pointer.t{animation-name:sgPointUp}
@keyframes sgPointUp{50%{transform:translateY(-8px)}}
.sg.has-fake-bar .pointer.b{bottom:58px}
.sg.has-fake-top .pointer.t{top:60px}

/* ---------- 3. look for the seal on your home screen ---------- */
.sg .look{background:radial-gradient(circle at 30% 10%,#2a7a5b,#0b2a20 65%);color:#fff;text-align:center}
.sg .look .body{align-items:center;justify-content:center;gap:18px}
.sg .look .h{color:#fff}
.sg .look .h em{color:var(--brass-hi)}
.sg .look .sub{color:#cfe3d6;max-width:300px}
.sg .grid{display:grid;grid-template-columns:repeat(4,58px);gap:18px 16px;padding:10px 0 18px}
.sg .grid b{width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.14);animation:sgFade .6s both}
.sg .grid .me{background:none;position:relative;animation:none}
.sg .grid .me img{width:58px;height:58px;border-radius:14px;display:block;box-shadow:0 10px 20px rgba(0,0,0,.45);animation:sgLand 1s cubic-bezier(.2,1.5,.4,1) .5s both,sgWiggle 2.4s ease-in-out 1.8s infinite}
.sg .grid .me small{position:absolute;left:50%;top:100%;margin-top:5px;transform:translateX(-50%);font-size:11.5px;font-weight:600;white-space:nowrap}
.sg .grid .me::before{content:"";position:absolute;inset:-14px;border-radius:24px;background:radial-gradient(circle,rgba(242,208,138,.6),transparent 70%);animation:sgHalo 2.4s ease-in-out 1.4s infinite;opacity:0}
@keyframes sgWiggle{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}89%{transform:rotate(-4deg)}}
@keyframes sgHalo{50%{opacity:1;transform:scale(1.1)}}
@keyframes sgFade{from{opacity:0;transform:scale(.6)}}
.sg .look .note{font-size:13px;color:#9fc2b2;max-width:290px}
.sg .look .link{color:#cfe3d6;text-decoration-color:rgba(207,227,214,.4)}

/* ---------- open in Safari (in-app browsers) ---------- */
.sg .copy{display:flex;gap:8px;align-items:center;background:#fff;border:1.5px dashed var(--brass);border-radius:16px;padding:8px 8px 8px 14px}
.sg .copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.sg .copy button{border:0;border-radius:12px;background:var(--pine);color:#fff;font-weight:800;padding:10px 14px}

/* ---------- desktop: scan me ---------- */
.sg .desk{background:var(--pine-deep);color:#fff}
.sg .desk .body{align-items:center;justify-content:center;text-align:center;gap:18px}
.sg .desk .h{color:#fff;max-width:520px}
.sg .desk .h em{color:var(--brass-hi)}
.sg .desk .sub{color:#cfe3d6;max-width:420px}
.sg .tag{position:relative;background:var(--paper);border-radius:22px;padding:18px 18px 14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:rotate(-2deg);animation:sgSwing 5s ease-in-out infinite;transform-origin:50% -20px}
.sg .tag::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:24px;background:var(--brass)}
.sg .tag::after{content:"";position:absolute;left:50%;top:8px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--snow);box-shadow:0 0 0 2px var(--line) inset}
@keyframes sgSwing{50%{transform:rotate(2deg)}}
.sg .tag svg{display:block;width:200px;height:200px;margin-top:12px}
.sg .tag p{font-family:var(--script);font-size:30px;color:var(--red-deep);line-height:1.1;margin-top:4px}
.sg .desk .link{color:#cfe3d6}

/* ---------- 4. first launch from the home screen ---------- */
.sg .welcome{background:radial-gradient(circle at 50% 38%,#1f6a4e,var(--pine-deep) 62%,#06160f);color:#fff;text-align:center}
.sg .welcome .body{align-items:center;justify-content:center;gap:16px}
.sg .welcome .h{color:#fff;font-size:38px}
.sg .welcome .h em{color:var(--brass-hi)}
.sg .welcome .sub{color:#cfe3d6;max-width:300px}
.sg .welcome .lbl{color:var(--brass-hi)}
.sg .sealwrap{position:relative;width:min(56cqw,240px);aspect-ratio:1;display:grid;place-items:center;border:0;background:none;padding:0;animation:sgSealIn 1.1s cubic-bezier(.2,1.4,.4,1) both}
@keyframes sgSealIn{from{transform:scale(.3) rotate(-40deg);opacity:0}}
.sg .sealwrap::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(242,208,138,.5),transparent 62%);animation:sgHalo 2.6s ease-in-out infinite}
.sg .sealwrap .half{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform 1s cubic-bezier(.5,0,.3,1),opacity 1s .2s}
.sg .sealwrap .l{clip-path:polygon(0 0,52% 0,44% 30%,56% 52%,46% 74%,54% 100%,0 100%)}
.sg .sealwrap .r{clip-path:polygon(52% 0,100% 0,100% 100%,54% 100%,46% 74%,56% 52%,44% 30%)}
.sg .sealwrap .glow{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(180deg,transparent,#fff6d6,transparent);opacity:0;filter:blur(2px);transition:opacity .3s}
.sg .welcome.cracked .sealwrap .l{transform:translate(-40%,10%) rotate(-24deg);opacity:0}
.sg .welcome.cracked .sealwrap .r{transform:translate(40%,10%) rotate(24deg);opacity:0}
.sg .welcome.cracking .sealwrap .glow{opacity:1}
.sg .welcome.cracking .sealwrap{animation:sgShake .4s linear}
@keyframes sgShake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.sg .welcome .hint{font-size:13px;font-weight:700;color:var(--brass-hi);letter-spacing:.08em;text-transform:uppercase;animation:sgBlink 1.8s ease-in-out infinite}
@keyframes sgBlink{50%{opacity:.4}}
.sg .welcome .after{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.2,.8,.2,1) .5s;pointer-events:none;width:100%}
.sg .welcome.cracked .after{opacity:1;transform:none;pointer-events:auto}
.sg .welcome.cracked .hint{display:none}
.sg .welcome .elfbig{width:120px;height:120px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff5e0,var(--parch-2));box-shadow:0 0 0 4px #fff,0 0 0 9px var(--brass-hi),0 18px 40px rgba(0,0,0,.45)}
.sg .welcome .stack{position:absolute;inset:0;display:grid;place-items:center}
.sg .welcome.cracked .stack .sealwrap{pointer-events:none}
.sg .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

@media (prefers-reduced-motion:reduce){
  .sg *,.sg *::before,.sg *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.sg .desk .head{color:#fff;display:flex;align-items:center;gap:12px;text-align:left;width:100%;max-width:420px}
.sg .desk .head .elf{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff5e0,#e9d8b2);box-shadow:0 0 0 3px var(--brass)}
.sg .desk .copy{width:100%;max-width:420px}
.sg .desk .lbl{color:var(--brass-hi)}