:root{--phone:390px}.kicker{color:var(--muted);margin:0 0 8px;font-size:13px}.about h1{letter-spacing:-.02em;text-wrap:balance;margin:0 0 12px;font-size:28px;font-weight:600;line-height:1.15}.about-text>p:last-child{color:var(--muted);text-wrap:pretty;margin:0}.about-end{justify-items:start;gap:16px;display:grid}.links{gap:8px;margin:0;padding:0;list-style:none;display:grid}.seg{background:color-mix(in oklab, var(--ink) 6%, transparent);border-radius:999px;padding:2px;display:inline-flex}.seg label{position:relative}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{color:light-dark(#5f5f5f,var(--muted));-webkit-user-select:none;user-select:none;border-radius:999px;padding:4px 14px;font-size:13px;transition:background-color .12s,color .12s,box-shadow .12s;display:block}.seg input:checked+span{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px #00000014, 0 0 0 1px var(--ring)}.seg input:active:not(:checked)+span{background:color-mix(in oklab, var(--ink) 6%, transparent)}.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:1px}@media (hover:hover) and (pointer:fine){.seg input:not(:checked):hover+span{color:var(--ink)}}body[data-frame=phone]{grid-template-columns:minmax(0,340px) auto;place-content:center;align-items:center;gap:72px;padding:32px;display:grid}body[data-frame=phone] .about-end{margin-block-start:24px}body[data-frame=desktop]{grid-template-rows:auto minmax(0,1fr);gap:24px;block-size:100dvh;padding:28px 32px 32px;display:grid}body[data-frame=desktop] .about{flex-wrap:wrap;justify-content:space-between;align-items:last baseline;gap:16px 40px;inline-size:min(100%,1240px);margin-inline:auto;display:flex}body[data-frame=desktop] .about h1{margin-block-end:6px;font-size:22px}body[data-frame=desktop] .about-text{max-inline-size:62ch}body[data-frame=desktop] .about-end{grid-auto-flow:column;align-items:last baseline;gap:24px}body[data-frame=phone] .frame{inline-size:var(--phone);block-size:min(844px,100dvh - 64px);box-shadow:0 30px 80px -20px #00000059, 0 0 0 1px var(--ring);background:#0b0b0b;border-radius:48px;padding:10px}body[data-frame=phone] .app{border-radius:38px}body[data-frame=desktop] .frame{min-block-size:0;inline-size:min(100%,1240px);box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent), 0 24px 64px -24px #00000040;border-radius:14px;margin-inline:auto}body[data-frame=desktop] .app{border-radius:14px}.app{background:var(--bg);flex-direction:column;block-size:100%;display:flex;overflow:hidden;container:app/inline-size}.bar{border-block-end:1px solid var(--line);flex:none;align-items:center;gap:2px;padding:8px 6px 8px 16px;display:flex}body[data-frame=phone] .bar{padding-block-start:18px}.who-am-i{flex:1;min-inline-size:0;margin:0;line-height:1.3}.who-am-i h2{margin:0;font-size:15px;font-weight:600}.who-am-i p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13px;overflow:hidden}.icon{block-size:40px;inline-size:40px;color:var(--muted);background:0 0;border:0;border-radius:12px;flex:none;place-items:center;transition:background-color .12s,color .12s;display:grid}@media (hover:hover) and (pointer:fine){.icon:hover{background:var(--hover);color:var(--ink)}}.icon:active:not(:focus-visible){background:color-mix(in oklab, var(--ink) 10%, var(--bg))}#pause .i-play,#pause[data-on] .i-pause{display:none}#pause[data-on] .i-play{display:block}#pause[data-on]{color:var(--ink)}.sun{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sun{display:block}:root:not([data-theme=light]) .moon{display:none}}:root[data-theme=dark] .sun{display:block}:root[data-theme=dark] .moon{display:none}.main{flex:1;grid-template-columns:minmax(0,1fr);min-block-size:0;display:grid}.doc{--cut:var(--panel);overscroll-behavior:contain;background:var(--panel);border-inline-start:1px solid var(--line);padding:20px 22px;display:none;overflow-y:auto}@media (height>=521px){@container app (inline-size>=820px){.main{grid-template-columns:minmax(0,1fr) 320px}.doc{display:block}}}@container app (inline-size<600px){.col{padding-inline:16px}.trace{padding-block-start:20px}}@media (width<=640px),(height<=520px){body[data-frame]{block-size:100dvh;padding:0;display:block}.about{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.about-end{display:none}body[data-frame] .frame{block-size:100dvh;min-block-size:0;inline-size:auto;box-shadow:none;background:0 0;border-radius:0;padding:0}body[data-frame] .app{border-radius:0}html{overscroll-behavior:none;overflow:hidden}.main{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}body[data-frame] .bar{padding-block-start:max(8px, env(safe-area-inset-top,0px));padding-inline:max(16px, env(safe-area-inset-left,0px)) max(6px, env(safe-area-inset-right,0px))}.dock{padding-block-end:max(12px, env(safe-area-inset-bottom,0px))}}@media (width>=641px) and (width<=860px) and (height>=521px){body[data-frame=phone]{grid-template-columns:auto;justify-items:center;gap:16px}body[data-frame=phone] .about-text{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}body[data-frame=phone] .about-end{grid-auto-flow:column;align-items:center;gap:24px;margin:0}body[data-frame=phone] .frame{block-size:min(844px,100dvh - 112px)}}@media (pointer:coarse){.icon{block-size:44px;inline-size:44px}}@media (forced-colors:active){.frame{outline:1px solid canvastext}.seg input:checked+span{forced-color-adjust:none;color:highlighttext;background:highlight}#pause[data-on]{outline:1px solid canvastext}}@media (prefers-reduced-motion:reduce){.seg span,.icon{transition:none}}