/* The Yet Machine (tools/yet-machine.html). Prefix yt-. See assets/js/yet.js */
.yt-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.yt-hero-art{width:100%;max-width:380px;height:auto;margin-left:auto;border-radius:28px;filter:drop-shadow(0 16px 20px rgba(43,33,64,.16))}
.yt-hero{padding-bottom:30px}
@media (max-width:820px){.yt-hero-in{grid-template-columns:1fr;gap:10px}.yt-hero-art{max-width:240px;margin:0 auto}}

.yt-sec{padding:34px 0 70px}
.yt-nojs{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r-l);padding:30px 34px;box-shadow:var(--sh-1)}
html:not(.no-js) .yt-nojs{display:none}
.yt-app{max-width:900px;margin:0 auto}
.yt-app[hidden]{display:none}
.yt-in,.yt-out,.yt-wall{background:#fff;border-radius:var(--r-xl);padding:30px 34px;box-shadow:var(--sh-2);position:relative}
.yt-in::before,.yt-out::before,.yt-wall::before{content:"";position:absolute;inset:9px;border:2.5px dashed var(--line);border-radius:calc(var(--r-xl) - 9px);pointer-events:none}
.yt-in>*,.yt-out>*,.yt-wall>*{position:relative}
.yt-in h2,.yt-out h2,.yt-wall h2{font-size:1.45rem;margin:0 0 14px}
.yt-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.yt-chip{font:700 .98rem/1.2 var(--f-body);padding:11px 16px;min-height:44px;border-radius:99px;border:2px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.yt-chip:hover{transform:translateY(-2px);border-color:var(--vio)}
.yt-chip[aria-pressed="true"]{background:var(--vio-d);border-color:var(--vio-d);color:#fff}
.yt-lab{display:block;font:800 .9rem/1.3 var(--f-body);color:var(--ink-2);margin:6px 0 6px}
.yt-text{width:100%;font:600 1.1rem/1.4 var(--f-body);padding:14px 18px;border-radius:var(--r-m);border:2px solid var(--line);background:#fff;color:var(--ink)}
.yt-text:focus{border-color:var(--vio);outline:3px solid color-mix(in srgb,var(--vio) 28%,transparent);outline-offset:1px}
.yt-fine{font-size:.92rem;color:var(--ink-3);margin:12px 0 0}

.yt-machine{position:relative;max-width:620px;margin:22px auto 0;padding:0 0 8px}
.yt-machine svg{display:block;width:100%;height:auto;overflow:visible}
.yt-gear{transform-box:fill-box;transform-origin:center}
.yt-machine.run .g1{animation:ytSpin 1.1s linear infinite}
.yt-machine.run .g2{animation:ytSpin 1.1s linear infinite reverse}
.yt-crank{transform-box:fill-box;transform-origin:left center}
.yt-machine.run .yt-crank{animation:ytCrank .55s linear infinite}
.yt-steam circle{opacity:0}
.yt-machine.run .yt-steam circle{animation:ytSteam 1.4s ease-out infinite}
.yt-machine.run .yt-steam circle:nth-child(2){animation-delay:.3s}.yt-machine.run .yt-steam circle:nth-child(3){animation-delay:.6s}
@keyframes ytSpin{to{transform:rotate(360deg)}}
@keyframes ytCrank{to{transform:rotate(360deg)}}
@keyframes ytSteam{0%{opacity:.9;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-34px) scale(1.5)}}
.yt-drop{position:absolute;left:50%;top:-6px;transform:translateX(-50%);max-width:70%;padding:8px 16px;border-radius:99px;background:#9C93AE;color:#fff;font:800 .9rem/1.3 var(--f-body);opacity:0;pointer-events:none;text-align:center}
.yt-drop.fall{animation:ytFall 1.2s ease-in forwards}
@keyframes ytFall{0%{opacity:1;transform:translate(-50%,-26px) scale(1)}70%{opacity:1;transform:translate(-120%,52px) scale(.8)}100%{opacity:0;transform:translate(-120%,80px) scale(.3)}}
.yt-go{display:flex;margin:6px auto 0}
.yt-say{text-align:center;margin:14px auto 22px;max-width:640px;font:italic 600 1.25rem/1.45 var(--f-serif);color:var(--ink);min-height:1.5em}

.yt-out{margin-top:6px;animation:ytIn .5s ease-out}
@keyframes ytIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.yt-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:22px}
.yt-pair small{display:block;font:800 .76rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.yt-was,.yt-now{padding:18px 20px;border-radius:var(--r-m)}
.yt-was{background:#ECE9F1;color:#4A4260}.yt-was small{color:#6A6280}
.yt-now{background:var(--leaf-t);color:var(--leaf-d);border:2px solid #A9D3AF}.yt-now small{color:var(--leaf-d)}
.yt-pair p{margin:0;font:600 1.2rem/1.4 var(--f-head)}
.yt-arrow{align-self:center;font:600 2rem/1 var(--f-head);color:var(--vio-d)}
@media (max-width:640px){.yt-pair{grid-template-columns:1fr}.yt-arrow{transform:rotate(90deg);justify-self:center}}
.yt-steps{border:0;padding:0;margin:0 0 20px}
.yt-steps legend{font:800 1rem/1.3 var(--f-body);color:var(--ink);padding:0;margin-bottom:10px}
.yt-steps>div{display:flex;flex-wrap:wrap;gap:10px}
.yt-step{position:relative;cursor:pointer}
.yt-step input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.yt-step span{display:inline-block;font:700 .96rem/1.25 var(--f-body);padding:11px 16px;min-height:44px;border-radius:99px;border:2px solid var(--line);background:var(--cream);transition:.2s}
.yt-step input:checked+span{background:var(--vio-d);border-color:var(--vio-d);color:#fff}
.yt-step input:focus-visible+span{outline:3px solid var(--coral);outline-offset:3px}
.yt-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.yt-wall{margin-top:26px}
.yt-wall-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.yt-gold{margin:0 0 14px;font:800 .95rem/1.3 var(--f-body);color:var(--sun-d)}
.yt-empty{font:italic 600 1.2rem/1.5 var(--f-serif);color:var(--ink-2);margin:0 0 6px}
.yt-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.yt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.yt-cards{grid-template-columns:1fr}}
.yt-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 16px 14px;border-radius:var(--r-m);background:var(--leaf-t);border:2px solid #A9D3AF;color:var(--leaf-d);animation:ytIn .5s ease-out}
.yt-card.done{background:linear-gradient(150deg,#FFE9A8,#F7CE5E);border-color:#E0A81C;color:#5C3D00}
.yt-card .sp{position:absolute;right:12px;top:10px;width:26px;height:26px}
.yt-card q{quotes:none;font:600 1.08rem/1.35 var(--f-head);color:inherit}
.yt-card .st{font:700 .88rem/1.35 var(--f-body)}
.yt-card .bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto}
.yt-did{font:800 .9rem/1 var(--f-body);padding:10px 14px;min-height:40px;border-radius:99px;border:2px solid var(--leaf-d);background:#fff;color:var(--leaf-d);cursor:pointer}
.yt-did:hover{background:var(--leaf-d);color:#fff}
.yt-card.done .yt-did{display:none}
.yt-card .now{display:none;font:800 .85rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.yt-card.done .now{display:block}
.yt-rm{font:700 .85rem/1 var(--f-body);background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 6px;min-height:40px;opacity:.85}
.yt-burst{position:fixed;z-index:300;pointer-events:none;width:12px;height:12px;border-radius:50%;animation:ytBurst .9s ease-out forwards}
@keyframes ytBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

.yt-why{padding:70px 0}
.yt-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.yt-facts{grid-template-columns:1fr}}
.yt-how{max-width:760px;margin:30px auto 0;padding:18px 24px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-1)}
.yt-how summary{cursor:pointer;font:800 1.05rem/1.4 var(--f-body);color:var(--ink);padding:6px 0}
.yt-how p{margin:10px 0 0}
@media (prefers-reduced-motion:reduce){.yt-machine.run .g1,.yt-machine.run .g2,.yt-machine.run .yt-crank,.yt-machine.run .yt-steam circle,.yt-drop.fall,.yt-out,.yt-card,.yt-chip{animation:none!important;transition:none!important}.yt-drop.fall{opacity:1}}
@media print{.yt-in,.yt-machine,.yt-out,.yt-say{display:none}}

.yt-link{font:800 .95rem/1.2 var(--f-body);background:none;border:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:12px 10px;min-height:44px;cursor:pointer}
.yt-link:hover{color:var(--ink)}
.yt-safe{margin:14px 0 0;padding:14px 18px;border-radius:var(--r-m);background:#EAF3EC;border:2px solid #BFE0C2;color:var(--ink-2);font-size:.98rem;line-height:1.5}