:root{color-scheme:dark;--bg:#03050a;--text:#f6f8fc;--muted:#8d99aa;--line:rgba(255,255,255,.12);--cyan:#74e6ff;--violet:#9a8cff;--amber:#ffb86b}*{box-sizing:border-box}html{font:100%/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 36%,#10192c 0,#050811 34%,var(--bg) 68%);color:var(--text);-webkit-font-smoothing:antialiased}header,footer{width:min(100% - 32px,1240px);height:74px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--muted);font-size:12px}.back,footer a{color:inherit;text-decoration:none}.back{justify-self:start;min-height:44px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line);border-radius:99px;background:rgba(14,20,31,.58);backdrop-filter:blur(18px)}.title{display:flex;align-items:center;gap:9px;color:#fff;font-weight:650}.title img{width:27px}header p{justify-self:end;margin:0;font:600 10px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}main{width:min(100% - 32px,1240px);margin:auto}.intro{text-align:center;padding:54px 0 30px}.intro>p,.scale-strip>div>p{margin:0 0 18px;color:var(--cyan);font:650 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.intro h1{margin:0;font-size:clamp(44px,6.8vw,92px);line-height:.92;letter-spacing:-.065em}.intro h1 span{color:#9ca7b8;font-weight:420}.icon-meta{display:flex;justify-content:center;gap:26px;margin-top:28px;color:#788596;font-size:11px}.stage{position:relative;min-height:620px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:40px;background:radial-gradient(circle at 50% 48%,rgba(91,113,167,.19),transparent 30%),linear-gradient(155deg,rgba(13,20,34,.78),rgba(2,4,8,.9));box-shadow:inset 0 1px rgba(255,255,255,.06),0 45px 120px rgba(0,0,0,.35)}.ambient{position:absolute;border-radius:50%;filter:blur(75px);opacity:.2}.ambient-a{width:280px;height:280px;left:16%;top:18%;background:var(--cyan)}.ambient-b{width:260px;height:260px;right:15%;bottom:12%;background:var(--violet)}.app-icon{--rx:0deg;--ry:0deg;--gx:32%;--gy:20%;position:relative;width:min(58vw,430px);aspect-ratio:1;border-radius:24.5%;background:radial-gradient(circle at 50% 32%,#162139 0,#09101e 36%,#03060c 78%),linear-gradient(145deg,#131d31,#020409);box-shadow:0 55px 100px rgba(0,0,0,.58),0 15px 35px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.16);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--press,1));transform-style:preserve-3d;will-change:transform;touch-action:none;cursor:grab}.app-icon:active{cursor:grabbing}.metal-edge{position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(145deg,#d7dce6 0,#4e5868 22%,#151b25 49%,#aab2c0 75%,#3b4657 100%) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;opacity:.9}.inner-shadow{position:absolute;inset:8px;border:1px solid rgba(255,255,255,.08);border-radius:22%;box-shadow:inset 0 20px 55px rgba(0,0,0,.25)}.glare{position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.26),rgba(255,255,255,.07) 14%,transparent 37%);mix-blend-mode:screen;pointer-events:none}.grain{position:absolute;inset:0;border-radius:inherit;opacity:.15;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}.core{position:absolute;width:63%;height:63%;left:18.5%;top:18.5%;overflow:visible;filter:drop-shadow(0 25px 27px rgba(0,0,0,.46));transform:translateZ(40px)}.face{transform-box:fill-box;transform-origin:center}.aperture{opacity:.72}.interaction-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:8px;color:#687587;font:600 9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}.interaction-hint i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.scale-strip{min-height:330px;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:60px;padding:60px 40px}.scale-strip h2{margin:0;font-size:clamp(40px,5vw,66px);line-height:.95;letter-spacing:-.055em}.scale-items{display:flex;align-items:end;justify-content:space-around;gap:18px}.scale-items figure{margin:0;display:grid;justify-items:center;gap:13px;color:#707d8e;font:10px ui-monospace,monospace}.mini-icon{display:grid;place-items:center;aspect-ratio:1;border:1px solid #394454;border-radius:24%;background:linear-gradient(145deg,#111b2c,#03060b);box-shadow:0 20px 45px rgba(0,0,0,.28)}.mini-icon img{width:68%}.size-128{width:128px}.size-64{width:64px}.size-32{width:32px}.size-16{width:16px}footer{border-top:1px solid var(--line);margin-top:20px;font:600 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em}footer a{text-align:center;color:#cdd5e1}footer span:last-child{text-align:right}.app-icon:focus-visible,.back:focus-visible,footer a:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
@media(max-width:720px){header{grid-template-columns:1fr auto}.title{display:none}.intro{padding-top:38px}.icon-meta{gap:10px;flex-wrap:wrap}.stage{min-height:500px;border-radius:28px}.app-icon{width:min(76vw,350px)}.scale-strip{grid-template-columns:1fr;padding:70px 10px;gap:55px}.scale-items{overflow:auto;justify-content:flex-start;padding-bottom:10px}.scale-items figure{min-width:90px}footer{height:auto;padding:24px 0;grid-template-columns:1fr;text-align:center;gap:16px}footer span:last-child{text-align:center}}
@media(prefers-reduced-motion:reduce){.app-icon{transform:none!important}.interaction-hint{display:none}}
@media(prefers-reduced-transparency:reduce){.back{background:#0e141f;backdrop-filter:none}}
@media(prefers-contrast:more){.stage,.app-icon,.back{border-color:#f5f7fb}.icon-meta,.interaction-hint{color:#dbe1ea}}