.hero{padding-block:28px 20px}.hero-h{letter-spacing:-.035em;text-wrap:balance;max-width:17em;margin:0 0 24px;font-size:clamp(28px,8.4vw,34px);font-weight:600;line-height:1.04}@media (width>=640px){.hero-h{font-size:clamp(34px,min(5.2vw,8svh),72px);line-height:1.02}}.hero-stage{--tl-h:64px;--gap:12px;align-content:start;row-gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-template-areas:"view""tl""shot";display:grid}.hero-frame{grid-area:view;width:100%}.hero-poster{z-index:0}.hero-vid{z-index:1;opacity:0}.hero-vid.is-on{opacity:1}.hero-play{z-index:2;border-radius:50%;width:64px;height:64px;margin:-32px 0 0 -32px;position:absolute;top:50%;left:50%}.hero-play svg{width:22px;height:22px;margin-left:2px}.hero-tl{height:var(--tl-h);grid-area:tl;gap:4px;margin:0;padding:0;list-style:none;display:flex}.tl-item{flex:1 1 0;min-width:0}.tl-block{background:var(--panel);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);text-align:left;cursor:pointer;border:0;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:9px 12px 8px;transition:color .2s,background .2s;display:flex;position:relative;overflow:hidden}.tl-block:before{content:"";background:var(--accent);opacity:0;height:2px;transition:opacity .2s;position:absolute;inset:0 0 auto}.tl-block:hover{background:var(--raise);color:var(--ink-2)}.tl-block[aria-current=true]{background:var(--raise);color:var(--ink)}.tl-block[aria-current=true]:before{opacity:1}.tl-block>:not(.tl-fill){max-width:100%;position:relative}.tl-block .mono{color:inherit}.tl-fill{transform-origin:0;pointer-events:none;background:#ffffff14;position:absolute;inset:0;transform:scaleX(0)}.tl-pos,.tl-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tl-name{letter-spacing:-.01em;font-size:13px;font-weight:500}.tl-n{display:none}.hero-shot{flex-wrap:wrap;grid-area:shot;justify-content:space-between;align-items:center;gap:12px 20px;padding-top:4px;display:flex}.shot-info{gap:2px;min-width:0;display:grid}.shot-name{letter-spacing:-.02em;font-size:20px;font-weight:600;line-height:1.2}.shot-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@media (width<=639px){.hero-stage{margin-inline:-16px}.hero-frame{box-shadow:none;border-radius:0}.hero-tl,.hero-shot{margin-inline:16px}.hero-tl{height:44px}.tl-block{justify-content:center;align-items:center;padding:0}.tl-block .tl-pos,.tl-block .tl-name{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.tl-n{display:inline}}@media (width>=900px){.hero-h{text-align:center;margin-inline:auto}.hero-stage{--vw:min(100%, max(640px, calc((100svh - var(--nav) - 370px) * 16 / 9)));justify-items:center}.hero-frame,.hero-tl,.hero-shot{width:var(--vw)}.shot-name{font-size:22px}}.recipes{--bar:56px;scroll-margin-top:calc(var(--nav) + env(safe-area-inset-top,0px));padding-bottom:40px}.chips{top:calc(var(--nav) + env(safe-area-inset-top,0px));z-index:20;height:var(--bar);background:color-mix(in srgb, var(--bg) 80%, transparent);-webkit-backdrop-filter:saturate(1.6)blur(18px);border-bottom:1px solid var(--line);position:sticky}.chips-in{scrollbar-width:none;align-items:center;gap:4px;height:100%;display:flex;position:relative;overflow-x:auto}.chips-in::-webkit-scrollbar{display:none}.chip{min-height:44px;color:var(--ink-2);border-radius:8px;flex:none;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:500;transition:color .2s,background .2s;display:inline-flex}.chip .mono{color:var(--ink-3)}.chip:hover{color:var(--ink)}.chip[aria-current=true]{color:var(--ink);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line-2)}.chip[aria-current=true] .mono{color:var(--ink-2)}.shelf{scroll-margin-top:calc(var(--nav) + env(safe-area-inset-top,0px) + var(--bar));padding-top:40px}.shelf-h{letter-spacing:-.025em;align-items:baseline;gap:10px;margin:0 0 18px;font-size:22px;font-weight:600;line-height:1.2;display:flex}.tiles{grid-template-columns:minmax(0,1fr);gap:28px 16px;display:grid}@media (width>=560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=900px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1200px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}.tile{min-width:0;scroll-margin-top:calc(var(--nav) + env(safe-area-inset-top,0px) + 72px);position:relative}.tile-frame{transition:box-shadow .25s}.tile-vid{opacity:0;transition:opacity .2s}.tile.is-live .tile-vid{opacity:1}.tile:hover .tile-frame,.tile:focus-within .tile-frame{box-shadow:inset 0 0 0 1px var(--line-2)}.tile.is-live .tile-frame{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent)}.tile-meta{justify-content:space-between;align-items:center;gap:8px;padding-top:8px;display:flex}.tile-text{gap:1px;min-width:0;display:grid}.tile-title{letter-spacing:-.01em;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:500;line-height:1.35;overflow:hidden}.tile-title:after{content:"";border-radius:var(--r);position:absolute;inset:0}.tile-title:focus-visible{outline:none}.tile-title:focus-visible:after{outline:2px solid var(--accent);outline-offset:2px}.tile-like{z-index:2;flex:none;position:relative}.tile-like .act-mini-like,.tile-like .act-like{height:32px;min-height:0;box-shadow:none;-webkit-backdrop-filter:none;color:var(--ink-3);background:0 0;padding:0 4px}.tile-like .act-mini-like:hover,.tile-like .act-like:hover{color:var(--ink);background:0 0}.tile-like [data-liked]{color:var(--heart)}.tile-actions{z-index:2;-webkit-backdrop-filter:blur(10px);opacity:0;background:#0000008c;border-radius:10px;gap:2px;padding:2px;transition:opacity .18s;display:flex;position:absolute;top:8px;right:8px}.tile:hover .tile-actions,.tile:focus-within .tile-actions{opacity:1}@media (hover:none){.tile-actions{opacity:1}}.skill{padding-top:72px}.skill-h{letter-spacing:-.025em;margin:0 0 18px;font-size:22px;font-weight:600;line-height:1.2}.skill-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.skill-box{border-radius:var(--r);background:var(--panel);min-width:0;max-width:100%;box-shadow:inset 0 0 0 1px var(--line);align-items:center;gap:4px;padding:0 4px 0 16px;display:flex}.skill-box code{min-width:0;font:14px/1.4 var(--mono);color:var(--ink);overflow-wrap:anywhere}.skill-box .btn{color:var(--ink-2);box-shadow:none;flex:none}.skill-box .btn:hover{color:var(--ink)}@media (width<=640px){.skill{padding-top:56px}.skill-box{width:100%}.skill-box code{flex:1;padding-block:10px;font-size:13px}.skill-row>.btn{width:100%}}@media (pointer:coarse){.tile-actions{gap:0;padding:0}.tile-title{margin-block:-12px;padding-block:12px}.tile-like .act-mini-like,.tile-like .act-like{height:44px;margin-block:-6px}}
