:root{
  --glass:rgba(28,28,30,.5);--rim:rgba(255,255,255,.08);
  --label2:rgba(235,235,245,.7);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --rest:.9709;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden;margin:0}
body{background:#0d1117;color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid #0091FF;outline-offset:4px;border-radius:1.25rem}
svg{display:block}

.wall{position:fixed;inset:0;background:#0d1117 var(--wall,none) center/cover no-repeat}
.wall::after{content:"";position:absolute;inset:0;background:#000;opacity:.5}

.screen{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;
  padding-block:max(5vh,env(safe-area-inset-top,0px)) max(1.25rem,env(safe-area-inset-bottom,0px));
  padding-inline:max(1rem,env(safe-area-inset-left,0px)) max(1rem,env(safe-area-inset-right,0px))}
.grid{--c:min(10.75rem,19vw,calc((100vh - 10rem) / 3.44));--g:calc(var(--c) * .22);display:grid;grid-template-columns:repeat(4,var(--c));grid-auto-rows:var(--c);gap:var(--g);margin-block:auto}
.w{position:relative;background:var(--glass);border-radius:calc(var(--c) * .15);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);
  box-shadow:inset 0 0 0 1px var(--rim);padding:1.125rem 1.25rem;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.w2{grid-column:span 2}
.wl{grid-column:span 2;grid-row:span 2}
.lbl{font-size:.875rem;font-weight:600;color:var(--label2);white-space:nowrap}

/* Stackyard app plate */
.plate{--tc:#1C1C1E;position:relative;display:flex;align-items:center;justify-content:center;border-radius:26%;background-color:var(--tc);flex:none;
  background-image:radial-gradient(46% 2% at 50% 0,rgba(255,255,255,.6),rgba(255,255,255,.25) 45%,transparent),radial-gradient(46% 1.6% at 50% 100%,rgba(255,255,255,.35),rgba(255,255,255,.14) 45%,transparent),
    radial-gradient(1.2% 25% at 0 50%,rgba(0,0,0,.19),transparent),radial-gradient(1.2% 25% at 100% 50%,rgba(0,0,0,.19),transparent),
    linear-gradient(oklch(from var(--tc) calc(l + .03 + l * .05) c h) 4%,var(--tc) 50%,oklch(from var(--tc) calc(l - .03 - l * .05) c h) 96%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),inset 0 -.5px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.3)}
.plate.bmc{--tc:#FFD600}.plate.x{--tc:#000}.plate.docker{--tc:#2496ED}
.plate > svg{width:100%;height:100%}
.plate > svg.glyph{width:50%;height:50%}
.plate > svg.gate{width:64%;height:64%}

/* identity: Apple text styles, subheadline 15/20 and footnote 13/18 */
.me{gap:.75rem}
.me .tw-h{display:flex;align-items:center;gap:.625rem;min-width:0}
.me .lg{width:2.625rem;height:2.625rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.me .tw-n{display:flex;flex-direction:column;min-width:0}
.me h1{font-size:.9375rem;line-height:1.25rem;font-weight:600;letter-spacing:-.016em}
.me .handle{font-size:.8125rem;line-height:1.125rem;letter-spacing:-.006em;color:var(--label2)}
.me .bio{font-size:.9375rem;line-height:1.25rem;letter-spacing:-.016em;font-kerning:normal;text-wrap:pretty;hanging-punctuation:first;max-width:46ch}
.me .bio span{color:var(--label2)}

/* logo face: the bar is a brow, the posts are eyes */
.face .eye{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--spring)}
.face.blink .eye{transform:scaleY(.12);transition:transform .07s ease-in}

/* spotlight slider */
.slider{padding:0}
.slider .trk{position:absolute;inset:0;display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;border-radius:inherit}
.slider .trk::-webkit-scrollbar{display:none}
.slider .slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;border-radius:inherit;overflow:hidden}
.slider .slide > a{position:absolute;inset:0;border-radius:inherit}
.slider .slide > a:focus-visible{outline-offset:-4px}
.slider .pc{position:absolute;z-index:2;left:50%;bottom:.5rem;translate:-50% 0;display:flex;padding:0 .25rem;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.slider .pc button{all:unset;cursor:pointer;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:999px}
.slider .pc button:focus-visible{outline:2px solid #0091FF;outline-offset:0}
.slider .dot::before{content:"";width:8px;height:8px;border-radius:50%;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.8);transition:background .2s,transform .2s}
.slider .dot[aria-current="true"]::before{background:#fff;transform:scale(1.25)}
.slider .pp svg{width:10px;height:10px;fill:#fff}
.slider .pp .play,.slider.stopped .pp .pause{display:none}
.slider.stopped .pp .play{display:block}

/* poster: app colour, full bleed, mark cropped off the corner; sizes follow the widget */
.pzh{position:absolute;inset:0;container-type:size;overflow:hidden;border-radius:inherit}
.pz{position:absolute;inset:0;overflow:hidden;background:var(--a);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif}
.pz.sy{--a:#00D2E0;--ink:#00191C;--tg:.8}.pz.py{--a:#FFD600;--ink:#1F1A00;--tg:.8}.pz.ty{--a:#D70015;--ink:#fff;--tg:1}
.pz .mk{position:absolute;width:96cqw;height:96cqw;right:-26cqw;bottom:-26cqw;opacity:.92}
.pz .mk [fill]:not([fill="none"]){fill:currentColor}.pz .mk [stroke]{stroke:currentColor}
.pz .cap{position:absolute;left:8cqw;right:30cqw;top:8cqw;display:flex;flex-direction:column;gap:1.6cqw}
.pz .cap b{font-size:10cqw;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.pz .cap span{font-size:4.4cqw;line-height:1.3;opacity:var(--tg);text-wrap:balance}

/* latest */
.feed{gap:.625rem}
.feed ul{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.feed .item{position:relative;display:grid;grid-template-columns:1.625rem 1fr auto;gap:.625rem;align-items:center;min-width:0;margin:-3px -.5rem;padding:3px .5rem;border-radius:.625rem;transition:background .15s}
.feed .item .plate{width:1.625rem;height:1.625rem;box-shadow:none}
.feed .t{font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed time{font-size:.75rem;color:var(--label2);font-variant-numeric:tabular-nums}
@media (hover:hover){.feed .item:hover{background:rgba(255,255,255,.07)}}
.feed .item:active{background:rgba(255,255,255,.07)}
.feed .item:focus-visible{outline-offset:0;border-radius:.625rem}
/* One highlight that slides between rows, as in Stackyard. It paints before the rows, which are positioned, so they cover it. */
.feed .mp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;background:rgba(255,255,255,.07);transition:opacity .14s ease}
.feed .mp.on{opacity:1;transition:opacity .14s ease,transform .19s cubic-bezier(.22,1,.36,1),width .19s cubic-bezier(.22,1,.36,1),height .19s cubic-bezier(.22,1,.36,1)}
.feed:has(> .mp.on) .item:hover{background:transparent}

/* apps */
.app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem}
.app .plate{width:calc(var(--c) * .44 * 1.03);height:calc(var(--c) * .44 * 1.03)}
/* Plates are drawn at hover size and shown at 1/1.03 when idle, so hover never enlarges a rasterised layer. */
.app .plate,.dock .plate{transform:scale(var(--rest));transition:transform .32s var(--spring),filter .2s ease-out}
@media (hover:hover){.app:hover .plate,.dock a:hover .plate{transform:none}}
.app:active .plate,.dock a:active .plate{transform:scale(calc(.92 * var(--rest)));filter:brightness(.88);transition:transform .1s ease-out,filter .1s ease-out}
.app.settled .plate,.dock a.settled .plate{transform:scale(var(--rest));filter:none;transition:none}
.app .n{font-size:.84375rem;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.badge{position:absolute;top:-7px;right:-12px;padding:2px 7px;border-radius:999px;font-size:.71875rem;font-weight:700;font-variant-numeric:tabular-nums;color:#000;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:4}
.badge:empty{display:none}
.badge.sy{background:#00D2E0}.badge.py{background:#FFD600}.badge.ty{background:#FF4245}

/* GitHub grid: Stackyard's cells and level colours */
.ghg{padding:1rem;justify-content:center}
.ghg .band{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:4px}
.ghg .week{display:grid;grid-template-rows:repeat(7,auto);row-gap:4px}
.ghg .cell{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.07)}
.ghg .cell.future{visibility:hidden}
.ghg .l1{background:#0E4429}.ghg .l2{background:#006D32}.ghg .l3{background:#26A641}.ghg .l4{background:#39D353}
.ghg .cell.on{box-shadow:0 0 0 1.5px #fff}
.ghg.arrive .cell{animation:fade .25s ease-out both}
@keyframes fade{from{opacity:0}}
.tip{position:fixed;z-index:20;padding:4px 8px;border-radius:8px;font-size:.75rem;font-weight:600;white-space:nowrap;color:#fff;background:#3A3A3C;pointer-events:none;font-variant-numeric:tabular-nums}
.tip[hidden]{display:none}

/* dock */
.dock{display:flex;gap:1.125rem;padding:.75rem 1rem;border-radius:1.875rem;background:rgba(51,51,51,.33);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}
.dock a{display:block}
.dock .plate{width:calc(min(3.625rem,14vw) * 1.03);height:calc(min(3.625rem,14vw) * 1.03)}

/* Below 9.75rem widgets the text no longer fits, so a shorter window scrolls instead. */
@media (max-height:43.6em) and (min-width:52.6em){
  html,body{height:auto;overflow-y:auto;overflow-x:hidden}
  .screen{height:auto;min-height:100%;gap:2rem;padding-top:2.5rem}
  .grid{--c:10.75rem;margin-block:0}
}

/* phone and narrow windows */
@media (max-width:52.6em){
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .screen{height:auto;min-height:100%;gap:1.5rem;padding-top:max(1.5rem,env(safe-area-inset-top,0px))}
  .grid{--c:min(41vw,11.25rem);grid-template-columns:repeat(2,var(--c));--g:calc(var(--c) * .14);margin-block:0}
  .w{padding:.875rem 1rem}
  .me{gap:.5625rem}
  .me .lg{width:2.125rem;height:2.125rem}
  .me h1{font-size:.875rem}
  .me .handle{font-size:.75rem}
  .me .bio{font-size:.84375rem;line-height:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  .app .plate,.dock .plate,.feed .item,.feed .mp,.feed .mp.on{transition:none}
  .app:hover .plate,.app:active .plate,.dock a:hover .plate,.dock a:active .plate{transform:scale(var(--rest))}
}

@media (forced-colors:active){
  .w,.dock{border:1px solid CanvasText}
  .plate{forced-color-adjust:none}
  .badge{forced-color-adjust:none;outline:1px solid CanvasText}
  .ghg .cell{forced-color-adjust:none;outline:1px solid CanvasText;outline-offset:-1px}
  .slider .pc{forced-color-adjust:none}
}