html{color-scheme:light}body{margin:0}[hidden]{display:none!important}
/* Layout: a pinned, hand-drawn side-scrolling road. Scrolling walks a little me through living scenes of my career: walking, then skateboard (with one famous crash), then car; the sun sets on the way. Then credits and contact. */
:root{
  --bg:#F2F4F7; --ink:#15171C; --soft:#646976; --pen:#2348D6; --red:#E0442F; --sun:#FFC93D; --board:#FFFFFF; --green:#1E9E6A;
  --sans:"Gabarito", "Avenir Next", system-ui, sans-serif;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11141A; --ink:#ECEDEF; --soft:#9AA0AB; --pen:#93B0FF; --red:#FF8A78; --sun:#E9E4C9; --board:#1C2029; --green:#5AD69F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11141A; --ink:#ECEDEF; --soft:#9AA0AB; --pen:#93B0FF; --red:#FF8A78; --sun:#E9E4C9; --board:#1C2029; --green:#5AD69F; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px dashed var(--pen);outline-offset:3px}

.top{position:fixed;z-index:20;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;pointer-events:none}
.top h1{font:800 1rem/1.2 var(--sans);margin:0}
.top span{font:700 1.25rem/1 var(--hand);color:var(--pen);transform:rotate(-2deg);white-space:nowrap}

.road{position:relative;height:700vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#world{display:block;width:100%;height:100%}
#world .h{font-family:var(--hand);font-weight:700}
#world .s{font-family:var(--sans)}
.meter{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);height:4px;border-radius:4px;background:color-mix(in srgb,var(--soft) 22%,transparent)}
.meter i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ink);border-radius:4px}

.after{max-width:46rem;margin:0 auto;padding:56px 20px 56px}
h3{font:800 clamp(1.8rem,7vw,2.8rem)/1 var(--sans);letter-spacing:-.03em;margin:0 0 6px}
.note{font:700 1.35rem/1.1 var(--hand);color:var(--pen);transform:rotate(-1.5deg);display:inline-block;margin-bottom:18px}
.credits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.credits li{display:flex;align-items:baseline;gap:10px;min-width:0}
.credits i{flex:1;border-bottom:2px dotted color-mix(in srgb,var(--soft) 60%,transparent);min-width:16px;transform:translateY(-4px)}
.credits b{font-weight:600;text-align:right;white-space:nowrap}
.credits small{display:block;color:var(--soft);font-size:.85rem}
.contact{margin-top:64px;display:grid;gap:14px}
.contact h3 u{text-decoration:none;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--sun) 80%,transparent) 0)}
.contact p{margin:0;color:var(--soft);max-width:36ch;font-size:1.05rem}
.row{display:flex;flex-wrap:wrap;gap:10px}
.btn{font:700 1rem/1 var(--sans);padding:13px 18px;border:2px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;text-decoration:none;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;box-shadow:3px 4px 0 var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn:active{transform:translate(3px,4px);box-shadow:none}
.copied{font:700 1.3rem/1 var(--hand);color:var(--pen);min-height:1.3rem}
footer{max-width:46rem;margin:0 auto;padding:0 20px 32px;font-size:.8rem;color:var(--soft)}
@media (min-width:900px){.top{padding-inline:36px}.meter{left:36px;right:36px}}
.top .r{display:flex;gap:12px;align-items:center}
.top .lang{pointer-events:auto;font:800 .78rem/1 var(--sans);color:var(--ink);text-decoration:none;padding:6px 9px;border:1.5px solid var(--ink);border-radius:255px 12px 225px 12px/12px 225px 12px 255px}
.top .lang:hover{background:var(--ink);color:var(--bg)}
@media (max-width:400px){.top .r span{display:none}}