:root{--paper:#ebdfd7;--paper-warm:#fbf6f1;--ink:#2a2422;--ink-soft:#6f6560;--rule:#2a24221a;--red:#e6432e;--blue:#2c7be0;--yellow:#f7c31b;--green:#4a9f3d;--rounded:Quicksand, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:var(--rounded);-webkit-text-size-adjust:100%}body{background:linear-gradient(var(--paper) 72%, #e9dbd0 72%) fixed;min-height:100svh;margin:0}#stage{z-index:0;pointer-events:none;width:100%;height:100%;display:block;position:fixed;inset:0}main{--head:clamp(1.9rem, 7.5vw, 2.75rem);--big:clamp(1.9rem, 3.4vw, 2.75rem);--small:1.125rem;z-index:1;min-height:100svh;font-size:var(--small);line-height:1.4;position:relative;overflow:clip}.view{visibility:hidden;width:100%;min-height:100svh;padding:clamp(1.75rem,min(7vw,9vh),6rem) clamp(1.5rem,6vw,5.5rem);transition:visibility 0s linear 1s;position:absolute;top:0;left:0}[data-view=home] .home,[data-view=work] .work,[data-view=message] .message{visibility:visible;transition-delay:0s;position:relative}.piece{--top-first:var(--i);--bottom-first:calc(var(--n) - 1 - var(--i));transition:transform var(--time) var(--ease) calc(var(--wait) + var(--order) * var(--step)), opacity calc(var(--time) * .6) linear calc(var(--wait) + var(--order) * var(--step))}.home .piece{--order:var(--top-first);--time:.42s;--ease:cubic-bezier(.6, 0, .9, .4);--wait:0s;--step:40ms;opacity:0;transform:translateY(-70vh)}.rise .piece{--order:var(--bottom-first);--time:.45s;--ease:cubic-bezier(.6, 0, .9, .4);--wait:0s;--step:var(--out-step,35ms);transform:translateY(105vh)}.rise .head,.work .piece{opacity:0}[data-view=home] .home .piece{--order:var(--bottom-first);--time:.65s;--ease:cubic-bezier(.16, 1, .3, 1);--wait:.42s;--step:45ms;opacity:1;transform:none}[data-view=work] .work .piece,[data-view=message] .message .piece{--order:var(--top-first);--time:.8s;--ease:cubic-bezier(.2, 1.12, .3, 1);--wait:.3s;--step:var(--in-step,75ms);opacity:1;transform:none}main a{color:inherit;text-underline-offset:.22em;-webkit-text-decoration:underline #2a242259;text-decoration:underline #2a242259;text-decoration-thickness:1px;transition:text-decoration-color .15s}main a:hover,main a:focus-visible{text-decoration-color:currentColor}:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.home h1{width:-moz-fit-content;width:fit-content;font-size:var(--head);letter-spacing:-.03em;text-wrap:balance;margin:0 0 1.15rem;font-weight:700;line-height:1.12}.home p{margin:0;font-weight:400;line-height:1.8}.home p+p{margin-top:.9rem}.home p span{text-wrap:balance;width:-moz-fit-content;width:fit-content;display:block}.home .cta{width:-moz-fit-content;width:fit-content;margin-top:1.1rem;line-height:1}.btn{--edge:5px;--face:#3b8731;background:var(--face);box-shadow:0 var(--edge) 0 #2b6723;color:#fff;font:inherit;cursor:pointer;border:0;border-radius:8px;align-items:center;gap:.7em;padding:.85rem 1.3rem .85rem 1.05rem;font-weight:700;line-height:1;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.btn:hover,.btn:focus-visible{--edge:7px;transform:translateY(-2px)}.btn:active{--edge:1px;transform:translateY(4px)}.btn[aria-disabled=true]{--edge:1px;opacity:.7;cursor:default;transform:translateY(4px)}.btn svg{fill:#fff;width:1.75em;stroke:var(--face);stroke-width:2px;stroke-linejoin:round;transition:transform .18s}.btn:hover svg,.btn:focus-visible svg{transform:translateY(-2px)rotate(-8deg)}.head{align-items:center;gap:1.4em;width:-moz-fit-content;width:fit-content;margin-bottom:1.2rem;font-weight:600;display:flex}.back{--edge:3px;background:var(--paper-warm);box-shadow:inset 0 0 0 1.5px #2a242247, 0 var(--edge) 0 #2a242247;border-radius:8px;padding:.5rem .8rem .5rem .7rem;line-height:1;text-decoration:none;transition:transform .12s,box-shadow .12s}.back:before{content:"← "}.back:hover,.back:focus-visible{--edge:4px;transform:translateY(-1px)}.back:active{--edge:1px;transform:translateY(2px)}.work{--in-step:45ms;--out-step:25ms;padding-block:clamp(1.25rem,4vh,6rem)}.window{--h:2.25rem;--casing:#f3e9d4;--casing-top:#faf4e6;--casing-side:#dccdb0;--screen:#1e1b25;--glow:#f6ecd6;--glow-soft:#f6ecd69e;--prompt:#9fd3a6;--bezel:clamp(1rem, 2.6vw, 2rem);--grid:#5a462812;--deep-x:1.1rem;--deep-y:.55rem;width:min(44rem,58vw);margin-top:var(--deep-y);padding:var(--bezel) var(--bezel) calc(var(--bezel) * 1.5);background:linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / var(--bezel) var(--bezel), linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / var(--bezel) var(--bezel), var(--casing);border-radius:3px;flex-direction:column;display:flex;position:relative;box-shadow:0 26px 34px -18px #462d1473}.window:before,.window:after{content:"";pointer-events:none;position:absolute}.window:before{width:100%;height:var(--deep-y);background:linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / var(--bezel) 100%, var(--casing-top);transform:skewX(calc(-1 * atan2(var(--deep-x), var(--deep-y))));transform-origin:0 100%;bottom:100%;left:0}.window:after{width:var(--deep-x);background:linear-gradient(#a39a8c, #a39a8c) 50% 42% / 42% 4.5rem no-repeat, linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% var(--bezel), var(--casing-side);height:100%;transform:skewY(calc(-1 * atan2(var(--deep-y), var(--deep-x))));transform-origin:0 0;top:0;left:100%}.screen{background:radial-gradient(120% 90% at 50% 40%, #2b2734, var(--screen) 75%);min-height:0;box-shadow:0 0 0 3px var(--casing-side), inset 0 0 2.5rem #0000008c;color:var(--glow);text-shadow:0 0 .6rem #f6ecd64d;border-radius:6px;flex-direction:column;flex:1;gap:1.3rem;padding:1.4rem 0 1.3rem;display:flex;position:relative;overflow:hidden}.screen:after{content:"";z-index:3;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 45% at 22% 4%,#fffaf012,#0000 70%),linear-gradient(160deg,#fffaf00a 0 22%,#0000 48%),radial-gradient(130% 120%,#0000 62%,#00000059),repeating-linear-gradient(#0000 0 2px,#00000029 2px 3px);position:absolute;inset:0}.screen:before{content:"";z-index:4;opacity:0;pointer-events:none;background:radial-gradient(closest-side,#fffaf0,#f6ecd6b3);position:absolute;inset:0}body:not([data-fly])[data-view=work] .screen:before{animation:.5s ease-out .75s both crt-flash}body:not([data-fly])[data-view=work] .screen>*{animation:.6s linear 1s both crt-picture}@keyframes crt-flash{0%{opacity:1;transform:scale(.03,.006)}35%{opacity:1;transform:scaleY(.006)}60%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes crt-picture{0%{opacity:0;filter:brightness(2.5)blur(1.5px)}12%{opacity:.85}20%{opacity:.25}34%{opacity:1;filter:brightness(1.8)blur(.5px)}to{opacity:1;filter:none}}.lights{right:calc(var(--bezel) + .2rem);bottom:calc(var(--bezel) * .5);background:var(--green);width:.5rem;height:.5rem;box-shadow:0 0 .4rem #4a9f3dcc, -.9rem 0 0 var(--red);border-radius:1px;position:absolute}.sheet{flex-direction:column;min-height:0;display:flex;position:relative}.tag{color:var(--glow);font:700 1rem/1 var(--rounded);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 .5rem #f6ecd673;align-self:flex-start;margin:0 1.4rem .2rem}.tag:before{content:">" / "";color:var(--prompt);text-shadow:0 0 .5rem #9fd3a699;margin-right:.5em}.sheet .tag:after{content:"";vertical-align:-.05em;background:var(--prompt);width:.5em;height:.8em;margin-left:.3em;animation:1.1s step-end infinite cursor;display:inline-block;box-shadow:0 0 .5rem #9fd3a699}@keyframes cursor{50%{opacity:0}}.sheet:before,.sheet:after{content:"";z-index:1;background:linear-gradient(#1e1b2500, var(--screen));opacity:0;pointer-events:none;height:3rem;transition:opacity .2s;position:absolute;inset:auto 0 0}.sheet:before{background:linear-gradient(var(--screen) 30%, #1e1b2500);height:2rem;inset:1.3rem 0 auto}.sheet.up:before,.sheet.more:after{opacity:1}.also{border-top:1.5px dashed #f6ecd62e;flex-wrap:wrap;flex:none;align-items:flex-end;gap:.9rem 2.5rem;margin:0 1.4rem;padding-top:1.2rem;display:flex;position:relative}.also .tag{align-self:auto;margin:0 0 .25rem}.logos{flex-wrap:wrap;align-items:end;gap:1rem 2.5rem;margin:0;padding:0 0 .3rem;list-style:none;display:flex}.logos img{height:var(--h);margin-bottom:calc(var(--h) * var(--drop,0) * -1);filter:brightness(0)invert(.92)sepia(.25)drop-shadow(0 0 .35rem #f6ecd659);opacity:.8;display:block}.pane{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#f6ecd640 transparent;flex-direction:column;gap:.55rem;min-height:0;padding:.8rem 1.4rem .6rem;display:flex;overflow-y:auto}.pane:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}.job{grid-template-columns:var(--h) minmax(0, 1fr);align-items:center;gap:.6rem .9rem;display:grid}.job p{color:var(--glow-soft);text-wrap:pretty;margin:0;font-weight:600;line-height:1.5}.job strong{color:var(--glow);font-weight:700}.mark{width:var(--h);height:var(--h);object-fit:contain;border-radius:6px;display:block}.mark.pixel{border-radius:0}.mark.ink{filter:invert(.92)sepia(.25)drop-shadow(0 0 .3rem #f6ecd64d)}.job strong a{text-decoration-color:#0000}.job strong a:hover,.job strong a:focus-visible{outline-color:var(--glow);text-decoration-color:currentColor}.job:has(.logo:hover) strong a{outline-color:var(--glow);text-decoration-color:currentColor}.job .logo{transition:filter .18s;display:block}.job .logo:hover{filter:drop-shadow(0 0 .25rem #f6ecd68c)drop-shadow(0 0 .7rem #f6ecd64d)}.job:has(strong a:hover,strong a:focus-visible) .logo{filter:drop-shadow(0 0 .25rem #f6ecd68c)drop-shadow(0 0 .7rem #f6ecd64d)}.thumbs{--h:3.5rem;grid-column:2;gap:.4rem;display:flex}.thumb{width:calc(var(--h) * 9 / 16);height:var(--h);border-radius:4px;flex:none;transition:transform .18s,box-shadow .18s;display:block;overflow:hidden;box-shadow:0 0 0 1px #f6ecd626}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb:hover,.thumb:focus-visible{box-shadow:0 0 0 1.5px var(--glow);transform:translateY(-3px)}[data-fly] .work .window{top:var(--fly-y);left:var(--fly-x);width:var(--fly-w);height:var(--fly-h);max-height:none;box-shadow:none;background:0 0;padding:0;position:fixed}[data-fly] .screen{border-radius:2px;box-shadow:inset 0 0 3rem #0009}[data-fly] .lights{display:none}[data-fly] .work .window.piece{--wait:0s;--time:.2s;--ease:cubic-bezier(.6, 0, 1, .6);opacity:0;filter:brightness(3);transition:transform var(--time) var(--ease) var(--wait), filter var(--time) linear var(--wait), opacity 80ms linear calc(var(--wait) + var(--time));transform:scaleY(.004)}[data-fly][data-view=work] .work .window.piece{--wait:var(--fly-on,1.2s);--time:.42s;--ease:cubic-bezier(.2, 1, .3, 1);opacity:1;filter:none;transition:transform var(--time) var(--ease) var(--wait), filter .6s ease var(--wait), opacity 50ms linear var(--wait);transform:none}.wire{--line:#2a242266;width:calc(var(--h) * var(--ar,1));height:var(--h);border:1.5px dashed var(--line);color:var(--ink-soft);white-space:nowrap;border-radius:4px;flex:none;justify-content:space-between;align-items:center;gap:.4rem;padding:0 .55rem;font-style:normal;font-weight:600;text-decoration:none;display:flex}.wire:after{content:attr(data-ar);font:500 .6875rem / 1 var(--mono)}.wire:empty{justify-content:center;padding:0}a.wire{transition:transform .18s,border-color .18s}.screen .wire{--line:#f6ecd659;color:var(--glow-soft);text-shadow:none}a.wire:hover,a.wire:focus-visible{border-color:currentColor;transform:translateY(-3px)}.note{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:min(30rem,100%);display:grid}.note label{flex-direction:column;gap:.45rem;font-weight:600;display:flex}.ask{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.count{color:var(--ink-soft);font-variant-numeric:tabular-nums;opacity:0;font-weight:500;transition:opacity .2s}.count.on{opacity:1}.count.full{color:var(--ink);font-weight:700}.note .wide,.note .send,.note .or{grid-column:1/-1}.note input,.note textarea{background:var(--paper-warm);width:100%;color:var(--ink);font:inherit;resize:none;border:0;border-radius:8px;padding:.7rem .85rem;font-weight:500;line-height:1.5;box-shadow:inset 0 0 0 1.5px #2a242247}.note input:focus-visible,.note textarea:focus-visible{outline-offset:0}.send{align-items:center;gap:1.25rem;min-height:3.5rem;margin-top:.2rem;display:flex}.send .btn{flex:none}.send p,.or{color:var(--ink-soft);text-wrap:pretty;margin:0;font-weight:600;line-height:1.5}@media (min-width:720px){.view{flex-direction:column;justify-content:center;display:flex}.home,.message{padding-bottom:20vh}.work{justify-content:flex-start}}@media (max-width:719px){.home{padding-top:7.5rem;padding-bottom:calc(46svh - 5.75rem)}.rise{padding-bottom:42svh}.window{width:100%}.pane{overflow:clip}.logos{gap:1rem 1.25rem}.logos img{height:calc(var(--h) * .9)}.work:before{content:"";z-index:-1;background:linear-gradient(var(--paper) calc(100% - 42svh), transparent calc(100% - 32svh));opacity:0;transition:opacity .4s;position:absolute;inset:0}[data-view=work] .work:before{opacity:1}.note{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.screen:before,.screen>*{animation:none!important}.view,.piece,.wire,.thumb,.job .logo,.sheet .tag:after,.work:before,.btn,.btn svg,.back,.count,main a{transition:none}}
