.page{flex-direction:column;min-height:100dvh;display:flex}.page-main{justify-content:center;align-items:center;gap:var(--mk-space-4);padding:var(--mk-space-16) 16px;text-align:center;flex-direction:column;flex:1;display:flex}.page-title{margin-top:var(--mk-space-2);font-family:var(--mk-font-display);font-size:clamp(2.25rem,1.6rem + 3vw,3.5rem);font-weight:var(--mk-weight-medium);letter-spacing:-.035em;line-height:1}.page-tagline{max-width:420px;color:var(--mk-fg-muted);font-size:var(--mk-text-md);line-height:var(--mk-leading-normal)}.page-disclaimer{padding:var(--mk-space-8) 16px 0;color:var(--mk-fg-subtle);font-size:var(--mk-text-xs);text-align:center;margin:0}.studio{flex-direction:column;flex:1;width:100%;display:flex}.studio>main{flex:1}@media (pointer:coarse){.only-fine{display:none!important}}@media not (pointer:coarse){.only-coarse{display:none!important}}.home{align-content:center;gap:var(--mk-space-12);width:100%;max-width:1120px;padding:var(--mk-space-12) max(16px, env(safe-area-inset-right)) var(--mk-space-12) max(16px, env(safe-area-inset-left));margin:0 auto;display:grid}.home[data-enter]{animation:page-in var(--mk-dur-reveal) var(--mk-ease-out) both}@keyframes page-in{0%{opacity:0;translate:0 calc(var(--mk-enter-offset) * 2)}}.examples-list{gap:var(--mk-space-6);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.examples-item{min-width:0}.home-intro{justify-items:center;gap:var(--mk-space-4);text-align:center;display:grid}.home-title{font-family:var(--mk-font-display);font-size:var(--mk-text-display);font-weight:var(--mk-weight-semibold);line-height:var(--mk-leading-tight);letter-spacing:-.045em;text-wrap:balance;margin:0}.home-tagline{max-width:34rem;color:var(--mk-fg-muted);font-size:var(--mk-text-md);line-height:var(--mk-leading-normal);text-wrap:pretty;margin:0}.home-begin{margin-top:var(--mk-space-2);min-width:200px}.home-note,.step-privacy{color:var(--mk-fg-subtle);font-size:var(--mk-text-sm);align-items:center;gap:6px;margin:0;display:inline-flex}@media (max-width:719px){.home{gap:var(--mk-space-8);padding-top:var(--mk-space-6)}.examples{margin-inline:-16px}.examples-list{gap:var(--mk-space-4);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;grid-template-columns:none;grid-auto-columns:min(84%,340px);grid-auto-flow:column;padding-inline:16px;scroll-padding-inline:16px;overflow-x:auto}.examples-list::-webkit-scrollbar{display:none}.examples-item{scroll-snap-align:start}.home-begin{width:100%;max-width:400px}}.step{box-sizing:border-box;width:100%;max-width:600px;padding:0 max(16px, env(safe-area-inset-right)) var(--mk-space-12) max(16px, env(safe-area-inset-left));margin:0 auto}.step-header{grid-template-columns:1fr auto 1fr;align-items:center;height:64px;display:grid}.step-back{justify-self:start;margin-left:-8px}.step-brand{min-height:var(--mk-hit);border-radius:var(--mk-radius-md);color:var(--mk-fg);font-family:var(--mk-font-display);font-size:var(--mk-text-md);font-weight:var(--mk-weight-medium);letter-spacing:-.01em;transition:background-color var(--mk-dur-base) var(--mk-ease-out);-webkit-tap-highlight-color:transparent;align-items:center;gap:8px;padding:0 8px;text-decoration:none;display:inline-flex}.step-brand:hover{background:var(--mk-fill);transition-duration:0s}.step-brand:active{background:var(--mk-fill-active)}.step-brand:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:2px}.step-body{padding-top:var(--mk-space-6);display:grid}.step-title{font-family:var(--mk-font-display);font-size:var(--mk-text-xl);font-weight:var(--mk-weight-semibold);line-height:var(--mk-leading-tight);letter-spacing:-.03em;text-align:center;margin:0}.step-lede{margin:var(--mk-space-2) 0 var(--mk-space-6);color:var(--mk-fg-muted);font-size:var(--mk-text-md);text-align:center}@media (min-width:720px){.step-title{font-size:var(--mk-text-2xl)}.step-body{padding-top:var(--mk-space-10)}}.drop{align-content:center;place-items:center;gap:var(--mk-space-3);aspect-ratio:16/9;width:100%;padding:var(--mk-space-6);border:1.5px dashed var(--mk-border-stronger);border-radius:var(--mk-radius-card);background:var(--mk-bg-subtle);color:var(--mk-fg);text-align:center;cursor:pointer;transition:background-color var(--mk-dur-base) var(--mk-ease-out), border-color var(--mk-dur-base) var(--mk-ease-out);-webkit-tap-highlight-color:transparent;display:grid;position:relative}@media (hover:hover){.drop:hover{border-color:var(--mk-fg-subtle);background:var(--mk-fill);transition-duration:0s}}.drop:active{background:var(--mk-fill-hover);transition-duration:0s}.drop:has(input:focus-visible){outline:2px solid var(--mk-focus-ring);outline-offset:3px}.drop[data-dragging]{border-style:solid;border-color:var(--mk-accent);background:var(--mk-accent-subtle);transition-duration:0s}.drop-icon{background:var(--mk-surface-raised);width:44px;height:44px;box-shadow:var(--mk-shadow-sm), var(--mk-highlight), 0 0 0 1px var(--mk-border);transition:translate var(--mk-dur-spring) var(--mk-spring), color var(--mk-dur-base) var(--mk-ease-out);border-radius:50%;place-items:center;display:grid}.drop[data-dragging] .drop-icon{color:var(--mk-accent-text);translate:0 calc(-3px * var(--mk-motion))}.drop-text{font-size:var(--mk-text-md);font-weight:var(--mk-weight-medium)}.drop-button{border:1px solid var(--mk-border-strong);border-radius:var(--mk-radius-full);background:var(--mk-surface-raised);height:32px;box-shadow:var(--mk-shadow-xs), var(--mk-highlight);color:var(--mk-fg);font-size:var(--mk-text-sm);font-weight:var(--mk-weight-medium);align-items:center;gap:6px;padding:0 14px;display:inline-flex}.drop-hint{margin:var(--mk-space-4) 0 var(--mk-space-1);color:var(--mk-fg-muted);font-size:var(--mk-text-sm);text-align:center}.step-privacy{justify-self:center}.step-keep{margin-top:var(--mk-space-6);justify-self:center}.title-preview{justify-items:center;gap:var(--mk-space-3);margin-bottom:var(--mk-space-8);padding:var(--mk-space-6) var(--mk-space-6) var(--mk-space-3);border:1px solid var(--mk-border);border-radius:var(--mk-radius-card);background:var(--mk-bg-subtle);display:grid}.title-preview .fd-solo,.title-preview-note{width:100%;max-width:400px}.title-preview-note{justify-content:space-between;align-items:center;gap:var(--mk-space-2);color:var(--mk-fg-muted);font-size:var(--mk-text-sm);margin:0;display:flex}.title-preview-note .mk-button{flex:none;margin-right:-10px}.title-form{gap:var(--mk-space-5);display:grid}.title-counter{justify-content:space-between;align-items:flex-start;gap:var(--mk-space-3);display:flex}.title-counter>.mk-tabular{color:var(--mk-fg-subtle);font-size:var(--mk-text-sm);line-height:var(--mk-leading-normal);flex:none}.title-submit{width:100%;margin-top:var(--mk-space-2)}@media (max-width:479px){.title-preview{padding:var(--mk-space-4) var(--mk-space-4) var(--mk-space-2)}}.results-hero{width:100%;max-width:1120px;min-height:100dvh;padding:0 max(16px, env(safe-area-inset-right)) var(--mk-space-6) max(16px, env(safe-area-inset-left));grid-template-rows:auto 1fr auto;margin:0 auto;display:grid}.results-hero .step-header{justify-content:space-between;display:flex}.results-hero .step-brand{margin-left:-8px}.results-actions{gap:var(--mk-space-1);margin-right:-8px;display:flex}.results-card{width:min(100%,400px);padding-block:var(--mk-space-8);place-self:center}.results-more{color:var(--mk-fg-muted);justify-self:center}.previews{max-width:1120px;padding:var(--mk-space-12) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));scroll-margin-top:var(--mk-space-4);margin:0 auto}.previews-head{justify-content:space-between;align-items:flex-end;gap:var(--mk-space-4);margin-bottom:var(--mk-space-6);flex-wrap:wrap;display:flex}.previews-title{font-family:var(--mk-font-display);font-size:var(--mk-text-xl);font-weight:var(--mk-weight-semibold);line-height:var(--mk-leading-tight);letter-spacing:-.03em;margin:0}.previews-lede{margin:var(--mk-space-2) 0 0;color:var(--mk-fg-muted);font-size:var(--mk-text-md)}.previews-region{align-items:center;gap:var(--mk-space-2);color:var(--mk-fg-muted);font-size:var(--mk-text-sm);display:inline-flex}.previews-region .mk-select{width:190px}.previews-error{justify-content:space-between;align-items:center;gap:var(--mk-space-3) var(--mk-space-4);margin-bottom:var(--mk-space-6);padding:var(--mk-space-3) var(--mk-space-4);border:1px solid var(--mk-danger-border);border-radius:var(--mk-radius-lg);background:var(--mk-danger-subtle);font-size:var(--mk-text-sm);flex-wrap:wrap;display:flex}.previews-error p{margin:0}.previews-error strong{color:var(--mk-danger-text);font-weight:var(--mk-weight-semibold)}.previews-stale{margin:0 0 var(--mk-space-4);color:var(--mk-warning-text);font-size:var(--mk-text-sm)}.devices{gap:var(--mk-space-4);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.device{border:1px solid var(--mk-border);border-radius:var(--mk-radius-card);background:var(--mk-surface);box-shadow:var(--mk-shadow-sm), var(--mk-highlight);grid-template-rows:auto 1fr;display:grid;overflow:hidden}.device-stage{aspect-ratio:4/3;padding:var(--mk-space-5);border-bottom:1px solid var(--mk-border);background:var(--mk-bg-subtle);place-items:center;display:grid}.device-screen{background:var(--mk-fill);width:100%;box-shadow:0 0 0 1px var(--mk-border-strong), var(--mk-shadow-md);position:relative;overflow:hidden}.device[data-device=phone] .device-screen{border-radius:14px;width:auto;height:100%}.device[data-device=desktop] .device-screen{border-radius:var(--mk-radius-sm)}.device[data-device=tv] .device-screen{border-radius:var(--mk-radius-sm);box-sizing:content-box;border:4px solid #0b0b0c;width:calc(100% - 8px)}.device-info{align-content:start;gap:var(--mk-space-3);padding:var(--mk-space-4);display:grid}.device-label{justify-content:space-between;align-items:baseline;gap:var(--mk-space-2);display:flex}.device-name{font-size:var(--mk-text-md);font-weight:var(--mk-weight-semibold);margin:0}.device-size{color:var(--mk-fg-subtle);font-size:var(--mk-text-xs);font-variant-numeric:tabular-nums}.device-cut{min-height:20px;color:var(--mk-fg-muted);font-size:var(--mk-text-sm);align-items:center;gap:6px;margin:0;display:flex}.device-cut svg{flex:none}.device-cut q,.device-cut span{min-width:0}.device-cut q{color:var(--mk-fg);quotes:"“" "”"}.device-open{width:100%}@media (max-width:899px){.devices{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}.previews-head{max-width:480px;margin-inline:auto}}:root[data-vt] [data-vt=surface]{view-transition-name:surface}:root[data-vt] [data-vt=meta]{view-transition-name:card-meta}:root[data-vt]::view-transition-group(*){animation-duration:var(--mk-dur-slow);animation-timing-function:var(--mk-ease-out)}:root[data-vt]::view-transition-old(root){animation-duration:var(--mk-dur-fade)}:root[data-vt]::view-transition-new(root){animation-duration:var(--mk-dur-fade)}:root[data-vt]::view-transition-old(surface){animation-duration:var(--mk-dur-fade)}:root[data-vt]::view-transition-old(surface){object-fit:cover;height:100%}:root[data-vt]::view-transition-new(surface){object-fit:cover;height:100%}.examples-card .fd-thumb:not([data-loaded]){background:linear-gradient(90deg, transparent 0%, var(--fd-skeleton-shine) 50%, transparent 100%) 0 0 / 200% 100% no-repeat, var(--fd-skeleton);animation:fd-shimmer calc(1.6s * var(--mk-slowmo)) var(--mk-ease-in-out) infinite}.examples-card .fd-thumb img{transition:opacity var(--mk-dur-slow) var(--mk-ease-out)}.examples-card .fd-thumb:not([data-loaded]) img{opacity:0}@media (prefers-reduced-motion:reduce){.examples-card .fd-thumb:not([data-loaded]){animation:none}}.examples-list .fd-text{min-height:88px}