:root{--bg:#ededeb;--ink:#151515;--muted:#4f4f4c;--tile:#e2e2df;--code:#dededa;
--red:#ef3340;--blue:#003399;--gold:#ffcc00}
@media (prefers-color-scheme:dark){:root{--bg:#151515;--ink:#ededeb;--muted:#b4b4ae;--tile:#222221;--code:#2a2a28}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);
font:17px/1.6 Futura,"Avenir Next","Century Gothic",system-ui,sans-serif}
header,main,footer{max-width:46rem;margin:0 auto;padding:0 20px}
header{max-width:none;padding:22px 6vw;position:relative;z-index:2}
header a{color:var(--ink);text-decoration:none;font-weight:700}
h1,h2{font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;margin:.1em 0 .4em}
main h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:1.4rem;line-height:1.25;margin:2em 0 .4em}
p,ul{margin:.6em 0}
ul{padding-left:1.25em}
li{margin:.3em 0}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
code{background:var(--code);padding:.05em .35em;font-size:.9em}
.lead{font-size:1.15rem;max-width:28rem;color:var(--muted)}
.meta{color:var(--muted);font-size:.93rem}
main{padding-top:32px;padding-bottom:64px}
.archived{background:var(--tile);padding:.6em .9em;color:var(--muted)}
.back{margin-top:2.5em}
.cases{list-style:none;padding:0;margin:.9em 0}
.cases li{padding:.55em .9em;margin:.45em 0;border-left:10px solid var(--red);background:var(--tile)}
.cases li+li{border-left-color:var(--blue)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 8px}
.ways a{display:block;padding:18px;background:var(--tile);text-decoration:none;border-top:8px solid var(--red)}
.ways a+a{border-top-color:var(--blue)}
.ways a+a+a{border-top-color:var(--gold)}
h3{font-size:1.1rem;margin:1.4em 0 .3em}
.steps{display:flex;gap:10px;margin-top:3em;padding-top:14px;border-top:3px solid var(--ink)}
.steps a{font-weight:800;text-decoration:none;padding:.3em .8em;background:var(--tile)}
.ways .way{display:block;font-weight:800}
.ways .what{display:block;color:var(--muted);font-size:.95rem}
footer{padding-top:16px;padding-bottom:36px;color:var(--muted);font-size:.85rem;border-top:3px solid var(--ink)}
footer p{margin:.25em 0}
[hidden]{display:none!important}
.p{display:inline-block;overflow:hidden;width:.2em;height:.2em;margin-left:.04em;background:currentColor;
-webkit-text-fill-color:transparent;line-height:1}
h1 .p,h2 .p,.way .p,header .p{width:.23em;height:.23em}
.notice{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:16px;align-items:center;
justify-content:space-between;padding:14px 6vw;background:var(--ink);color:var(--bg);font-size:.92rem}
.notice p{margin:0;max-width:52rem}
.notice-close{appearance:none;font:inherit;font-weight:700;cursor:pointer;background:var(--bg);color:var(--ink);
border:0;padding:.4em .9em;flex:none}

.hero{position:relative;overflow:hidden;margin-top:-68px;padding-top:68px}
.hero-in{position:relative;display:grid;grid-template-columns:1fr 300px;align-items:center;gap:4vw;
min-height:78vh;padding:4vh 6vw 8vh}
.shape{position:absolute;display:block;will-change:transform;
transform:translate3d(calc(var(--px,0) * var(--d) * -48px),calc(var(--py,0) * var(--d) * -32px + var(--sy,0) * var(--d) * -.4px),0)}
.sun{width:62vmin;height:62vmin;border-radius:50%;background:var(--red);left:-20vmin;bottom:-38vmin;--d:.2}
.sq{width:30vmin;height:30vmin;background:var(--blue);right:8vw;top:-8vmin;--d:.5}
.bar{height:14px;width:40vw;background:var(--ink);right:-6vw;bottom:12vh;--d:.8}
.dot{width:22px;height:22px;background:var(--gold);border-radius:50%;--d:1}
.dot.a{left:46vw;top:16vh}
.dot.b{left:40vw;bottom:22vh;width:12px;height:12px}
.txt{position:relative}
.stage{position:relative;display:flex;flex-direction:column;align-items:center}

.lock{appearance:none;border:0;background:none;padding:0;cursor:pointer;position:relative;display:block;
width:180px;height:250px;perspective:1000px;color:inherit}
.tilt,.spin,.shackle,.body,.pl,.part{position:absolute;display:block;transform-style:preserve-3d}
.tilt,.spin{inset:0}
.tilt{transform:rotateX(calc(var(--py,0) * -22deg)) rotateY(calc(var(--px,0) * 38deg))}
.spin{animation:spin 30s linear infinite}
.lock:hover .spin,.lock:focus-visible .spin,.gyro .spin{animation-play-state:paused}
@keyframes spin{to{transform:rotateY(360deg)}}
.shackle{left:0;top:0;width:180px;height:150px;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.is-open .shackle{transform:translateY(-34px)}
.pl{inset:0}
.z-3{transform:translateZ(-3px)}.z0{transform:translateZ(0)}.z3{transform:translateZ(3px)}
.shackle svg,.part svg{width:100%;height:100%;display:block;overflow:visible}
.shackle path{fill:none;stroke:var(--ink);stroke-width:22}
.body{left:0;top:110px;width:180px;height:140px}
.part{inset:0;transform:translateZ(calc(var(--k) * (4px + var(--pm,0) * 64px + var(--open,0) * 34px)));
transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.is-open .part{--open:1}
.p-frame{--k:1}.p-cyl{--k:-1}.p-pins{--k:-2}.p-plate{--k:-3}
.frame{fill:none;stroke:var(--ink);stroke-width:8}
.sqf{fill:var(--blue)}.ci{fill:var(--red)}.slot{fill:var(--ink)}.gd{fill:var(--gold)}
.cap{position:relative;z-index:1;font-size:.88rem;max-width:17rem;min-height:2.8em;text-align:center;margin:3.4em auto 0}
.gyro-ask{appearance:none;font:inherit;cursor:pointer;background:var(--ink);color:var(--bg);border:0;padding:.45em 1em;margin-top:.4em}

.choice{background:var(--tile);padding:12px 18px;margin:12px 0;border-left:10px solid var(--blue)}
.choice+.choice{border-left-color:var(--gold)}.choice+.choice+.choice{border-left-color:var(--red)}
.choice summary{font-weight:800;cursor:pointer;list-style:none;padding-right:1.6em;position:relative}
.choice summary::-webkit-details-marker{display:none}
.choice summary::after{content:"+";position:absolute;right:0;top:-.05em;font-size:1.3em;line-height:1}
.choice[open] summary::after{content:"\2212"}.choice[open] summary{margin-bottom:.4em}
.mark{display:inline-block;font-weight:800;font-size:.72em;letter-spacing:.06em;padding:.05em .45em;
vertical-align:.12em;color:#fff}
.mark.rec{background:var(--red)}.mark.ai{background:var(--blue)}
.examples{list-style:none;padding:0}.examples li{background:var(--tile);padding:.55em .9em}

.close .buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.4em 0}
.close button{appearance:none;font:inherit;font-weight:800;cursor:pointer;background:var(--tile);color:var(--ink);
border:0;border-top:8px solid var(--blue);padding:.8em 1.2em}
.close button.danger{background:var(--red);color:#fff;border-top-color:var(--ink)}
.close button:disabled{opacity:.5;cursor:default}
@media (max-width:760px){.hero-in{grid-template-columns:1fr;min-height:0}.stage{order:-1}
.ways{grid-template-columns:1fr}.bar,.dot{display:none}
.sun{width:48vmin;height:48vmin;bottom:-30vmin;left:auto;right:-14vmin}.sq{width:22vmin;height:22vmin}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}.tilt,.shape{transform:none}.shackle,.part{transition:none}}