@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;450;500;550;600;650;700;750;800&display=swap');
:root{color-scheme:light;--surface:#faf7ff;--surface-low:#f3edf9;--surface-container:#ece5f3;--surface-high:#e6dfee;--on-surface:#211d28;--on-variant:#635c6e;--primary:#674d96;--on-primary:#fff;--primary-container:#eaddff;--on-primary-container:#301950;--secondary-container:#e8def2;--tertiary-container:#ffdbca;--on-tertiary-container:#62341c;--outline:#cdc3d7;--shadow:#28143d26;--ease:cubic-bezier(.2,0,0,1);--spring:cubic-bezier(.22,1.35,.42,1);--duration:420ms;font-family:'Roboto Flex',Roboto,Arial,sans-serif;font-size:16px}
:root[data-theme=dark]{color-scheme:dark;--surface:#15111c;--surface-low:#201b28;--surface-container:#282230;--surface-high:#342d3d;--on-surface:#ece2f4;--on-variant:#cbc0d6;--primary:#d2b8ff;--on-primary:#382052;--primary-container:#50386e;--on-primary-container:#ecddff;--secondary-container:#493d57;--tertiary-container:#623e2b;--on-tertiary-container:#ffdbc8;--outline:#514759;--shadow:#0006}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--surface);color:var(--on-surface);line-height:1.5;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease)}body.modal-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:disabled{cursor:default}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:650}h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.1}h3{font-size:23px;letter-spacing:-.015em;line-height:1.2}p{color:var(--on-variant)}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.icon{display:block;flex-shrink:0;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.reverse{rotate:180deg}.down{rotate:90deg}.page{max-width:1500px;padding:16px clamp(20px,4vw,60px) 28px;margin:auto}.topbar,.topbar nav,.actions,.section-heading,.gallery-controls,.dialog-heading{display:flex;align-items:center;gap:12px}.topbar{justify-content:space-between;margin-bottom:26px}.topbar nav{gap:8px}.hero{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,4vw,60px);align-items:center;padding:20px 0 60px}.hero h1{font-size:clamp(68px,8vw,116px);line-height:.98;letter-spacing:-.065em;margin-bottom:24px}.hero p{font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:37ch}.actions{flex-wrap:wrap;margin-top:28px}.hero-image{width:100%;min-width:0}.section{margin-top:64px}.features h2{margin-bottom:24px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature-card{padding:28px;background:var(--surface-low);border-radius:30px;transition:background-color var(--duration) var(--ease)}.feature-card:nth-child(2){border-top-right-radius:60px}.feature-card:nth-child(3){border-bottom-left-radius:60px}.feature-card h3{margin:24px 0 12px}.feature-card p{line-height:1.65;font-size:16px}.shape-icon{display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;border-radius:20px;background:var(--primary-container);color:var(--on-primary-container)}.feature-card:nth-child(2) .shape-icon{background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:50%}.feature-card:nth-child(3) .shape-icon{border-radius:16px 26px 16px 26px}.shape-icon .icon{width:28px;height:28px}
/* Shared Material state layers, shape changes and tactile press motion. */
.button,.icon-button,.text-button,.studio-tab,.license-link{position:relative;isolation:isolate;overflow:hidden;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:100px;background:transparent;color:var(--primary);font-weight:600;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),border-radius 260ms var(--spring),transform 260ms var(--spring),box-shadow 260ms var(--ease),opacity 180ms var(--ease)}
.button::before,.icon-button::before,.text-button::before,.studio-tab::before,.license-link::before{content:'';position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;transition:opacity 160ms var(--ease);pointer-events:none}.filled{background:var(--primary);color:var(--on-primary)}.tonal{background:var(--primary-container);color:var(--on-primary-container)}.icon-button{width:48px;padding:0;flex-shrink:0}.text-button{padding:0 16px}.back-link{margin-left:-12px}.button:hover::before,.icon-button:hover::before,.text-button:hover::before,.studio-tab:hover::before,.license-link:hover::before{opacity:.08}.button:hover,.icon-button:hover{border-radius:18px}.button:active,.icon-button:active,.text-button:active,.studio-tab:active{transform:scale(.96);border-radius:14px}.button:active::before,.icon-button:active::before,.text-button:active::before{opacity:.14}.button .icon,.text-button .icon,.license-link>.icon{transition:translate 260ms var(--spring)}.button:hover .icon,.license-link:hover>.icon{translate:2px -1px}.back-link:hover .icon{translate:-3px 0}.icon-button:disabled{opacity:.35;pointer-events:none}.button:focus-visible,.text-button:focus-visible,.icon-button:focus-visible,.studio-tab:focus-visible,.license-link:focus-visible,.image-trigger:focus-visible,.gallery-track:focus-visible,.studio-panel:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.ripple{position:absolute;width:var(--ripple-size);height:var(--ripple-size);top:var(--ripple-y);left:var(--ripple-x);border-radius:50%;background:currentColor;opacity:.14;pointer-events:none;z-index:-1}.theme-sun{display:none}:root[data-theme=dark] .theme-sun{display:block}:root[data-theme=dark] .theme-moon{display:none}
/* A single grouped video stage, with a moving selected-tab surface. */
.studio h2{margin-bottom:24px}.studio-group{border-radius:36px;background:var(--surface-low);padding:12px;transition:background-color var(--duration) var(--ease)}.studio-tabs{display:flex;position:relative;width:max-content;max-width:100%;padding:6px;gap:4px;margin:0 auto 12px;background:var(--surface-container);border-radius:100px;isolation:isolate}.studio-tab{z-index:1;min-height:54px;font-size:16px;padding:0 24px;color:var(--on-variant);white-space:nowrap}.studio-tab[aria-selected=true]{color:var(--on-primary-container)}.tab-indicator{position:absolute;left:0;top:6px;height:54px;background:var(--primary-container);border-radius:100px;pointer-events:none;transform-origin:0 50%;transition:background-color var(--duration) var(--ease)}.studio-tabs:not(.is-ready) .studio-tab[aria-selected=true]{background:var(--primary-container)}.studio-panel{border-radius:26px;overflow:hidden}.video-stage{position:relative;aspect-ratio:16/9;background:var(--surface-container);border-radius:26px;overflow:hidden;display:grid;place-items:center}.video-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#15111c}.video-pending{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:24px;color:var(--on-variant)}.video-pending .shape-icon{width:92px;height:92px;border-radius:32px;background:var(--surface-high);color:var(--primary);rotate:-6deg}.video-pending .icon{width:40px;height:40px;rotate:6deg}.video-pending strong{display:block;font-size:24px;font-weight:550;color:var(--on-surface)}.video-pending p{margin-top:4px;font-size:15px}.demo-copy{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;padding:30px 22px 22px;align-items:start}.demo-copy h3{font-size:28px}.demo-copy p{max-width:64ch;line-height:1.65}.video-unavailable{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;background:var(--surface-container)}
/* Unframed, large screenshots. The track supports touch and keyboard use. */
.section-heading{justify-content:space-between;margin-bottom:22px}.gallery-controls{flex-shrink:0}.gallery-controls>span{font-variant-numeric:tabular-nums;font-size:14px;color:var(--on-variant);margin-right:8px}.gallery-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--outline) transparent;padding:8px 4px 26px;margin:-8px -4px -26px}.gallery-slide{flex:0 0 85%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:12px 8px}.gallery-slide:last-child{margin-right:15%}.image-trigger{display:block;border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:18px;transition:transform 420ms var(--spring),filter 420ms var(--ease)}.image-trigger img{width:100%;border-radius:16px;box-shadow:0 12px 30px var(--shadow);transition:box-shadow 420ms var(--ease)}.image-trigger:hover{transform:translateY(-4px)}.image-trigger:active{transform:scale(.99)}.image-trigger:hover img{box-shadow:0 18px 36px var(--shadow)}.gallery-slide figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:20px;color:var(--on-variant);font-size:15px}.gallery-slide figcaption span{font-variant-numeric:tabular-nums}.local-note{display:flex;gap:24px;align-items:center;padding:32px;background:var(--primary-container);border-radius:36px;color:var(--on-primary-container)}.local-note .shape-icon{background:var(--surface);border-radius:50%}.local-note>div{flex:1}.local-note h2{font-size:clamp(26px,3vw,34px);margin-bottom:12px}.local-note p{color:inherit;max-width:65ch}.local-note .button{flex-shrink:0}footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--outline)}footer .text-button{margin-left:-12px}
/* The screenshot dialog has no panel. Licenses use a themed Material surface. */
dialog{color:var(--on-surface);border:0}dialog::backdrop{background:#100b1bd9;backdrop-filter:blur(10px);animation:backdrop-in 220ms ease both}.licenses-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border-radius:32px;background:var(--surface-high);box-shadow:0 24px 80px #0005;overflow:auto}.dialog-heading{justify-content:space-between;margin-bottom:20px}.licenses-dialog h2{font-size:32px;margin-bottom:12px}.licenses-dialog>p{margin-bottom:24px}.license-link{display:flex;justify-content:space-between;width:100%;padding:18px 16px;margin:8px 0;border-radius:20px;background:var(--surface-low);text-align:left}.license-link>span>span{display:block;color:var(--on-variant);font-size:14px;font-weight:400;margin-top:4px}.dialog-actions{display:flex;justify-content:flex-end;margin-top:24px}.image-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:transparent;overflow:hidden;outline:none}.image-dialog[open]{display:flex;align-items:center;justify-content:center}.image-dialog>img{width:auto;height:auto;max-width:96vw;max-height:94dvh;object-fit:contain;border-radius:12px;box-shadow:0 24px 64px #0007}.image-close{position:absolute;right:20px;top:20px;z-index:2;background:var(--surface-high);color:var(--on-surface);box-shadow:0 4px 12px #0003}.skip-link{position:fixed;left:16px;top:12px;padding:12px 20px;z-index:10;background:var(--primary);color:var(--on-primary);border-radius:24px;transform:translateY(-160%)}.skip-link:focus{transform:none}.reveal-pending{opacity:0;translate:0 20px}.reveal-visible{opacity:1;translate:0;transition:opacity 600ms var(--ease),translate 700ms var(--spring)}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:1000px){.hero{grid-template-columns:.85fr 1.15fr;gap:26px}.hero h1{font-size:82px}.button{padding:0 18px}.feature-card{padding:22px}.local-note{flex-wrap:wrap}.local-note .button{margin-left:80px}}
@media(max-width:760px){.page{padding:12px 20px 24px}.topbar{margin-bottom:16px}.hero{grid-template-columns:1fr;padding:16px 0 44px;gap:32px}.hero h1{font-size:clamp(68px,16vw,100px)}.hero p{max-width:48ch}.feature-grid{grid-template-columns:1fr}.feature-card{padding:24px;border-radius:28px!important}.feature-card h3{margin-top:20px}.section{margin-top:44px}.studio-group{padding:8px;border-radius:28px}.studio-tabs{width:100%;gap:0;padding:4px}.studio-tab{flex:1;min-width:0;gap:6px;padding:0 10px;font-size:14px;min-height:48px}.studio-tab .icon{width:20px;height:20px}.tab-indicator{height:48px;top:4px}.demo-copy{grid-template-columns:1fr;gap:12px;padding:22px 14px 18px}.demo-copy h3{font-size:25px}.video-stage{aspect-ratio:4/3;border-radius:20px}.video-pending .shape-icon{width:64px;height:64px;border-radius:24px}.video-pending .icon{width:28px;height:28px}.video-pending strong{font-size:20px}.gallery-track{gap:8px}.gallery-slide{flex-basis:94%;padding:8px 4px}.gallery-slide:last-child{margin-right:6%}.gallery-controls{gap:6px}.gallery-controls>span{display:none}.section-heading{gap:10px}.local-note{padding:24px;gap:18px}.local-note>div{flex-basis:calc(100% - 74px)}.local-note .button{margin-left:0}.licenses-dialog{padding:24px}.image-close{top:12px;right:12px}}
@media(max-width:390px){.studio-tab .icon{display:none}.studio-tab{padding:0 8px}.topbar nav .text-button{padding:0 12px}.gallery-controls .icon-button{width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){html,.gallery-track{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;translate:none}.image-trigger:hover,.image-trigger:active{transform:none}}

/* OS-aware GitHub download picker. */
.hero .actions[data-reveal]{position:relative;z-index:20}.download-picker{position:relative;z-index:4}.download-split{display:flex;align-items:center;gap:4px}.download-primary{border-radius:100px 28px 28px 100px;padding-inline:20px;min-width:218px}.download-toggle{width:50px;min-height:50px;border-radius:28px 100px 100px 28px}.download-toggle[aria-expanded=true] .icon{rotate:180deg}.download-menu{position:absolute;z-index:8;top:calc(100% + 12px);left:0;width:min(440px,calc(100vw - 40px));max-height:min(72dvh,540px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;padding:14px;border:1px solid var(--outline);border-radius:30px;background:var(--surface-high);color:var(--on-surface);box-shadow:0 18px 50px var(--shadow);transform-origin:top left}.download-menu::-webkit-scrollbar{display:none}.download-menu[hidden]{display:none}.download-menu-heading{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 14px}.download-menu-heading strong{display:block;font-size:18px;font-weight:650}.download-menu-heading span{display:block;color:var(--on-variant);font-size:13px;margin-top:2px}.download-menu-heading>a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--primary)}.download-menu-heading>a:hover{background:var(--primary-container);color:var(--on-primary-container)}.download-group{padding:7px 4px 10px;border-top:1px solid var(--outline)}.download-group h3{padding:8px 9px;color:var(--on-variant);font-size:13px;letter-spacing:.06em;text-transform:uppercase}.download-option{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:18px;color:var(--on-surface);font-size:14px;transition:background-color 180ms var(--ease),border-radius 240ms var(--spring),translate 240ms var(--spring)}.download-option:hover,.download-option:focus-visible{outline:0;background:var(--primary-container);color:var(--on-primary-container);border-radius:14px;translate:2px 0}.download-option:focus-visible{box-shadow:inset 0 0 0 2px var(--primary)}.download-recommended{flex:none;padding:4px 9px;border-radius:100px;background:var(--tertiary-container);color:var(--on-tertiary-container);font-size:11px;font-weight:650}.download-menu-footer{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-top:1px solid var(--outline);padding:12px 4px 2px}.download-menu-footer a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:7px 10px;border-radius:16px;color:var(--primary);font-size:13px;font-weight:600}.download-menu-footer a:hover{background:var(--primary-container);color:var(--on-primary-container)}.download-menu-footer .icon{width:18px;height:18px}.download-option[aria-current=true]{background:var(--primary-container);color:var(--on-primary-container)}
/* Keep the active carousel screenshot centered while neighbouring images peek in. */
.gallery-track{padding-inline:7.5%;scroll-padding-inline:7.5%}.gallery-slide{flex-basis:100%;scroll-snap-align:center}.gallery-slide:last-child{margin-right:0}
@media(max-width:760px){.gallery-track{padding-inline:3%;scroll-padding-inline:3%}.gallery-slide{flex-basis:100%}.gallery-slide:last-child{margin-right:0}.download-menu{width:min(440px,calc(100vw - 40px))}}
.media-credit{margin-top:10px;font-size:13px}.media-credit a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}.media-credit a:hover{color:var(--on-primary-container)}

.gallery-track{cursor:grab}.gallery-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}.gallery-track.is-dragging *{pointer-events:none}.gallery-track img{-webkit-user-drag:none}

/* Kader-only additions on top of the shared program stylesheet (dizako.css). */
.screenshot-stage{aspect-ratio:1480/940;background:var(--surface-container)}
.screenshot-stage img{display:block;width:100%;height:100%;object-fit:cover}

.gallery-track{cursor:grab}.gallery-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}.gallery-track.is-dragging *{pointer-events:none}.gallery-track img{-webkit-user-drag:none}
