/* Values are mapped to 04_Agent_Rules/design-systems/DESIGN-apple.md.
   Gallery density follows the workspace rule: preserve the requested purpose. */
:root {
  --primary:#0066cc;
  --primary-focus:#0071e3;
  --ink:#1d1d1f;
  --ink-muted-80:#333333;
  --ink-muted-48:#7a7a7a;
  --canvas:#ffffff;
  --canvas-parchment:#f5f5f7;
  --surface-chip:#d2d2d7;
  --surface-black:#000000;
  --radius-sm:8px;
  --radius-lg:18px;
  --radius-full:9999px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:17px;
  --space-lg:24px;
  --space-xl:32px;
  --space-xxl:48px;
  --space-section:80px;
  --font-display:"SF Pro Display",system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-text:"SF Pro Text",system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --control-fill:color-mix(in srgb,var(--surface-chip) 64%,transparent);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--canvas);font:400 17px/1.47 var(--font-text);letter-spacing:-.374px;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:var(--primary);text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary-focus);outline-offset:4px}
button:active,.work-open:active .play{transform:scale(.95)}
.skip{position:fixed;z-index:5;top:var(--space-xs);left:var(--space-lg);padding:var(--space-sm) var(--space-lg);background:var(--canvas);border-radius:var(--radius-sm)}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:calc(100% - 96px);max-width:1440px;margin-inline:auto;padding-bottom:var(--space-section)}
.heading{margin:var(--space-section) 0 var(--space-xxl)}
h1{font:600 56px/1.07 var(--font-display);letter-spacing:-.28px;margin:0}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xxl) var(--space-lg)}
.work{min-width:0}
.work-open{display:block;color:var(--ink);border-radius:var(--radius-sm)}
.artwork{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--canvas-parchment);border-radius:var(--radius-sm)}
.artwork img{display:block;width:100%;height:100%;object-fit:contain}
.play,.icon-button{width:44px;height:44px;border:0;border-radius:var(--radius-full);background:var(--control-fill);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
.play{position:absolute;bottom:var(--space-sm);right:var(--space-sm)}
.play svg{width:24px;height:24px;fill:currentColor}
.work-info{margin-top:var(--space-md)}
.work h2,.viewer-description h2{font:600 21px/1.19 var(--font-display);letter-spacing:.231px;margin:0;text-wrap:balance}
.work p,.viewer-description p{font:400 14px/1.43 var(--font-text);letter-spacing:-.224px;color:var(--ink-muted-80);margin:var(--space-xs) 0 0}
.viewer{padding:0;border:0;border-radius:var(--radius-lg);background:var(--canvas);color:var(--ink);width:min(1440px,calc(100% - 64px));max-width:none;max-height:calc(100dvh - 48px);overflow-y:auto}
.viewer::backdrop{background:color-mix(in srgb,var(--surface-black) 72%,transparent)}
body:has(.viewer[open]){overflow:hidden}
.viewer-top{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-lg);min-height:64px}
.viewer-top>span{font:400 14px/1.43 var(--font-text);letter-spacing:-.224px;color:var(--ink-muted-80);font-variant-numeric:tabular-nums}
.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-button:disabled{color:var(--ink-muted-48);opacity:.4;cursor:default}
.screen{aspect-ratio:16/9;background:var(--surface-black);max-height:calc(100dvh - 240px);min-height:160px}
.screen video{width:100%;height:100%;display:block;object-fit:contain}
.viewer-bottom{padding:var(--space-lg);display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center}
.viewer-description{min-width:0}
.viewer-navigation{display:flex;gap:var(--space-xs)}
.player-status{font:400 14px/1.43 var(--font-text);letter-spacing:-.224px;margin:var(--space-md) var(--space-lg)}
.player-status a{text-decoration:underline}
@media(max-width:1068px){h1{font-size:40px;line-height:1.1;letter-spacing:0}}
@media(max-width:833px){.wrap{width:calc(100% - 48px)}.heading{margin-top:var(--space-xxl);margin-bottom:var(--space-xl)}.viewer{width:calc(100% - 32px)}}
@media(max-width:640px){
  .wrap{padding-bottom:var(--space-xxl)}
  h1{font-family:var(--font-text);font-size:34px;line-height:1.47;letter-spacing:-.374px}
  .gallery{grid-template-columns:1fr;gap:var(--space-xl)}
  .viewer{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .viewer-top{padding:var(--space-xs) var(--space-sm)}
  .viewer-bottom{padding:var(--space-lg) var(--space-sm);gap:var(--space-sm);align-items:flex-start}
  .viewer-description h2{font:600 17px/1.24 var(--font-text);letter-spacing:-.374px}
  .screen{min-height:0;max-height:calc(100dvh - 220px)}
}
@media(max-width:419px){h1{font-family:var(--font-display);font-size:28px;line-height:1.07;letter-spacing:-.28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}button:active,.work-open:active .play{transform:none}}