.stack-home { --stack-inset:104px; --stack-blue:#9edff3; --stack-card:#d9d9d9; --stack-ink:#171717; --stack-line:#a5a5a5; --stack-page:#fff; --project-enterprise:#b0beff; --project-notifications:#e1966d; --project-ai:#a4cc6c; --project-miniowa:#94cbd9; --project-ink:#2f2f2f; --project-title:#2f2f2f; --project-body:#2f2f2f; --project-line:#2f2f2f55; --project-hover:#ffffff40; background:var(--stack-page); }
html.stack-snap { scroll-snap-type:y mandatory; scroll-padding-top:0; scroll-behavior:auto; }
html.stack-free-scroll { scroll-snap-type:none; }
html.stack-free-scroll .stack-project { position:relative; top:auto; }
.stack-snap-stop { display:block; height:1px; margin-bottom:-1px; scroll-snap-align:start; scroll-snap-stop:always; scroll-margin-top:var(--stack-inset); }
.stack-hero { scroll-snap-align:start; scroll-snap-stop:always; }
.stack-footer { scroll-snap-align:end; scroll-snap-stop:always; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .stack-home { --stack-blue:#244c61; --stack-card:#363835; --stack-ink:#f2f3e9; --stack-line:#74766f; --stack-page:#171915; --project-enterprise:#41416f; --project-notifications:#75483e; --project-ai:#43563f; --project-miniowa:#304f5a; --project-ink:#fff; --project-title:#fff; --project-body:#fff; --project-line:#ffffff80; --project-hover:#0000001a; }
}
:root[data-theme="dark"] .stack-home { --stack-blue:#244c61; --stack-card:#363835; --stack-ink:#f2f3e9; --stack-line:#74766f; --stack-page:#171915; --project-enterprise:#41416f; --project-notifications:#75483e; --project-ai:#43563f; --project-miniowa:#304f5a; --project-ink:#fff; --project-title:#fff; --project-body:#fff; --project-line:#ffffff80; --project-hover:#0000001a; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.stack-main { max-width:none; padding:0; }
.stack-header { position:fixed; }
.stack-hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; gap:48px; padding:calc(var(--stack-inset) + 56px) clamp(24px,4vw,64px) 36px; background:var(--stack-blue); color:var(--stack-ink); }
.stack-hero-intro { font-size:18px; line-height:1.5; margin:0 0 24px; }
.stack-hero h1 { font-size:clamp(50px,7.6vw,112px); font-weight:600; line-height:1.03; letter-spacing:-.045em; max-width:1280px; margin:0 0 40px; }
.stack-hero-details { display:grid; grid-template-columns:1fr minmax(0,480px); gap:48px; align-items:start; }
.stack-hero-role { font-size:15px; line-height:1.65; margin:0; }
.stack-hero-role strong { font-weight:600; }
.stack-hero-description { font-size:18px; line-height:1.6; margin:0; }
.stack-hero-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #17171733; padding-top:22px; }
.stack-hero-footer a { display:inline-flex; align-items:center; gap:28px; font-size:14px; line-height:1.5; padding:6px 0; }
.stack-hero-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.stack-hero-footer a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.stack-hero-footer a>span { font-size:24px; line-height:1; }
.stack-hero-footer>span { font-size:8px; line-height:1.5; letter-spacing:1.4px; }
:root[data-theme="dark"] .stack-hero-footer { border-top-color:#f2f3e933; }
.stack-work { padding:var(--stack-inset) 24px 24px; scroll-margin-top:0; }
/* Keep earlier cards pinned at the same inset when the final card reaches its snap stop. */
#stack-cards::after { content:""; display:block; height:24px; }
.stack-project { position:sticky; top:var(--stack-inset); min-height:calc(100vh - var(--stack-inset) - 24px); min-height:calc(100svh - var(--stack-inset) - 24px); background:var(--stack-card); color:var(--stack-ink); border-radius:12px; padding:20px; display:flex; flex-direction:column; margin-bottom:24px; box-shadow:0 -4px 20px #00000006; scroll-margin-top:var(--stack-inset); }
.stack-project:last-child { margin-bottom:0; }
.stack-project { --stack-ink:var(--project-ink); --stack-line:var(--project-line); --stack-title:var(--project-title); --stack-body:var(--project-body); }
#stack-enterprise { --stack-card:var(--project-enterprise); --project-light-tint:#28234b; --project-dark-tint:#dfd6ff; }
#stack-notifications { --stack-card:var(--project-notifications); --project-light-tint:#4d2c22; --project-dark-tint:#ffe0cc; }
#stack-ai { --stack-card:var(--project-ai); --project-light-tint:#243d26; --project-dark-tint:#dcebcf; }
#stack-miniowa { --stack-card:var(--project-miniowa); --project-light-tint:#1f414b; --project-dark-tint:#d1eff4; }
.stack-project { --project-title:var(--project-light-tint); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .stack-project { --project-title:var(--project-dark-tint); }
}
:root[data-theme="dark"] .stack-project { --project-title:var(--project-dark-tint); }
.stack-project.mockup-project { padding:0; height:calc(100svh - var(--stack-inset) - 24px); min-height:0; overflow:hidden; container-type:size; }
.mockup-layout { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100cqw,159.633cqh); aspect-ratio:1392 / 872; container-type:inline-size; }
.mockup-project-label { position:absolute; left:5.1549%; top:5.8486%; margin:0; font-size:.86207cqw; line-height:1.25; letter-spacing:.10776cqw; text-transform:uppercase; }
.mockup-project-topics { position:absolute; left:51.9397%; right:5.1549%; top:5.2752%; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; list-style:none; padding:0; margin:0; font-size:.86207cqw; text-align:center; line-height:1.4; }
.mockup-project-topics li { padding:5px 9px; border:1px solid var(--project-line); border-radius:20px; }
.mockup-project-copy { position:absolute; left:5.1549%; top:23.1651%; width:50.4235%; }
.mockup-project-copy h3 { font-size:5.35201cqw; line-height:1.14; letter-spacing:-.05747cqw; font-weight:600; height:25.34074cqw; margin:0 0 1.72414cqw; color:var(--stack-title); }
.mockup-project-copy p { width:34.82522cqw; font-size:1.72414cqw; line-height:1.1875; color:var(--stack-body); margin:0; }
.mockup-project-copy a:hover { text-decoration:underline; text-underline-offset:5px; }
.mockup-title-mobile { display:none; }
.mockup-art { position:absolute; inset:0 0 0 56%; overflow:hidden; }
.notifications-mockup .mockup-art { overflow:visible; }
.notifications-mockup .mockup-scene { translate:0 24px; }
.mockup-scene { position:absolute; left:-127.27273%; top:0; width:227.27273%; height:100%; }
.pwa-device { position:absolute; left:45.2308%; top:-19.9284%; width:60.8167%; height:145.6075%; }
.pwa-screen { position:absolute; left:65.0703%; top:21.0319%; width:19.7274%; height:66.8908%; object-fit:cover; object-position:top; border-radius:9.468% / 4.4575%; background:#c6f8fd; }
.laptop-mockup .mockup-art { left:42%; }
.laptop-mockup .mockup-scene { left:-72.41379%; width:172.41379%; }
.laptop-device { position:absolute; left:22.3563%; top:15.359%; width:103.7744%; height:93.1827%; }
@media (min-width:1001px) {
  .laptop-device { left:28.2%; top:18.8494%; width:96%; height:auto; aspect-ratio:16 / 9; }
}
.laptop-image { display:block; width:100%; height:100%; }
.laptop-media { position:absolute; left:29.8698%; top:12.037%; width:40.3646%; height:45.2778%; object-fit:contain; background:#111; }
.miniowa-mockup .mockup-art { left:52%; }
.miniowa-mockup .mockup-scene { inset:0; width:100%; height:100%; }
.miniowa-cover-phone { position:absolute; left:50%; top:54%; width:auto; height:70%; border-radius:15% / 7.3%; transform:translate(-50%,-50%); }
.preview-toggle { position:absolute; left:5.1549%; bottom:5%; padding:8px 12px; border:1px solid var(--stack-line); border-radius:20px; background:transparent; color:var(--stack-ink); font:inherit; font-size:12px; cursor:pointer; }
.preview-toggle:hover { background:var(--project-hover); }
.preview-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.preview-toggle-icon { display:none; }
.preview-toggle[aria-pressed="true"] .preview-icon-play,
.preview-toggle[aria-pressed="false"] .preview-icon-pause { display:none; }
.mockup-art:focus-visible { outline:2px solid currentColor; outline-offset:-6px; border-radius:12px; }
.stack-footer { max-width:none; border:0; padding:20px 36px 30px; color:var(--stack-ink); }
.stack-footer>span { color:inherit; }
.stack-footer>a { font-size:11px; padding:12px 0; }
@media (max-width:760px) {
  .stack-home { --stack-inset:132px; }
  .stack-hero { padding:calc(var(--stack-inset) + 36px) 24px 24px; gap:36px; }
  .stack-hero-intro { font-size:15px; margin-bottom:22px; }
  .stack-hero h1 { font-size:clamp(48px,8.5vw,64px); letter-spacing:-.04em; margin-bottom:28px; }
  .stack-hero-details { grid-template-columns:1fr; gap:18px; }
  .stack-hero-role { font-size:13px; }.stack-hero-role br { display:none; }.stack-hero-role strong::before { content:" / "; font-weight:400; }
  .stack-hero-description { font-size:16px; max-width:430px; }
  .stack-hero-footer { padding-top:18px; }.stack-hero-footer>span { display:none; }.stack-hero-footer a { font-size:13px; }
  .stack-work { padding:var(--stack-inset) 12px 12px; }.stack-project { min-height:calc(100svh - var(--stack-inset) - 12px); padding:15px; border-radius:10px; margin-bottom:12px; }
  .stack-footer { padding:12px 20px 24px; gap:6px 18px; }.stack-footer>span { order:3; }
  .stack-project.mockup-project { min-height:calc(100svh - var(--stack-inset) - 12px); }
  #stack-cards::after { height:12px; }
}
@media (max-width:1000px) {
  .stack-project.mockup-project { height:auto; container-type:normal; }
  .mockup-layout { position:relative; left:auto; top:auto; transform:none; width:100%; aspect-ratio:auto; padding:28px 24px 24px; display:flex; flex-direction:column; gap:20px; }
  .mockup-project-label { position:static; font-size:10px; letter-spacing:1.1px; }
  .mockup-project-topics { position:static; width:100%; font-size:10px; gap:10px; justify-content:flex-start; text-align:left; }
  .mockup-project-copy { position:static; width:100%; }
  .mockup-project-copy h3 { font-size:clamp(28px,7.2vw,40px); height:auto; letter-spacing:-.4px; margin-bottom:18px; }
  .mockup-project-copy p { width:100%; font-size:13px; line-height:1.5; max-width:400px; }
  .mockup-art { position:relative; inset:auto; height:340px; margin:0 -24px; }
  .mockup-scene { left:50%; top:50%; width:660px; height:auto; aspect-ratio:1392 / 872; transform:translate(-74.934%,-50%); }
  .laptop-mockup .mockup-art { left:auto; height:240px; }
  .laptop-mockup .mockup-scene { left:50%; width:min(125cqw,750px); transform:translate(-75.15%,-50%); }
  .miniowa-mockup .mockup-art { left:auto; }
  .miniowa-mockup .mockup-scene { inset:auto; left:50%; top:50%; width:min(100%,360px); height:100%; transform:translate(-50%,-50%); }
  .preview-toggle { position:static; align-self:flex-start; }
}
@media (max-width:760px) {
  html.stack-snap { scroll-snap-type:y mandatory; }
  .stack-work { padding-left:16px; padding-right:16px; }
  .stack-project.mockup-project { top:var(--stack-inset); height:calc(100svh - var(--stack-inset) - 12px); min-height:0; container-type:size; border-radius:16px; margin-bottom:12px; overflow:visible; background:transparent; box-shadow:none; }
  .mockup-layout { position:absolute; left:0; top:0; height:100%; padding:clamp(12px,2.5cqh,20px) 24px 12px; gap:0; container-type:normal; overflow:hidden; background:var(--stack-card); border-radius:inherit; box-shadow:0 -4px 20px #00000006; transition:top 180ms ease,height 180ms ease; }
  .mockup-project-label { flex-shrink:0; font-size:clamp(8px,1.4cqh,10px); line-height:1.4; letter-spacing:.8px; }
  .mockup-project-topics { flex-shrink:0; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 clamp(12px,2.5cqh,20px); font-size:clamp(8px,1.3cqh,10px); line-height:1.3; }
  .mockup-project-topics li { padding:4px 8px; }
  .mockup-title-desktop { display:none; }
  .mockup-title-mobile { display:inline; }
  .mockup-project-copy { flex-shrink:0; }
  .mockup-project-copy h3 { font-size:clamp(20px,min(7.7vw,4.4cqh),32px); line-height:1.12; letter-spacing:-.4px; font-weight:600; margin-bottom:clamp(10px,2cqh,16px); }
  .mockup-project-copy p { font-size:clamp(11px,1.9cqh,14px); line-height:1.4; max-width:none; }
  .mockup-art,.laptop-mockup .mockup-art,.miniowa-mockup .mockup-art { flex:1; min-height:0; height:auto; aspect-ratio:auto; margin:clamp(12px,2.5cqh,20px) -24px 0; container-type:size; }
  .notifications-mockup .mockup-art { margin-bottom:-12px; }
  .mockup-scene { inset:auto; left:50%; top:50%; width:min(100cqw,102cqh); height:auto; aspect-ratio:357 / 350; transform:translate(-50%,-50%); }
  .notifications-mockup .mockup-scene { left:47%; top:auto; bottom:0; width:min(130cqw,102cqh); transform:translateX(-50%); translate:0 20px; }
  .laptop-mockup .mockup-scene { inset:auto; left:50%; top:50%; width:min(100cqw,136cqh); height:auto; aspect-ratio:357 / 263; transform:translate(-50%,-50%); }
  .laptop-device { left:50%; top:-12%; width:210%; height:auto; aspect-ratio:16 / 9; transform:translateX(-50%); }
  .pwa-device { left:9%; top:-26%; width:93%; height:auto; }
  .pwa-screen { left:39.34%; top:13.97%; width:30.17%; height:65.36%; }
  .miniowa-mockup .mockup-scene { inset:auto; left:50%; top:50%; width:100%; height:100%; }
  .miniowa-cover-phone { height:88%; top:52%; }
  .preview-toggle { position:absolute; left:12px; bottom:12px; width:44px; height:44px; padding:0; margin:0; border-radius:50%; display:grid; place-items:center; background:var(--stack-card); }
  .preview-toggle-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .preview-toggle-icon { display:block; }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  html:not(.stack-free-scroll) .header[data-idle]:not(:focus-within) ~ .stack-main .stack-project[data-stack-pinned] > .mockup-layout { top:calc(-1 * var(--mobile-tabs-space)); height:calc(100% + var(--mobile-tabs-space)); }
}
@media (prefers-reduced-motion:reduce) { html.stack-snap { scroll-snap-type:none; }.stack-project.mockup-project { position:relative; top:auto; } }