@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wdth,wght,ROND@6..144,25..151,100..1000,0..100&display=swap');

@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:200 400;font-display:block;src:url('material-symbols-rounded.woff2') format('woff2')}

:root{
  --icon-weight:300; --hero-scale:.6375; --hero-icon-scale:.70125; --hero-shape-size:clamp(82px,10.2vw,143px);
  --seed:#b3ee46; --deep:#242d1b; --dusk:#1d2416;
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938,1.077 20.4%,1.121,1.149 24.3%,1.159,1.163 27%,1.154,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --emph:cubic-bezier(.2,0,0,1);
  font-family:'Google Sans Flex',system-ui,sans-serif;
  font-variation-settings:'ROND' 40;
  view-transition-name:none;
}
body{margin:0;min-height:100vh;transition:background 500ms var(--emph),color 500ms var(--emph)}
/* Tonal roles, derived from each app's seed color */
body.light{
  color-scheme:light;
  --surface:color-mix(in oklch,var(--seed) 16%,#fff);
  --container:color-mix(in oklch,var(--seed) 34%,#fff);
  --container-high:color-mix(in oklch,var(--seed) 55%,#fff);
  --primary:color-mix(in oklch,var(--seed) 40%,var(--deep));
  --on-primary:#fff;
  --on-surface:var(--deep);
  --variant:color-mix(in oklch,var(--deep) 75%,var(--seed));
  --inverse:var(--deep); --on-inverse:color-mix(in oklch,var(--seed) 20%,#fff);
}
body.dark{
  color-scheme:dark;
  --surface:var(--dusk);
  --container:color-mix(in oklch,var(--dusk) 84%,var(--seed));
  --container-high:color-mix(in oklch,var(--dusk) 72%,var(--seed));
  --primary:var(--dark-primary,var(--seed));
  --on-primary:var(--dark-on-primary,var(--deep));
  --on-surface:color-mix(in oklch,var(--seed) 18%,#fff);
  --variant:color-mix(in oklch,var(--seed) 45%,#bbb);
  --inverse:color-mix(in oklch,var(--seed) 25%,#fff); --on-inverse:var(--deep);
}
body{background:var(--surface);color:var(--on-surface)}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

.wrap{max-width:1440px;margin:0 auto;padding:0 40px 140px}
header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:28px 0 20px}
.mark{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;font-variation-settings:'ROND' 100,'wdth' 110}
.mark svg{flex:none;width:30px;height:30px;fill:var(--primary)}
.mark-text{display:flex;flex-direction:column;gap:4px;line-height:1.15}
.mark-subtitle{font-size:.7em;font-weight:500;color:var(--variant);letter-spacing:.01em}
header nav{display:flex;gap:6px}
header nav a{white-space:nowrap;text-decoration:none;font-size:.9375rem;font-weight:500;padding:10px 18px;border-radius:99px;transition:background 200ms var(--emph)}
header nav a:hover{background:var(--container)}

/* App switcher: shape chips. The selected one widens into a labelled pill. */
.switcher{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 40px}
.mobile-switcher{display:none}
.chip{display:flex;align-items:center;height:56px;padding:0 4px;border-radius:28px;background:var(--container);transition:background 300ms var(--emph),padding 400ms var(--spring)}
.chip .icon{position:relative;width:48px;height:48px;display:grid;place-items:center}
.chip svg.shape{position:absolute;inset:0;width:48px;height:48px;transition:transform 600ms var(--spring)}
.chip svg.shape path{fill:var(--container-high);transition:fill 300ms var(--emph)}
.g{position:relative;display:inline-block;width:22px;height:22px;font-family:'Material Symbols Rounded';font-weight:var(--icon-weight);font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' var(--icon-weight),'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased}
.chip .lbl{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:1rem;transition:max-width 450ms var(--spring),margin 450ms var(--spring)}
.chip:hover svg.shape{transform:rotate(40deg)}
.chip[aria-pressed=true]{background:var(--primary);color:var(--on-primary);padding:0 22px 0 4px}
.chip[aria-pressed=true] svg.shape path{fill:color-mix(in oklch,var(--on-primary) 22%,transparent)}
.chip[aria-pressed=true] .lbl{max-width:200px;margin-left:10px}

/* Hero: name + the morphing shape */
.hero{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:24px;margin-bottom:36px}
.bigshape{position:relative;width:calc(var(--hero-shape-size) * var(--hero-icon-scale));aspect-ratio:1}
/* The app's icon sits upright on the shape while the shape turns and morphs */
.bigicon{position:absolute;inset:0;display:grid;place-items:center;color:var(--hero-on-seed,var(--deep))}
.bigicon .g{width:auto;height:auto;font-size:calc(var(--hero-shape-size) * .4 * var(--hero-icon-scale))}
.bigicon.swap .g{animation:icon-in 600ms var(--spring)}
@keyframes icon-in{from{opacity:0;transform:scale(.6) rotate(-20deg)}}
.bigshape svg{width:100%;height:100%;overflow:visible}
#bigshape{fill:var(--seed);transition:fill 500ms var(--emph)}
body.light #bigshape{fill:color-mix(in oklch,var(--seed) 85%,var(--deep))}
h1{margin:0;font-size:calc(clamp(2.72rem,7.14vw,6.8rem) * var(--hero-scale));line-height:.92;letter-spacing:-.035em;font-weight:760;font-variation-settings:'ROND' 100,'wdth' 104,'opsz' 144}
h1.morph{animation:stretch 700ms var(--spring)}
@keyframes stretch{from{font-variation-settings:'ROND' 100,'wdth' 40,'opsz' 144;font-weight:420}}
.lede{margin:10.5px 0 0;font-size:.9375rem;line-height:1.45;color:var(--variant)}
.lede b{font-weight:600;color:var(--on-surface)}
.spec{display:flex;flex-wrap:wrap;gap:9px 27px;margin:16.5px 0 0}
.spec dt{font-size:.609375rem;color:var(--variant);margin-bottom:3px}
.spec dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;font-size:.796875rem}
.spec .swatch{display:inline-block;width:16.5px;height:16.5px;border-radius:5.25px;background:var(--seed);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--deep) 20%,transparent);margin-right:-4.5px}

/* Sections */
.section-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.section-row h2{font-size:1.5rem;font-weight:650;margin:0;letter-spacing:-.01em;font-variation-settings:'ROND' 100}
.section-row p{margin:0;color:var(--variant);font-size:.9375rem}
.walk{margin-top:72px}

/* One state: the five screens in a grid */
.grid{display:grid;gap:16px;align-items:start}
.grid.folded{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid.unfolded{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid figure{margin:0;min-width:0}
.grid figcaption{margin:10px 6px 0;font-weight:600}
.cell{display:block;width:100%;padding:14px;border-radius:28px;background:var(--container);cursor:zoom-in;transition:border-radius 450ms var(--spring),background 300ms var(--emph)}
.cell img{display:block;width:100%;height:auto;border-radius:14px}
.cell:hover{border-radius:18px;background:var(--container-high)}

/* Every state: rows are screens, columns are the four captures, all at one scale */
.matrix-wrap{container-type:inline-size}
.matrix{--s:calc((100cqw - 140px - 80px) / 6464);display:grid;grid-template-columns:140px calc(1080 * var(--s)) calc(1080 * var(--s)) calc(2152 * var(--s)) calc(2152 * var(--s));gap:20px;align-items:start}
.colhead{font-size:.9375rem;font-weight:600;padding-bottom:6px;border-bottom:2px solid var(--on-surface)}
.colhead.blank{border:0}
.rowname{font-weight:600;padding-top:4px;line-height:1.3}
.matrix .cell{padding:0;border-radius:12px;overflow:hidden}
.matrix .cell img{border-radius:0}
.matrix .cell:hover{border-radius:6px}

/* Walkthroughs */
/* Each walkthrough card takes its video's exact aspect ratio, at a fixed height, as the original gallery did */
.vids{--video-height:560px;--pad:14px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.vids figure{flex:0 1 auto;width:min(100%,calc(var(--video-height) * var(--r) + var(--pad) * 2))}
.vids figure,.matrix figure{margin:0;min-width:0}
/* Walkthrough cards use the same container as the screenshot cards; the image inside keeps the video's exact aspect ratio */
.vid{position:relative;display:block;width:100%;padding:var(--pad,0);border-radius:28px;overflow:hidden;background:var(--container);cursor:pointer;transition:border-radius 450ms var(--spring),background 300ms var(--emph)}
.vid:hover{border-radius:18px;background:var(--container-high)}
.vid img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;border-radius:14px}
.matrix .vid{border-radius:12px}
.matrix .vid img{border-radius:0}
.matrix .vid:hover{border-radius:6px}
.play{position:absolute;inset:var(--pad,0);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in oklch,var(--container) 35%,transparent);font-weight:600}
.play svg{width:96px;height:96px;transition:transform 600ms var(--spring)}
.matrix .play{border-radius:0}
.matrix .play svg{width:56px;height:56px}
.play svg path.s{fill:var(--primary)}
.play svg path.t{fill:var(--on-primary)}
.vid:hover .play svg{transform:scale(1.1)}
/* The tint over the poster clears on hover or focus so the picture comes through */
.play{transition:background-color 300ms var(--emph)}
.vid:hover .play,.vid:focus-visible .play{background:transparent}
.play[hidden]{display:none}
.vids figcaption{color:var(--variant);margin:10px 4px 0}
.vids figcaption b{color:var(--on-surface)}

/* Screens morph between one state and every state */
::view-transition-group(*){animation-duration:520ms;animation-timing-function:var(--spring)}
::view-transition-old(*),::view-transition-new(*){animation-duration:220ms}
/* New screenshots are stacked after the toolbar during a transition; keep the toolbar on top. */
::view-transition-group(toolbar){z-index:1}

/* Floating toolbar: picks the state that Screens and Walkthroughs show */
.toolbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:12px;padding:8px;border-radius:99px;background:var(--inverse);color:var(--on-inverse);box-shadow:0 6px 24px color-mix(in oklch,var(--deep) 30%,transparent);z-index:5;view-transition-name:toolbar}
.group{display:flex;gap:2px}
.toolbar button{display:flex;align-items:center;gap:8px;height:48px;padding:0 18px;font-weight:600;font-size:.9375rem;border-radius:8px;background:color-mix(in oklch,var(--on-inverse) 12%,transparent);white-space:nowrap;transition:border-radius 400ms var(--spring),background 200ms var(--emph),color 200ms var(--emph)}
.group button:first-child{border-radius:24px 8px 8px 24px}
.group button:last-child{border-radius:8px 24px 24px 8px}
.toolbar .every{border-radius:24px}
.toolbar button[aria-pressed=true]{border-radius:24px;background:var(--seed);color:var(--seed-on-color,var(--deep))}
.toolbar button:active{border-radius:14px}
.toolbar svg{width:20px;height:20px;fill:currentColor;stroke:none}

/* Full-size viewer */
dialog{border:0;padding:20px;border-radius:32px;background:var(--container);color:var(--on-surface);max-width:min(96vw,1280px);max-height:96dvh;overflow:hidden}
dialog[open]{animation:pop 380ms var(--spring)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
dialog::backdrop{background:color-mix(in oklch,var(--surface) 70%,transparent);backdrop-filter:blur(14px)}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.viewer-bar p{margin:0;font-weight:600}
.viewer-bar p span{font-weight:400;color:var(--variant);transition:color 450ms var(--emph)}
.full{display:block;margin:auto;max-width:100%;max-height:calc(96dvh - 150px);width:auto;height:auto;border-radius:16px}
.viewer-foot{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px;font-variant-numeric:tabular-nums}
.round{display:grid;place-items:center;width:48px;height:48px;border-radius:24px;background:var(--container-high);transition:border-radius 400ms var(--spring)}
.round:hover:not(:disabled){border-radius:14px}
.round:disabled{opacity:.35;cursor:default}
.close{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:24px;background:transparent;color:var(--on-surface);transition:border-radius 400ms var(--spring),background-color 450ms var(--emph),color 450ms var(--emph)}
.close:hover{background:var(--container-high);border-radius:16px}
.close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.intro{margin:0 0 20px;max-width:none;color:var(--variant);font-size:1rem}

@media (max-width:900px){
  .vids{--video-height:440px}
}
@media (max-width:1000px){
  .matrix-wrap{overflow-x:auto;padding-bottom:8px}
  .matrix{--s:.12px;grid-template-columns:110px calc(1080 * var(--s)) calc(1080 * var(--s)) calc(2152 * var(--s)) calc(2152 * var(--s))}
  .grid.folded{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.unfolded{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .wrap{padding:0 16px 130px}
  header nav{gap:0}
  header nav a{padding:8px 10px}
  .switcher{gap:6px;margin-bottom:28px}
  .hero{grid-template-columns:1fr;gap:9px}
  .hero{--hero-shape-size:71px}
  .grid{gap:12px}
  .grid.folded{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.unfolded{grid-template-columns:1fr}
  .cell{padding:8px;border-radius:20px}
  .cell img{border-radius:10px}
  .vids{--pad:8px}
  .vid{border-radius:20px}
  .vid img,.play{border-radius:10px}
  .matrix .vid img,.matrix .play{border-radius:0}
  .toolbar{gap:6px;padding:6px}
  .toolbar button{padding:0 12px}
  .toolbar .group button span:not(.g){display:none}
  dialog{padding:12px;border-radius:24px}
  .controls{gap:8px}
  .pp{width:48px;height:48px}
  .time{min-width:2.6em;font-size:.875rem}
  .speed{min-width:48px;padding:0 10px}
}
/* Walkthrough player: a larger view with M3E-style controls. The recordings are silent, so no volume. */
dialog{box-sizing:border-box}
dialog.player{min-width:min(96vw,520px)}
.player .stage{display:grid;place-items:center}
.player video{display:block;max-width:100%;max-height:calc(96dvh - 200px);width:auto;height:auto;aspect-ratio:var(--r);border-radius:16px;background:#000;cursor:pointer}
.player video[hidden],.player-error[hidden]{display:none}
.player-error{display:grid;place-items:center;min-height:240px;font-weight:600}
.controls{display:flex;align-items:center;gap:14px;margin-top:16px}
.pp{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:28px;background:var(--primary);color:var(--on-primary);transition:border-radius 450ms var(--spring),background-color 450ms var(--emph),color 450ms var(--emph)}
.pp.playing{border-radius:16px}
.pp:active{border-radius:10px}
.pp svg{width:24px;height:24px;fill:currentColor}
.time{flex:none;min-width:3em;text-align:center;font-size:.9375rem;font-variant-numeric:tabular-nums}
.scrub{position:relative;flex:1;min-width:100px;height:40px}
.scrub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scrub .played{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.scrub .rest{fill:none;stroke:color-mix(in oklch,var(--on-surface) 18%,transparent);stroke-width:4;stroke-linecap:round}
.scrub .stop,.scrub .handle{fill:var(--primary)}
.scrub .played,.scrub .rest,.scrub .stop,.scrub .handle{transition:stroke 450ms var(--emph),fill 450ms var(--emph)}
.scrub input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.scrub:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:4px;border-radius:8px}
.speed{flex:none;height:40px;min-width:56px;padding:0 14px;border-radius:20px;background:var(--container-high);font-weight:600;font-variant-numeric:tabular-nums;transition:border-radius 400ms var(--spring),background-color 450ms var(--emph),color 450ms var(--emph)}
.speed:active{border-radius:10px}
.fs{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:20px;background:var(--container-high);transition:border-radius 400ms var(--spring),background-color 450ms var(--emph),color 450ms var(--emph)}
.fs:active{border-radius:10px}
.fs[hidden]{display:none}
.fs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* A dialog cannot go full screen itself, so its contents do */
/* Full screen is always dark, whatever the page theme: a near-black tinted with the app's color, with dark-theme roles for the controls */
.player-body.fullscreen-colors{
  --primary:var(--dark-primary,var(--seed)); --on-primary:var(--dark-on-primary,var(--deep));
  --on-surface:color-mix(in oklch,var(--seed) 18%,#fff);
  --variant:color-mix(in oklch,var(--seed) 40%,#aaa);
  --container-high:color-mix(in oklch,var(--dusk) 70%,var(--seed));
  --inverse:color-mix(in oklch,var(--seed) 25%,#fff); --on-inverse:var(--deep);
  background:color-mix(in oklch,var(--dusk) 40%,#000);color:var(--on-surface)}
.player-body:fullscreen{
  box-sizing:border-box;width:100vw;height:100vh;padding:20px 24px;display:flex;flex-direction:column;
}
.player-body::backdrop{background:#000}
/* Fade the background and text between the dialog's colors and the dark full-screen ones */
.player-body{background:var(--container);color:var(--on-surface);transition:background-color 450ms var(--emph),color 450ms var(--emph)}
.player-body:fullscreen .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.player-body:fullscreen video{max-width:100%;max-height:100%;width:auto;height:auto}

/* Skip link */
.skip-link{position:fixed;top:-80px;left:16px;z-index:10;background:var(--inverse);color:var(--on-inverse);padding:12px 18px;border-radius:99px;text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}
.media-error{display:grid;place-items:center;min-height:160px;padding:16px;border-radius:14px;background:var(--container-high);font-weight:600}

/* Capture notes page */
.notes{max-width:960px;margin:8px auto 40px}
.notes h1{margin:16px 0 24px;font-size:clamp(2.6rem,6vw,4.5rem)}
.notes h2{margin-top:48px;font-size:1.5rem;font-variation-settings:'ROND' 100}
.notes p{line-height:1.7;max-width:70ch}
.notes table{display:block;overflow:auto;border-collapse:collapse;width:100%;font-size:.9375rem;background:var(--container);border-radius:20px}
.notes th,.notes td{padding:12px 16px;border-bottom:1px solid color-mix(in oklch,var(--on-surface) 15%,transparent);text-align:left;vertical-align:top;min-width:150px}
.notes code{background:var(--container-high);padding:1px 6px;border-radius:6px;font-size:.875em}
.notes table code{background:none;padding:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media(max-width:820px){.mark{font-size:1.0625rem;max-width:28ch}header nav{flex-wrap:wrap}}


.generation-prompt{margin:12px 0 0;max-width:960px;font-size:.75rem;color:var(--variant);white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}

@media(max-width:600px){
  .switcher{display:none}
  .mobile-switcher{display:grid;gap:8px;margin:12px 0 28px}
  .mobile-switcher label{font-size:.8125rem;font-weight:600;color:var(--variant)}
  .select-field{position:relative;min-width:0;color:var(--on-surface)}
  .mobile-switcher select{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;min-width:0;width:100%;max-width:100%;height:52px;padding:12px 48px 12px 16px;border:1px solid color-mix(in oklch,var(--on-surface) 30%,transparent);border-radius:16px;background:var(--container);color:var(--on-surface);font:inherit;font-weight:600;line-height:1.25;cursor:pointer}
  .select-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(90deg);pointer-events:none}
  .mobile-switcher option{background:var(--surface);color:var(--on-surface)}
}