:root{--yellow:#FFFC00;--ink:#1C2024;--paper:#FCFCFD;--line:#D9D9E0;--mute:#60646C;--u:8px;--cut:12px;--f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--t-body:1rem;--t-h2:clamp(1.5625rem,1.2rem + 1.6vw,2.25rem);--t-h1:clamp(1.9rem,1.2rem + 3.2vw,3.375rem);color-scheme:light;}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--yellow);color:var(--ink);font:400 var(--t-body)/1.6 var(--f);overflow-x:clip;caret-color:var(--ink)}::selection{background:var(--ink);color:var(--yellow)}a{color:inherit}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}h1,h2{font-weight:800;letter-spacing:-0.02em;text-wrap:balance;margin:0}p,li{text-wrap:pretty}.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.story{max-width:1180px;margin:0 auto;padding:calc(var(--u) * 2) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr);text-align:center}.top{display:flex;justify-content:center;align-items:center;gap:var(--u);padding-top:env(safe-area-inset-top)}.top img{width:48px;height:48px;display:block}.top span{font-weight:800;font-size:1.25rem}.intro{padding-top:calc(var(--u) * 2)}h1{font-size:var(--t-h1);line-height:1.08}.lead{margin:calc(var(--u) * 1.5) auto 0;max-width:34rem;color:var(--ink)}.plate{position:sticky;top:0;z-index:2;margin:calc(var(--u) * 1.5) 0 0;background:var(--yellow);padding:var(--u) 0 0}.plate svg{display:block;width:auto;height:min(42dvh,352px);max-width:100%;margin:0 auto}.tag{position:absolute;left:50%;bottom:calc(var(--u) * 0.5);transform:translateX(-50%);white-space:nowrap;background:var(--paper);color:var(--ink);font-weight:600;font-size:.875rem;line-height:1;padding:var(--u) calc(var(--u) * 1.5);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:opacity .5s cubic-bezier(.16,1,.3,1)}number-flow{font-variant-numeric:tabular-nums;font-weight:800}number-flow:not(:defined)::before{content:"1"}.go{margin-top:calc(var(--u) * 1.5);display:flex;justify-content:center}.cta{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 1.5);width:100%;max-width:440px;min-height:56px;padding:var(--u) calc(var(--u) * 3);background:var(--ink);color:var(--yellow);font-weight:800;font-size:1.0625rem;text-decoration:none;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:transform .15s cubic-bezier(.16,1,.3,1)}.cta:active{transform:scale(.97)}.cta:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 6px var(--ink)}.disc{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.875rem;flex:none}.steps{list-style:none;margin:0;padding:0}.steps li{min-height:70dvh;display:flex;align-items:center;justify-content:center;padding:calc(var(--u) * 4) 0}.steps p{margin:0;max-width:22rem;font-weight:600;font-size:var(--t-h2);line-height:1.25;letter-spacing:-0.01em;opacity:.55;transition:opacity .4s cubic-bezier(.16,1,.3,1)}.steps li.on p{opacity:1}.plate.ready svg *{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}.plate .p{transform-box:fill-box;transform-origin:center;transform:rotate(-4deg)}.flat{display:none}.hl{transform:translateY(0)}.sc{transform-box:fill-box;transform-origin:left center}.plate[data-step="1"] .rk,.plate[data-step="1"] .best,.plate[data-step="1"] .hl,.plate[data-step="1"] .sc,.plate[data-step="1"] .d1,.plate[data-step="1"] .d2,.plate[data-step="1"] .d3,.plate[data-step="1"] .tag{opacity:0}.plate[data-step="1"] .nm{opacity:.25}.plate[data-step="1"] .sc{transform:scaleX(.1)}.plate[data-step="2"] .hl{transform:translateY(96px)}.plate[data-step="2"] .best,.plate[data-step="2"] .d2,.plate[data-step="2"] .d3{opacity:0}.plate[data-step="2"] .sc{opacity:0;transform:scaleX(.1)}.sheet{max-width:720px;margin:0 auto;padding:calc(var(--u) * 4) 16px calc(var(--u) * 10);display:grid;gap:calc(var(--u) * 3)}.tile{background:var(--paper);padding:calc(var(--u) * 4) calc(var(--u) * 3);text-align:center;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}.tile h2{font-size:var(--t-h2);line-height:1.15;display:flex;flex-direction:column;align-items:center;gap:var(--u)}.tile h2 .disc{background:var(--ink);color:var(--yellow)}.tile p{margin:calc(var(--u) * 2) auto 0;max-width:36rem}.tile hr{border:0;border-top:1px solid var(--line);margin:calc(var(--u) * 3) auto 0;max-width:12rem}.note{margin:calc(var(--u) * 2) auto 0;max-width:36rem;font-size:.875rem;color:var(--ink)}.note a{color:var(--ink);font-weight:600}.flip{display:block;width:100%;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent}.flip-in{display:grid;transition:transform .7s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}.flip[aria-pressed="true"] .flip-in{transform:rotateY(180deg)}.face{grid-area:1 / 1;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2);padding:calc(var(--u) * 3);background:var(--yellow);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.face.back{transform:rotateY(180deg);background:var(--ink);color:var(--paper)}.face p{margin:0;font-weight:600}.face small{font-size:.875rem;color:var(--mute)}.face.back small{color:var(--line)}.flip:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.routes{list-style:none;margin:calc(var(--u) * 2) auto 0;padding:0;max-width:34rem;text-align:left}.routes li{display:flex;gap:calc(var(--u) * 1.5);align-items:flex-start;padding:calc(var(--u) * 1.5) 0;border-top:1px solid var(--line)}.routes li:first-child{border-top:0}.routes b{font-weight:600}.end{text-align:center;padding:calc(var(--u) * 4) 0 0}.end a{display:inline-flex;align-items:center;gap:var(--u);font-weight:800;font-size:var(--t-h1);line-height:1.1;letter-spacing:-0.02em;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px;min-height:56px;transition:transform .15s cubic-bezier(.16,1,.3,1)}.end a:active{transform:scale(.98)}.end .ico{width:clamp(28px,6vw,48px);height:clamp(28px,6vw,48px);stroke-width:2.5}.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:var(--u) max(16px,env(safe-area-inset-right)) calc(var(--u) + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--yellow);border-top:1px solid var(--ink);display:flex;justify-content:center;transform:translateY(110%);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s}.bar.show{transform:none;opacity:1}.bar .cta{min-height:48px}.drawer{position:fixed;inset:0;z-index:10;display:flex;justify-content:flex-end;background:rgba(28,32,36,.55);opacity:0;pointer-events:none;transition:opacity .3s}.drawer:target,.drawer.open{opacity:1;pointer-events:auto}.drawer-in{width:min(100%,480px);height:100%;overflow-y:auto;background:var(--paper);padding:calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 5 + env(safe-area-inset-bottom));transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1)}.drawer:target .drawer-in,.drawer.open .drawer-in{transform:none}.drawer-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--u)}.back,.print{display:inline-flex;align-items:center;gap:var(--u);min-height:44px;padding:0 calc(var(--u) * 1.5);font:600 .875rem var(--f);color:var(--ink);background:none;border:1px solid var(--line);text-decoration:none;cursor:pointer}.drawer h2{font-size:var(--t-h2);margin:calc(var(--u) * 3) 0 calc(var(--u) * 2);line-height:1.15}.drawer dl{margin:0}.drawer dt{font-weight:600;margin-top:calc(var(--u) * 2.5)}.drawer dd{margin:calc(var(--u) * 0.5) 0 0;color:var(--mute)}footer{border-top:1px solid var(--ink);margin-top:calc(var(--u) * 2);padding:calc(var(--u) * 4) 16px calc(var(--u) * 10 + env(safe-area-inset-bottom));text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--u) calc(var(--u) * 3);margin-top:calc(var(--u) * 2)}footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}.crumb{margin:0;color:var(--ink)}@media (hover: hover) and (pointer: fine){.cta:hover{background:#000}.end a:hover{text-decoration-thickness:6px}.back:hover,.print:hover{border-color:var(--ink)}}@media (max-width: 899px){.plate .p{transform:none}.slant{display:none}.flat{display:inline}}@media (min-width: 900px){.story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--u) * 6);padding-top:calc(var(--u) * 3)}.top,.intro,.go,.steps{grid-column:1}.top{grid-row:1}.intro{grid-row:2}.go{grid-row:3}.steps{grid-row:4}.plate{grid-column:2;grid-row:1 / span 4;align-self:start;top:calc(50dvh - 270px);margin:0;padding:0;background:none}.plate svg{height:540px}.intro{padding-top:calc(var(--u) * 6)}.go{margin-top:calc(var(--u) * 3)}.steps li:first-child{min-height:50dvh}.note{float:none}.tile.has-note{position:relative}}@media (min-width: 1200px){.tile.has-note .note{position:absolute;left:calc(100% + 24px);top:calc(var(--u) * 4);width:200px;margin:0;text-align:left}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}}@media print{body{background:#fff}body > *:not(.drawer){display:none !important}.drawer{position:static;opacity:1;background:none}.drawer-in{transform:none;width:100%;height:auto;overflow:visible}.drawer-bar{display:none}}