@font-face{font-family:Inter;src:url('assets/inter-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('assets/inter-medium.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:Inter;src:url('assets/inter-semibold.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Patrick Hand';src:url('assets/patrick-hand.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:light;--app:#e4e4e7;--page:#f4f4f5;--surface:#fff;--text:#09090b;--secondary:#52525b;--muted:#71717a;--border:#d4d4d8;--hover:#e4e4e7;--primary:#18181b;--blue:#2563eb;--shadow:rgba(0,0,0,.05);--sidebar:68px;--ease:cubic-bezier(.22,1,.36,1)}
:root[data-theme=dark]{color-scheme:dark;--app:#09090b;--page:#18181b;--surface:#27272a;--text:#fafafa;--secondary:#a1a1aa;--muted:#a1a1aa;--border:#52525b;--hover:#27272a;--primary:#fafafa;--shadow:rgba(0,0,0,.25)}
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:flex;padding:4px 4px 4px 0;background:var(--app);color:var(--text);font:400 14px/1.45 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;letter-spacing:-.14px;transition:background .3s,color .3s}button,input,textarea{font:inherit;color:inherit}button{border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}button[aria-disabled=true]{cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:disabled{cursor:default}img{display:block}button img{pointer-events:none}button:disabled img{opacity:.75}[hidden]{display:none!important}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);padding:20px 16px;display:flex;flex-direction:column;gap:20px;position:relative;z-index:20;transition:width .496s var(--ease),flex-basis .496s var(--ease);user-select:none}.sidebar.expanded{--sidebar:248px}.sidebar.dragging{transition:none}.brand{height:36px;display:flex;align-items:center;gap:12px;white-space:nowrap;padding-left:2px;flex-shrink:0}.brand-name{font-weight:600;font-size:19px;letter-spacing:-.7px;opacity:0;transition:opacity .2s}.main-nav,.bottom-nav{display:flex;flex-direction:column;gap:8px}.bottom-nav{margin-top:auto}.nav-button{display:flex;align-items:center;gap:12px;height:36px;min-height:36px;padding:8px;border-radius:999px;position:relative;width:36px;transition:background .2s}.nav-button:hover{background:var(--ghost-hover)}.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:none}.nav-label{white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s}.sidebar-extra{display:none}.expanded .sidebar-extra{display:block;animation:fade-in .4s .1s both;padding:12px 8px}.sidebar-extra>p{font-size:10px;font-weight:500;letter-spacing:.8px;color:var(--muted);margin:0 0 20px}.empty-history{font-size:12px;line-height:1.7;color:var(--muted)}.theme-switch{display:none;margin-left:auto;background:var(--border);width:26px;height:16px;border-radius:20px;padding:2px}.theme-switch:before{content:'';display:block;width:12px;height:12px;border-radius:50%;background:var(--surface);transition:transform .25s}.expanded .theme-switch{display:block}.nav-icon>.moon{display:none}.resize-handle{position:absolute;right:-18px;top:50%;transform:translate(-6px,-50%);width:24px;height:64px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s var(--ease),transform .22s var(--ease);cursor:ew-resize;touch-action:none}.resize-handle span{display:block;width:4px;height:28px;background:var(--primary);border-radius:20px;transition:height .2s var(--ease),width .2s var(--ease)}.sidebar:hover .resize-handle,.resize-handle:focus-visible, .sidebar.expanded .resize-handle:focus-visible{opacity:1;transform:translate(0,-50%)}.resize-handle:hover span,.resize-handle:focus-visible span{height:48px;width:5px;transition-duration:.2s}.tip:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);white-space:nowrap;padding:7px 8px;background:var(--tooltip-bg,#27272a);color:var(--tooltip-text,#fafafa);border-radius:8px;font-size:12px;font-weight:400;line-height:1.45;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s;pointer-events:none;z-index:80}.tip.tooltip-visible:after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}.sidebar .tip:after{bottom:auto;left:calc(100% + 8px);top:50%;transform:translate(-5px,-50%)}.sidebar .tip.tooltip-visible:after{transform:translate(0,-50%)}.sidebar.expanded .tip:after{display:none}
.workspace{flex:1;min-width:0;position:relative;background:var(--page);border-radius:12px;overflow:hidden;transition:background .3s}.top-actions{position:absolute;right:20px;top:20px;display:flex;gap:8px;z-index:10}.pill{height:32px;padding:0 12px;background:var(--hover);border-radius:999px;font-weight:500;white-space:nowrap}.pill.accent{background:var(--blue);color:white;box-shadow:0 4px 20px #2563eb40}.canvas{position:absolute;inset:0}.card-surface{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;border:2px solid var(--page);border-radius:24px;box-shadow:0 8px 30px rgba(0,0,0,.12);translate:var(--magnet-x,0px) var(--magnet-y,0px);transform:translateY(calc(-1 * var(--card-lift,0px))) scale(var(--card-scale,1));transition:box-shadow .4s var(--ease),transform .4s var(--ease);overflow:hidden}.card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-label{position:relative;z-index:3;font-weight:500;font-size:14px;line-height:10px;color:white}.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 35.577%)}.song .card-surface{background:#fde68a}
.composer-dock{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:650px;max-width:calc(100% - 40px);z-index:12}.composer{padding:12px;background:rgba(255,255,255,.7);border:.5px solid var(--border);border-radius:24px;box-shadow:0 8px 20px var(--shadow);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);transition:background .3s,border-color .25s,box-shadow .25s;position:relative}.composer:focus-within{border-color:var(--border);box-shadow:0 8px 20px var(--shadow)}textarea{display:block;width:100%;height:34px;min-height:34px;max-height:140px;padding:7px 8px;border:0;outline:none!important;resize:none;background:transparent;line-height:20px;letter-spacing:-.14px;overflow-y:auto}textarea::placeholder{color:var(--muted);opacity:1}.composer-controls{display:flex;align-items:center;gap:4px;margin-top:28px;height:32px}.icon-button,.generate-button{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;position:relative;border-radius:50%;transition:background .2s,transform .2s;font-size:24px;line-height:1}.icon-button:not(:disabled):hover,.mode-button:not(:disabled):hover{background:var(--ghost-hover)}.controls-spacer{flex:1}.generate-button{background:var(--blue);margin-left:4px}.generate-button>.generate-icon{display:block;color:#fff;transform:rotate(180deg) scaleX(-1);pointer-events:none}.generate-button:disabled{background:var(--disabled-bg)}.generate-button:disabled>.generate-icon{color:var(--icon-secondary)}.generate-button:not(:disabled):hover{background:var(--accent-hover)}.mode-wrapper{position:relative}.mode-button{height:32px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;font-weight:500;position:relative}.mode-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.mode-button[aria-expanded=true]{background:var(--ghost-hover)}.mode-button[aria-expanded=true]:after{display:none}.mode-menu{width:300px;padding:16px;border:.5px solid var(--border);border-radius:16px;position:absolute;bottom:calc(100% + 8px);left:-8px;background:var(--surface);box-shadow:0 8px 20px var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transform-origin:bottom left;transition:opacity .2s,transform .3s var(--ease),visibility .2s;z-index:50}.mode-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.mode-title{margin:0 0 8px;color:var(--secondary);font-weight:500;line-height:18px}.mode-title strong{color:var(--text);font-weight:500}.mode-description{color:var(--secondary);margin:0 0 16px;line-height:20px;min-height:40px}.mode-description strong{font-weight:500;color:var(--text)}.quality-slider{height:32px;position:relative;--position:50%;border-radius:999px;background:var(--page)}.slider-track{position:absolute;inset:0;background:radial-gradient(circle at 16px 50%,var(--border) 3.5px,transparent 4px),radial-gradient(circle at 50% 50%,var(--border) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 16px) 50%,var(--border) 3.5px,transparent 4px)}.slider-fill{position:absolute;left:0;top:0;height:32px;width:calc(50% + 16px);background:var(--blue);border-radius:99px;transition:width .35s var(--ease)}.slider-thumb{position:absolute;width:28px;height:28px;border-radius:50%;background:#fff;top:2px;left:calc(50% - 14px);transition:left .35s var(--ease);box-shadow:0 1px 2px #0000000a}.quality-slider input{position:absolute;inset:0;width:100%;height:32px;margin:0;opacity:0;cursor:pointer}.quality-slider:focus-within{outline:2px solid var(--blue);outline-offset:3px}.mode-options{position:absolute;left:16px;right:16px;bottom:16px;height:32px;display:flex;pointer-events:none}.mode-options button{flex:1;opacity:0;pointer-events:auto}.mode-options button:focus-visible{opacity:1;background:var(--surface);border-radius:20px;font-size:10px}.attachments{display:flex;gap:8px;padding:0 0 8px;overflow-x:auto;max-height:110px}.attachment{position:relative;flex:none;width:64px;height:64px;border-radius:12px;border:.5px solid var(--border);background:var(--page);display:flex;align-items:center;justify-content:center}.attachment>img{width:100%;height:100%;object-fit:cover;border-radius:12px}.attachment>span{font-size:10px;padding:6px;overflow:hidden;overflow-wrap:anywhere;line-height:14px;max-height:60px;text-align:center}.attachment-remove{position:absolute;right:-3px;top:-3px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:50%;color:var(--text);background:var(--surface);border:.5px solid var(--border);box-shadow:0 2px 5px #0001}/* Processing shell sits outside the composer, never changing its box. */
.composer-dock{isolation:isolate;--processing-bg:rgba(228,228,231,.7);--processing-border:#f4f4f5}
[data-theme=dark] .composer-dock{--processing-bg:rgba(9,9,11,.7);--processing-border:#27272a}
.composer-dock::before{content:'';position:absolute;inset:0 -4px -4px;z-index:-1;background:var(--processing-bg);border:.5px solid var(--processing-border);border-radius:28px;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);opacity:0;transform:translateY(6px) scale(.99);transform-origin:center bottom;transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none}
.composer-dock.has-status::before{opacity:1;transform:translateY(0) scale(1);animation:processing-shell-enter .65s linear both}
@keyframes processing-shell-enter{0.0000%{opacity:0.00000;transform:translateY(8.00000px) scale(0.960000)}1.6667%{opacity:0.00146;transform:translateY(7.85625px) scale(0.960719)}3.3333%{opacity:0.00575;transform:translateY(7.48384px) scale(0.962581)}5.0000%{opacity:0.01274;transform:translateY(6.95807px) scale(0.965210)}6.6667%{opacity:0.02230;transform:translateY(6.33890px) scale(0.968305)}8.3333%{opacity:0.03429;transform:translateY(5.67302px) scale(0.971635)}10.0000%{opacity:0.04859;transform:translateY(4.99594px) scale(0.975020)}11.6667%{opacity:0.06506;transform:translateY(4.33383px) scale(0.978331)}13.3333%{opacity:0.08358;transform:translateY(3.70518px) scale(0.981474)}15.0000%{opacity:0.10400;transform:translateY(3.12228px) scale(0.984389)}16.6667%{opacity:0.12620;transform:translateY(2.59247px) scale(0.987038)}18.3333%{opacity:0.15005;transform:translateY(2.11931px) scale(0.989403)}20.0000%{opacity:0.17541;transform:translateY(1.70342px) scale(0.991483)}21.6667%{opacity:0.20215;transform:translateY(1.34330px) scale(0.993283)}23.3333%{opacity:0.23015;transform:translateY(1.03597px) scale(0.994820)}25.0000%{opacity:0.25926;transform:translateY(0.77746px) scale(0.996113)}26.6667%{opacity:0.28936;transform:translateY(0.56322px) scale(0.997184)}28.3333%{opacity:0.32032;transform:translateY(0.38843px) scale(0.998058)}30.0000%{opacity:0.35200;transform:translateY(0.24826px) scale(0.998759)}31.6667%{opacity:0.38427;transform:translateY(0.13800px) scale(0.999310)}33.3333%{opacity:0.41701;transform:translateY(0.05323px) scale(0.999734)}35.0000%{opacity:0.45007;transform:translateY(-0.01015px) scale(1.000051)}36.6667%{opacity:0.48334;transform:translateY(-0.05582px) scale(1.000279)}38.3333%{opacity:0.51666;transform:translateY(-0.08708px) scale(1.000435)}40.0000%{opacity:0.54993;transform:translateY(-0.10681px) scale(1.000534)}41.6667%{opacity:0.58299;transform:translateY(-0.11749px) scale(1.000587)}43.3333%{opacity:0.61573;transform:translateY(-0.12124px) scale(1.000606)}45.0000%{opacity:0.64800;transform:translateY(-0.11982px) scale(1.000599)}46.6667%{opacity:0.67968;transform:translateY(-0.11471px) scale(1.000574)}48.3333%{opacity:0.71064;transform:translateY(-0.10708px) scale(1.000535)}50.0000%{opacity:0.74074;transform:translateY(-0.09789px) scale(1.000489)}51.6667%{opacity:0.76985;transform:translateY(-0.08787px) scale(1.000439)}53.3333%{opacity:0.79785;transform:translateY(-0.07760px) scale(1.000388)}55.0000%{opacity:0.82459;transform:translateY(-0.06750px) scale(1.000337)}56.6667%{opacity:0.84995;transform:translateY(-0.05786px) scale(1.000289)}58.3333%{opacity:0.87380;transform:translateY(-0.04888px) scale(1.000244)}60.0000%{opacity:0.89600;transform:translateY(-0.04070px) scale(1.000203)}61.6667%{opacity:0.91642;transform:translateY(-0.03337px) scale(1.000167)}63.3333%{opacity:0.93494;transform:translateY(-0.02690px) scale(1.000135)}65.0000%{opacity:0.95141;transform:translateY(-0.02129px) scale(1.000106)}66.6667%{opacity:0.96571;transform:translateY(-0.01649px) scale(1.000082)}68.3333%{opacity:0.97770;transform:translateY(-0.01244px) scale(1.000062)}70.0000%{opacity:0.98726;transform:translateY(-0.00908px) scale(1.000045)}71.6667%{opacity:0.99425;transform:translateY(-0.00633px) scale(1.000032)}73.3333%{opacity:0.99854;transform:translateY(-0.00411px) scale(1.000021)}75.0000%{opacity:1.00000;transform:translateY(-0.00236px) scale(1.000012)}76.6667%{opacity:1.00000;transform:translateY(-0.00101px) scale(1.000005)}78.3333%{opacity:1.00000;transform:translateY(0.00000px) scale(1.000000)}80.0000%{opacity:1.00000;transform:translateY(0.00074px) scale(0.999996)}81.6667%{opacity:1.00000;transform:translateY(0.00125px) scale(0.999994)}83.3333%{opacity:1.00000;transform:translateY(0.00158px) scale(0.999992)}85.0000%{opacity:1.00000;transform:translateY(0.00176px) scale(0.999991)}86.6667%{opacity:1.00000;transform:translateY(0.00183px) scale(0.999991)}88.3333%{opacity:1.00000;transform:translateY(0.00183px) scale(0.999991)}90.0000%{opacity:1.00000;transform:translateY(0.00176px) scale(0.999991)}91.6667%{opacity:1.00000;transform:translateY(0.00165px) scale(0.999992)}93.3333%{opacity:1.00000;transform:translateY(0.00151px) scale(0.999992)}95.0000%{opacity:1.00000;transform:translateY(0.00136px) scale(0.999993)}96.6667%{opacity:1.00000;transform:translateY(0.00120px) scale(0.999994)}98.3333%{opacity:1.00000;transform:translateY(0.00105px) scale(0.999995)}100.0000%{opacity:1.00000;transform:translateY(0.00000px) scale(1.000000)}}
.processing-info{position:relative;min-height:52px;padding:6px 20px;display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;font-weight:500;line-height:1.45;letter-spacing:-.14px;animation:processing-info-enter .45s var(--ease) both}
#request-message{min-width:0;max-height:110px;overflow:auto;overflow-wrap:anywhere}
.status-dot{background:var(--blue);width:12px;height:12px;border-radius:50%;flex:none;animation:processing-dot 2s linear infinite}
@keyframes processing-info-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes processing-dot{0%{animation-timing-function:cubic-bezier(.5,0,.5,1);scale:1}30%{animation-timing-function:cubic-bezier(.5,0,.5,1);scale:.7}60%,100%{scale:.939}}
.spinner{display:none;width:15px;height:15px;border:1.5px solid var(--border);border-top-color:var(--secondary);border-radius:50%;animation:spin .7s linear infinite}.processing .generate-button>.generate-icon{display:none}.processing .generate-button .spinner{display:block}
.generation{position:absolute;inset:0;animation:result-enter .6s var(--ease)}
.workspace-heading{position:absolute;left:24px;top:20px;height:32px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 420px);font-weight:500;border-radius:8px;text-align:left;z-index:11}
.workspace-heading:hover{color:var(--secondary)}
.workspace-heading span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-heading svg{flex:none}
.generation-center{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}
#canvas-viewport:focus,#canvas-viewport:focus-visible{outline:none}
.canvas-scene{position:absolute;left:50%;top:calc(50% - var(--dock-height,118px)/2);width:270px;height:270px;transform:translate(-50%,-50%) translate(var(--canvas-x,0px),var(--canvas-y,0px)) scale(var(--canvas-zoom,1));transform-origin:center}
.generation-item{position:absolute;left:50%;top:50%;width:270px;height:270px;display:flex;align-items:center;justify-content:center;perspective:1000px;transform:translate(-50%,-50%) translate(var(--item-x,0px),var(--item-y,0px))}
.canvas-panning,.canvas-panning *{cursor:grabbing!important;user-select:none}
.canvas-space,.canvas-space *{cursor:grab!important}
.canvas-zoom{position:absolute;bottom:20px;right:20px;z-index:14;display:flex;align-items:center;gap:8px;padding:4px 8px;border:.5px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 16px var(--shadow)}
.canvas-zoom button{height:32px;min-width:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--secondary);transition:background .18s,color .18s}
.canvas-zoom button:hover{background:var(--ghost-hover);color:var(--text)}
.canvas-zoom button:disabled{opacity:.35;cursor:default}
.canvas-zoom #zoom-reset{min-width:52px;padding:0 8px;font-size:14px;font-weight:500;font-variant-numeric:normal;font-feature-settings:normal;color:var(--text)}
.zoom-divider{height:14px;width:1px;background:var(--border)}
.result-card{display:block;position:relative;flex:none;width:100%;height:100%;max-height:none;border:2px solid var(--page);border-radius:24px;overflow:hidden;background:#27272a;box-shadow:0 12px 32px #0000001c;transform:rotateX(var(--live-rx,0deg)) rotateY(var(--live-ry,0deg));isolation:isolate;touch-action:none;cursor:grab;transition:translate .4s var(--ease),scale .4s var(--ease),box-shadow .4s var(--ease);animation:live-card-enter .7s var(--ease) backwards}
[data-theme=dark] .result-card{border-width:0}
@media(hover:hover) and (pointer:fine){
  .generation-item:hover .result-card{translate:0 -4px;scale:1.025;box-shadow:0 16px 36px #00000029}
}
.generation-item.item-dragging .result-card{translate:0 0;scale:1;cursor:grabbing;box-shadow:0 16px 36px #00000029}
.canvas-selection-box{position:absolute;z-index:100000;pointer-events:none;border:1px solid color-mix(in srgb,var(--primary) 65%,transparent);border-radius:16px;background:color-mix(in srgb,var(--primary) 7%,transparent);box-shadow:0 0 0 .5px #00000014,0 3px 14px #00000010;opacity:0;transform:scale(.985);transform-origin:top left;transition:opacity .18s ease,transform .22s var(--ease)}
.canvas-selection-box.is-visible{opacity:1;transform:scale(1)}
@media(min-width:761px){
  .generation-center{user-select:none}
  .generation-item::after{content:'';position:absolute;inset:calc(-2 * var(--selection-stroke,2px));border:var(--selection-stroke,2px) solid var(--primary);border-radius:calc(24px + 2 * var(--selection-stroke,2px));box-shadow:0 0 0 calc(var(--selection-stroke,2px) / 2) #00000014,0 var(--selection-stroke,2px) calc(3 * var(--selection-stroke,2px)) #0000001f;pointer-events:none;opacity:0;scale:1;transition:opacity .2s ease,scale .4s var(--ease)}
  .generation-item.is-selected::after{opacity:1;scale:1.025}
  :root:not([data-theme=dark]) .generation-item::after{box-shadow:none}
  .generation-item.is-selected .result-card,.generation-item.is-selected.just-dragged .result-card{translate:0 0;scale:1.025}
  .generation-item.magnet-resisting .result-card{box-shadow:0 12px 26px #00000024}
}
.result-card>img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:1;filter:blur(20px) brightness(.58);transform:translate(var(--live-x,0px),var(--live-y,0px)) scale(1.05);transition:filter 1.1s var(--ease),inset 1.1s var(--ease),width 1.1s var(--ease),height 1.1s var(--ease),transform 1.1s var(--ease)}
.live-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--live-light-x,50%) var(--live-light-y,35%),#ffffff20,transparent 65%);opacity:.7;transition:opacity .6s}
.progress-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 10px;border-radius:999px;background:#fff;color:#09090b;font-size:24px;font-weight:500;line-height:1.35;font-variant-numeric:normal;font-feature-settings:normal;z-index:2;pointer-events:none}
.generation-item.is-complete .result-card>img{inset:0;width:100%;height:100%;filter:blur(0) brightness(1);transform:none;object-fit:contain}
.generation-item.is-complete .live-sheen{opacity:0}
.live-ripple{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);border:1px solid #ffffff70;background:#ffffff0a;border-radius:50%;pointer-events:none;z-index:3;animation:live-ripple .9s var(--ease) forwards}
.generating #prompt{color:var(--muted);cursor:default}
.generating .attachment-remove{visibility:hidden}
.generating .mode-button,.generating .icon-button:disabled{opacity:.45;cursor:default}
@keyframes live-card-enter{from{opacity:0;translate:0 12px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes live-ripple{from{opacity:.65;width:12px;height:12px}to{opacity:0;width:600px;height:600px}}
#attach-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-inline:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--secondary);
  font-size:13px;
}
#attach-button:not(:disabled):hover{background:var(--hover);color:var(--text)}
#attach-button:disabled{opacity:.55}
.drop-hint{margin-inline-start:4px;color:var(--secondary);font-size:12px}
@media(any-hover:none){.drop-hint{display:none}}
.drop-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:color-mix(in srgb,var(--page) 84%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s var(--ease),visibility .2s;
}
.drop-overlay::before{
  content:'';
  position:absolute;
  inset:12px;
  border:2px dashed color-mix(in srgb,var(--blue) 75%,transparent);
  border-radius:16px;
}
.drop-overlay.visible{opacity:1;visibility:visible}
.drop-content{display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(4px);transition:transform .28s var(--ease)}
.drop-overlay.visible .drop-content{transform:translateY(0)}
.drop-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;background:rgba(37,99,235,.1);color:var(--blue)}
[data-theme=dark] .drop-symbol{color:#93c5fd;background:rgba(147,197,253,.12)}
.drop-overlay h2{font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.2;margin:0;color:var(--text)}
.drop-overlay p{font:400 14px/1.45 Inter,Arial,sans-serif;color:var(--secondary);margin:0}
.toast{position:absolute;left:50%;bottom:175px;transform:translate(-50%,10px);opacity:0;background:var(--primary);color:var(--page);border-radius:99px;padding:10px 16px;font-size:12px;pointer-events:none;transition:opacity .25s,transform .3s var(--ease);z-index:30;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}
[data-theme=dark] #theme-toggle .nav-icon>.ui-icon:not(.moon){display:none}[data-theme=dark] #theme-toggle .nav-icon>.moon{display:block}[data-theme=dark] .theme-switch:before{transform:translateX(10px)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes shimmer{to{transform:translateX(100%)}}@keyframes result-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.composer{padding:11.5px 12px}textarea{padding-top:8px;padding-bottom:6px}.pill{letter-spacing:-.14px}.card-label{text-box-trim:trim-both;text-box-edge:cap alphabetic;line-height:1.45}
.magic-hour-credit{font-size:12px;color:var(--secondary);line-height:1.4}
.magic-hour-credit strong{color:var(--text);font-weight:600}
.magic-hour-credit a{color:light-dark(var(--blue),#93c5fd);font-weight:600;text-decoration:underline;text-underline-offset:3px;pointer-events:auto;white-space:nowrap}
.magic-hour-credit a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Figma tooltip: 9px cap height plus 8px padding on each side. */
.tip:after{height:25px;padding:8px;display:flex;align-items:center;line-height:9px;letter-spacing:-.12px}
@media(max-width:760px){.resize-handle{opacity:0;transform:translate(-12px,-50%)}}

[data-theme=dark]{--tooltip-bg:#f4f4f5;--tooltip-text:#09090b}

.tip.tooltip-instant:after{transition:none!important}

/* Figma semantic colours, shared across every button family. */
:root{--ghost-hover:rgba(9,9,11,.1);--secondary-hover:#d4d4d8;--secondary-pressed:#a1a1aa;--accent-hover:#1d4ed8;--icon-secondary:#71717a;--icon-hover:#3f3f46;--icon-pressed:#09090b}
:root[data-theme=dark]{--ghost-hover:rgba(250,250,250,.1);--secondary-hover:#3f3f46;--secondary-pressed:#52525b;--accent-hover:#3b82f6;--icon-secondary:#a1a1aa;--icon-hover:#e4e4e7;--icon-pressed:#fafafa}
:root{--icon-rest-filter:none;--icon-hover-filter:saturate(1.39192632) brightness(0.55877798);--icon-pressed-filter:saturate(2.76193254) brightness(0.08045896)}
:root[data-theme=dark]{--icon-rest-filter:saturate(0.70305850) brightness(1.42235675);--icon-hover-filter:saturate(0.16599479) brightness(2.00809517);--icon-pressed-filter:saturate(0.00000000) brightness(2.19977474)}
.ui-icon{display:block;flex:none;color:var(--icon-secondary);pointer-events:none}
.nav-button:hover .ui-icon,.composer .icon-button:not(:disabled):hover .ui-icon,.mode-button:not(:disabled):hover .ui-icon,.mode-button[aria-expanded=true] .ui-icon{color:var(--icon-hover)}
.nav-button:active .ui-icon,.composer .icon-button:not(:disabled):active .ui-icon,.mode-button:not(:disabled):active .ui-icon{color:var(--icon-pressed)}

.composer .icon-button:not(:disabled):active,.mode-button:not(:disabled):active{background:var(--ghost-hover)}

.top-actions .pill{display:inline-flex;align-items:center;justify-content:center;font-weight:500;transition:background-color .18s ease;cursor:pointer}
.button-label,#mode-name,.nav-label{text-box-trim:trim-both;text-box-edge:cap alphabetic}
.top-actions .pill:not(.accent):hover{background:var(--secondary-hover)}
.top-actions .pill:not(.accent):active{background:var(--secondary-pressed)}
.top-actions .pill.accent:hover{background:var(--accent-hover)}
.top-actions .pill.accent:active{background:#1d4ed8}
.nav-label{font-weight:500}
.session-nav{display:flex;flex-direction:column;gap:16px;margin-top:-4px;animation:fade-in .3s var(--ease)}
.session-nav::before{content:'';display:block;height:1px;flex:none;margin:0 8px;background:var(--sidebar-divider)}
.session-nav .nav-label{text-overflow:ellipsis}
.session-nav .nav-button[aria-current=page]{background:var(--ghost-hover)}
.session-nav .nav-button[aria-current=page] .ui-icon{color:var(--icon-hover)}
.session-nav .nav-button[aria-current=page]:active .ui-icon{color:var(--icon-pressed)}
.session-nav .nav-button:active{background:var(--ghost-pressed)}
.folder-icon{width:20px;height:20px;background:currentColor;mask:url('assets/folder-01.svg') center/18.1667px 16.5001px no-repeat;-webkit-mask:url('assets/folder-01.svg') center/18.1667px 16.5001px no-repeat}
:root{--ghost-pressed:rgba(9,9,11,.2);--sidebar-divider:#d4d4d8}
:root[data-theme=dark]{--ghost-pressed:rgba(250,250,250,.2);--sidebar-divider:#3f3f46}

@media(prefers-reduced-motion:reduce){.card-surface{transform:none!important;translate:none!important}}

/* Reveal labels from actual panel width during both dragging and click transitions. */
.nav-button{width:100%;min-width:36px;gap:calc(12px * var(--label-opacity,0))}
.nav-label,.brand-name{min-width:0;flex:1;overflow:hidden;white-space:nowrap;opacity:var(--label-opacity,0);visibility:visible;transition:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 14px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 14px),transparent 100%)}
.brand{text-align:left;min-width:0;gap:calc(12px * var(--label-opacity,0))}.brand>img{flex:none}
.sidebar-brand{position:relative}
.sidebar-brand .brand{width:100%}
.sidebar-brand .brand-name{transform:translateY(calc(-6px * var(--label-opacity,0)))}
.brand-credit{position:absolute;inset:auto auto 0 46px;display:flex;align-items:center;gap:4px;color:var(--secondary);font-size:11px;line-height:13px;text-decoration:none;white-space:nowrap;visibility:hidden;opacity:var(--label-opacity,0)}
.sidebar.expanded .brand-credit{visibility:visible}
.brand-credit:hover,.brand-credit:focus-visible{text-decoration:underline}
[data-theme=dark] .brand-credit img{filter:invert(1)}
[data-theme=dark] img[src="assets/create-here.svg"]{content:url("assets/create-here-dark.svg")}
.sidebar.dragging .tip:after{display:none}
:root{--disabled-bg:#e4e4e7}:root[data-theme=dark]{--disabled-bg:#3f3f46}
.generate-button:disabled>.generate-icon{color:var(--icon-secondary);opacity:1}

.nav-label{text-align:left;padding-block:4px;margin-block:-4px}

@keyframes record-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Fade only the edges that actually hide more prompt text. */
#prompt{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--prompt-fade-top,0px),#000 calc(100% - var(--prompt-fade-bottom,0px)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--prompt-fade-top,0px),#000 calc(100% - var(--prompt-fade-bottom,0px)),transparent 100%)}
.composer.long-prompt .composer-controls{margin-top:10px}

/* A quiet action cue follows the card surface, including its magnetic motion. */
.card-action{position:absolute;top:14px;right:14px;z-index:4;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(244,244,245,.88);color:#09090b;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transform:translate(-3px,3px);transition:opacity .18s var(--ease),transform .24s var(--ease);pointer-events:none}
[data-theme=dark] .card-action{background:rgba(39,39,42,.88);color:#fafafa}

.composer-controls{transition:margin-top .32s var(--ease)}

/* Crossfade mode copy while the trigger follows its label's natural width. */
#mode-name,#mode-title,#mode-description{position:relative}
#mode-name,#mode-title{display:inline-block;vertical-align:top;white-space:nowrap}
#mode-name{flex:none;overflow:hidden}
.mode-copy-current{display:block}
.mode-copy-previous{position:absolute;left:0;top:0;pointer-events:none}
.mode-icon{transition:opacity .28s var(--ease);flex:none}

/* Keep descenders and the small text movement inside a full line box. */
#mode-name{text-box-trim:none;line-height:20px;overflow:visible}
.quality-slider{--filled-width:calc(50% + 16px)}
.slider-track{pointer-events:none}
.quality-slider::after{z-index:1;pointer-events:none;content:'';position:absolute;inset:0;background:radial-gradient(circle at 16px 50%,rgba(255,255,255,.32) 3.5px,transparent 4px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.32) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 16px) 50%,rgba(255,255,255,.32) 3.5px,transparent 4px);clip-path:inset(0 calc(100% - var(--filled-width)) 0 0);transition:clip-path .35s var(--ease)}
.slider-thumb{z-index:2;pointer-events:none}
.quality-slider input{z-index:3}

[data-theme=dark] .composer{background:rgba(39,39,42,.7)}

.motion-icon{overflow:visible;flex:none}
[data-icon-motion]{transform-box:fill-box;transform-origin:center}

.icon-pricing>[data-icon-motion]{transform-origin:50% 12%}

.mobile-header,.sidebar-close,.sidebar-scrim{display:none}
@media(max-width:760px){
  html{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto;background:var(--page)}
  body{display:block;height:auto;min-height:100svh;padding:0;background:var(--page);overflow:visible}
  body.mobile-menu-open{position:fixed;width:100%;overflow:hidden}
  .workspace{display:flex;flex-direction:column;width:100%;height:auto;min-height:100svh;border-radius:0;overflow:visible}
  .top-actions{display:none}
  .mobile-header{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;align-items:center;height:calc(56px + env(safe-area-inset-top,0px));padding:calc(20px + env(safe-area-inset-top,0px)) 20px 0;position:fixed;inset:0 0 auto;z-index:15;isolation:isolate}
  .mobile-header::before{content:"";position:absolute;inset:0 0 -80px;z-index:-1;pointer-events:none;background:var(--page);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 18%,rgba(0,0,0,.88) 32%,rgba(0,0,0,.65) 48%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.12) 80%,rgba(0,0,0,.025) 92%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 18%,rgba(0,0,0,.88) 32%,rgba(0,0,0,.65) 48%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.12) 80%,rgba(0,0,0,.025) 92%,transparent 100%)}
  .mobile-menu-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px}
  .mobile-menu-button:active{background:var(--ghost-hover)}
  .mobile-menu-button img{filter:var(--icon-rest-filter);pointer-events:none}
  .mobile-brand{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-size:17px;font-weight:600;letter-spacing:-.17px;line-height:1.45}
  .mobile-brand>img{flex:none}
  .mobile-signup{height:36px;padding:0 12px;font-size:14px;font-weight:500}
  .canvas{position:relative;inset:auto;flex:none;min-height:100svh;padding-top:calc(56px + env(safe-area-inset-top,0px));overflow:visible}
  .canvas::-webkit-scrollbar{display:none}

  .card-surface{translate:none;transform:none;--card-lift:0px;--card-scale:1}

  .card-label{font-size:14px}
  .card-action{display:none}
  .swap-reference{width:56px;height:56px}
  .composer-dock{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--keyboard-offset,0px));width:calc(100% - 24px);max-width:none}
  .composer-dock::after{content:'';position:absolute;z-index:-2;inset:-48px -12px calc(-12px - env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--page) 48%);pointer-events:none}
  .composer{border-radius:24px}
  /* iOS Safari zooms focused text fields smaller than 16px. */
  #prompt{font-size:16px;letter-spacing:-.16px}
  .composer-controls{margin-top:28px}
  .composer.long-prompt .composer-controls{margin-top:10px}
  .processing-info{padding-inline:16px}
  .mode-wrapper{position:relative}
  .mode-menu{left:-8px;width:min(300px,calc(100vw - 76px))}
  .tip::after{display:none}
  .sidebar{--sidebar:280px;position:fixed;inset:0 auto 0 0;width:280px;max-width:calc(100vw - 48px);height:100%;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));background:var(--app);z-index:40;transform:translateX(-100%);visibility:hidden;pointer-events:none;transition:transform .32s var(--ease),visibility .32s;box-shadow:none}
  .sidebar.expanded{--sidebar:280px;transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:12px 0 36px #0002}
  .sidebar .brand{padding-right:36px}
  .sidebar .nav-button{height:44px;min-height:44px}
  .sidebar .resize-handle{display:none}
  .sidebar-close{display:flex;align-items:center;justify-content:center;position:absolute;z-index:1;top:calc(24px + env(safe-area-inset-top,0px));right:12px;width:36px;height:36px;border-radius:50%;font-size:26px;line-height:1;color:var(--secondary)}
  .sidebar-close:active{background:var(--ghost-hover)}
  .sidebar-scrim{display:block;touch-action:none;position:fixed;inset:0;z-index:35;background:rgba(9,9,11,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s var(--ease),visibility .32s}
  .mobile-menu-open .sidebar-scrim{opacity:1;visibility:visible;pointer-events:auto}
  .toast{position:fixed}

  .workspace.generating .canvas,.workspace.has-result .canvas{padding-top:calc(56px + env(safe-area-inset-top,0px))}
  .generation{position:relative;inset:auto;transform:none;width:100%;max-width:none;margin:0;height:auto;padding:20px 0 0;min-height:calc(100svh - 56px);animation:mobile-result-enter .4s var(--ease)}
  .workspace-heading{position:relative;inset:auto;max-width:calc(100% - 40px);height:32px;font-size:13px;margin:0 20px 20px}
  .generation-center{position:relative;inset:auto;min-height:0;overflow:visible;touch-action:auto;cursor:auto}
  .canvas-scene{position:relative;inset:auto;width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;padding:0 20px calc(var(--dock-height,118px) + 88px + env(safe-area-inset-bottom,0px));transform:none!important;will-change:auto}
  .generation-item{position:relative;inset:auto;width:100%!important;height:auto!important;aspect-ratio:var(--item-aspect,1);min-width:0;display:block;perspective:none;transform:none!important;z-index:auto!important}
  .generation-column{display:flex;flex-direction:column;gap:12px;min-width:0}
  .generation-column[hidden]{display:none}
  .canvas-scene>.generation-item{grid-column:1/-1}
  .generation-item .result-card{position:absolute;inset:0;width:100%;height:100%;touch-action:auto;cursor:default;transform:none;translate:none;scale:1}
  .generation-item .result-card>img{transform:none}
  .canvas-zoom{display:none}
  .workspace.generating .composer-dock::after,.workspace.has-result .composer-dock::after,.workspace.generating .mobile-header::before,.workspace.has-result .mobile-header::before{display:block}
  .canvas-zoom{position:fixed;right:12px;bottom:calc(var(--dock-height,118px) + 76px + env(safe-area-inset-bottom,0px) + var(--keyboard-offset,0px))}
  .generation-item .result-card{width:100%;max-height:none}
  .toast{bottom:calc(var(--dock-height,118px) + 32px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 40px);white-space:normal;text-align:center;min-width:200px}
}
@keyframes mobile-result-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

@media(max-width:360px){
  .card-surface{padding:16px}

  .card-label{white-space:nowrap}
}

.generation-item.just-dragged .result-card{translate:0 0;scale:1}

.result-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.03) 38%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.03) 62%,transparent 80%);transform:translateX(-100%);animation:generation-wave 2.4s cubic-bezier(.4,0,.2,1) infinite;opacity:1;transition:opacity .45s var(--ease)}
.generation-item.is-complete .result-card::after{opacity:0;animation-play-state:paused}
@keyframes generation-wave{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.generation-actions{position:absolute;bottom:0;left:0;width:100%;height:60px;display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--actions-text);opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:center bottom;transition:opacity .2s ease,transform .45s var(--ease),visibility 0s .45s;--actions-text:#fafafa;--actions-hover:rgba(250,250,250,.1)}
[data-theme=dark] .generation-actions{--actions-text:#09090b;--actions-hover:rgba(9,9,11,.1)}
.selection-action{position:relative;height:36px;min-height:36px;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:999px;font-weight:500;font-size:14px;line-height:1.45;white-space:nowrap;transition:background .18s,opacity .18s}
.selection-action>span:last-child{text-box-trim:trim-both;text-box-edge:cap alphabetic}
.selection-action:not(:disabled):hover{background:var(--actions-hover)}
.selection-action:disabled{opacity:.4}
#viewer-enhance{width:116px}#viewer-share{width:83px}#viewer-download{width:110px}#viewer-delete{width:36px;color:#f43f5e}
.action-icon{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--actions-text);transition:color .18s ease}.action-icon svg{display:block;flex:none}

.action-icon-enhance{transform:rotate(180deg) scaleX(-1)}
.action-icon-delete{color:inherit}
:is(#action-delete,#viewer-delete){border:1px solid transparent;padding:7px;transition:background .18s ease,border-color .18s ease}
#viewer-delete:not(:disabled):hover,#viewer-delete:not(:disabled):focus-visible{border-color:#f43f5e;background:#f43f5e}
:is(#action-delete,#viewer-delete):focus-visible{outline-color:#f43f5e}
#viewer-delete:not(:disabled):hover .action-icon,#viewer-delete:not(:disabled):focus-visible .action-icon{color:#fff}
.composer-sources{display:flex;align-items:flex-start;gap:8px}
#reference-summary{min-width:0;padding:3px 4px 8px}
#reference-summary video{width:100%;height:100%;object-fit:cover;border-radius:12px}
#reference-notice{margin:0 0 6px 8px;color:var(--secondary);font-size:12px}
#selection-menu{position:relative;margin-left:auto;flex:none}
#selection-menu summary{display:grid;place-items:center;width:32px;padding:0;font-size:20px;cursor:pointer;list-style:none}
#selection-menu summary::-webkit-details-marker{display:none}
#selection-menu summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#generation-actions{position:absolute;right:0;bottom:calc(100% + 6px);z-index:2;min-width:154px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 20px var(--shadow);--actions-text:var(--text);--actions-hover:var(--hover)}
#generation-actions .selection-action{justify-content:flex-start;width:100%;border-radius:8px;text-align:left}
#generation-actions #action-delete{color:#f43f5e}
.composer-dock:has(#reference-summary:not([hidden])) #processing-info:has(#request-open:not([hidden])),
.composer-dock:has(#reference-summary:not([hidden])):has(#request-open:not([hidden]))::before{display:none}
.generation-item.is-stacked:not(.is-expanded):not(.stack-front)::after{opacity:0}
.stack-count{position:absolute;right:16px;bottom:16px;z-index:4;min-width:28px;padding:5px 9px;border-radius:999px;background:#18181bd9;backdrop-filter:blur(12px);color:#fafafa;font-size:12px;line-height:18px;font-weight:500;pointer-events:none}
.selection-share-dialog{width:min(440px,calc(100vw - 32px));padding:24px;border:.5px solid var(--border);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 20px 60px #0002}
.selection-share-dialog::backdrop{background:#09090b66;backdrop-filter:blur(8px)}
.selection-share-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.selection-share-header h2{font-size:18px;font-weight:500;margin:0}
.selection-share-header button{width:32px;height:32px;border-radius:50%;font-size:24px}
.selection-share-header button:hover{background:var(--ghost-hover)}
.selection-share-preview{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.selection-share-preview img{height:160px;width:auto;max-width:100%;object-fit:contain;border-radius:16px}
.selection-share-buttons{display:flex;gap:8px;margin-top:16px}
.selection-share-buttons button{padding:10px 16px;border-radius:999px;background:var(--hover);font-weight:500}
.selection-share-buttons button:last-child{background:var(--blue);color:white}
.toast button{margin-left:12px;text-decoration:underline;font-weight:500}
.toast.visible button{pointer-events:auto}
.toast:not(.visible) button{visibility:hidden}

.generation-item{transition:opacity .32s ease,filter .32s ease}
.stack-focus-open .generation-item:not(.stack-focus-member){opacity:.16;filter:blur(2px);pointer-events:none}
.generation-item.stack-focus-member{opacity:1;filter:none}

/* Keep the stack tilt local to the card, independent of its canvas position. */
.generation-item .result-card{rotate:var(--stack-rotation,0deg);transition:translate .4s var(--ease),scale .4s var(--ease),box-shadow .4s var(--ease),rotate .42s var(--ease)}
.generation-item::after{rotate:var(--stack-rotation,0deg)}
@media(max-width:760px){.generation-item .result-card,.generation-item::after{rotate:none}}

.stack-slot-ghost{position:absolute;left:50%;top:50%;border-radius:24px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);background:color-mix(in srgb,var(--text) 7%,transparent);pointer-events:none;opacity:1;transition:opacity .18s ease}
.stack-slot-ghost.is-draining{opacity:0;transition:opacity var(--extract-duration,1200ms) linear}
/* The disappearing slot is a countdown, including when reduced motion is enabled. */
@media(prefers-reduced-motion:reduce){.stack-slot-ghost{transition:opacity .18s linear!important}.stack-slot-ghost.is-draining{transition:opacity var(--extract-duration,1200ms) linear!important}}

/* Figma: on-image quick actions, kept outside the image button. */
.generation-item{container-type:inline-size;container-name:generation-card}
.generation-card-overlay{position:absolute;inset:0;border-radius:24px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 35.577%);opacity:0;pointer-events:none;rotate:var(--stack-rotation,0deg);transition:opacity .22s ease,translate .4s var(--ease),scale .4s var(--ease),rotate .42s var(--ease)}
.generation-card-actions{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:4px;max-width:calc(100% - 24px);translate:0 5px;transition:translate .28s var(--ease)}
.generation-card-action{position:relative;flex:none;height:32px;min-width:32px;padding:8px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;color:#fff;font-size:14px;font-weight:500;letter-spacing:-.14px;line-height:14px;pointer-events:none;transition:background .18s ease,opacity .18s ease}
.generation-card-action:disabled{opacity:.4}
.generation-card-action:not(:disabled):hover,.generation-card-action:not(:disabled):focus-visible{background:#ffffff26}
.generation-card-action:focus-visible{outline-color:#fff;outline-offset:2px}
.generation-card-action-icon{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center}
.generation-card-action-icon img{flex:none;max-width:none}
.card-enhance-icon{transform:rotate(180deg) scaleX(-1)}
.generation-item.is-complete:has(.result-card:focus-visible,.generation-card-action:focus-visible) .generation-card-overlay{opacity:1}
.generation-item.is-complete:has(.result-card:focus-visible,.generation-card-action:focus-visible) .generation-card-action{pointer-events:auto}
.generation-item.is-complete:has(.result-card:focus-visible,.generation-card-action:focus-visible) .generation-card-actions{translate:0 0}
@media(hover:hover) and (pointer:fine){
  .generation-item.is-complete:hover .generation-card-overlay{opacity:1;translate:0 -4px;scale:1.025}
  .generation-item.is-complete:hover .generation-card-action{pointer-events:auto}
  .generation-item.is-complete:hover .generation-card-actions{translate:0 0}
}
.generation-item.is-selected .generation-card-overlay,.generation-item.is-selected:hover .generation-card-overlay{scale:1.025;translate:0 0}
.generation-item.item-dragging .generation-card-overlay,.generation-item.just-dragged .generation-card-overlay{opacity:0;scale:1;translate:0 0}
.generation-item.item-dragging .generation-card-action,.generation-item.just-dragged .generation-card-action{pointer-events:none}
.generation-item.is-stacked:not(.is-expanded):not(.stack-front) .generation-card-overlay{visibility:hidden}
.card-action-label{display:none;white-space:nowrap}
@container generation-card (min-width:205px){.card-download .card-action-label{display:inline}.card-download.tip::after{display:none}}
@container generation-card (min-width:270px){[data-action=enhance] .card-action-label{display:inline}[data-action=enhance].tip::after{display:none}}
@container generation-card (min-width:330px){[data-action=share] .card-action-label{display:inline}[data-action=share].tip::after{display:none}}
@container generation-card (max-width:128px){.generation-card-actions{left:6px;bottom:6px;gap:2px;max-width:calc(100% - 12px)}.generation-card-action{min-width:28px;height:28px;padding:6px}}
@media(hover:none){.generation-item.is-complete .generation-card-overlay{opacity:1}.generation-item.is-complete .generation-card-actions{translate:0 0}.generation-item.is-complete .generation-card-action{pointer-events:auto}}

.canvas-space .generation-card-overlay,.canvas-panning .generation-card-overlay{opacity:0;pointer-events:none}
.canvas-space .generation-card-action,.canvas-panning .generation-card-action{pointer-events:none}

.image-result .generation-card-overlay{display:none;inset:auto 0;top:100%;height:56px;border-radius:0;background:none;translate:none!important;scale:1!important}
.image-result.is-complete .generation-card-overlay{display:block;opacity:1}
.image-result .generation-card-actions{position:static;justify-content:center;gap:6px;width:100%;max-width:100%;padding-top:12px;translate:none}
.image-result .generation-card-action{flex:0 1 auto;height:44px;min-width:0;padding:12px 10px;gap:5px;white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--text);pointer-events:auto}
.image-result .generation-card-action:not(:disabled):hover{background:var(--hover)}
.image-result .generation-card-action:focus-visible{outline-color:var(--blue)}
.image-result .card-action-label{display:inline}
.image-result [data-action=enhance] img{filter:brightness(0)}
[data-theme=dark] .image-result [data-action=enhance] img{filter:none}
.image-result [data-action=animate]{background:var(--blue);border-color:var(--blue);color:#fff}
.image-result [data-action=animate]:not(:disabled):hover{background:#1d4ed8}
:root:not([data-theme=dark]) .image-result .card-download img{filter:brightness(0)}
.canvas-space .image-result .generation-card-action,.canvas-panning .image-result .generation-card-action{pointer-events:none}
@media(max-width:760px){
  .generation-item.image-result.is-complete{margin-bottom:56px}
  .generation-column .image-result.is-complete{margin-bottom:160px}
  .generation-column .image-result .generation-card-overlay{height:160px}
  .generation-column .image-result .generation-card-actions{flex-direction:column;gap:8px}
  .generation-column .image-result .generation-card-action{width:100%}
}

/* Let the browser repaint vectors and glyphs at the current canvas scale. */
.generation-item.is-complete{perspective:none}
.generation-item.is-complete .result-card{transform:none}

/* Authentication: Figma desktop modal and mobile bottom sheet. */
html.auth-modal-open,html.auth-modal-open body{overflow:hidden}
.auth-dialog{width:425px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 24px);margin:auto;padding:48px 36px;border:0;border-radius:28px;background:var(--surface);color:var(--text);box-shadow:0 8px 20px var(--shadow);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;outline:none}
.auth-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:40px}
.auth-dialog::backdrop{background:#00000080;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:auth-backdrop-in .26s ease both}
.auth-dialog.is-closing::backdrop{animation:auth-backdrop-out .18s ease forwards}
.auth-heading{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;text-align:center;flex:none}
.auth-heading h2,.auth-heading p{margin:0;width:100%;line-height:1.45;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.auth-heading h2{font-size:24px;font-weight:500;letter-spacing:-.24px}
.auth-heading p{font-size:14px;font-weight:400;letter-spacing:-.14px;color:var(--secondary)}
.auth-content{display:flex;flex-direction:column;gap:28px;width:100%;flex:none}
.auth-providers,.auth-form{display:flex;flex-direction:column;gap:16px;width:100%}
.auth-provider,.auth-continue{color:inherit;text-decoration:none}
.auth-provider,.auth-continue,.auth-form input{width:100%;height:52px;flex:none;border-radius:999px;font-size:17px;letter-spacing:-.17px;line-height:1.45}
.auth-provider{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border:.5px solid var(--border);font-weight:500;transition:background .18s ease}
.auth-provider>span:last-child{white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.auth-provider:hover,.auth-close:hover{background:var(--ghost-hover,var(--hover))}
.auth-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none}
.auth-icon img{flex:none;max-width:none}
.auth-provider-icon{transform:rotate(180deg) scaleX(-1)}
.auth-divider{display:flex;align-items:center;gap:20px;padding:0 20px}
.auth-divider>span:not(.auth-or){height:1px;flex:1;background:var(--divider,#a1a1aa)}
.auth-or{font-size:17px;line-height:1.45;letter-spacing:-.17px;color:var(--secondary);text-box-trim:trim-both;text-box-edge:cap alphabetic}
.auth-form input{min-width:0;padding:16px 24px;border:.5px solid var(--border);background:transparent;color:var(--text)}
.auth-form input::placeholder{color:var(--secondary);opacity:1}
.auth-continue{display:flex;align-items:center;justify-content:center;padding:16px;background:var(--blue);color:#fff;font-weight:500;transition:background .18s ease}
.auth-continue:hover{background:#1d4ed8}
.auth-close{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:8px;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:background .18s ease}
@keyframes auth-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes auth-backdrop-out{from{opacity:1}to{opacity:0}}
@media(max-width:760px){.auth-dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:28px 28px 0 0;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 12px)}}

/* Mobile generations are independent grid items, regardless of desktop groups. */
@media(max-width:760px){
  .generation-item .stack-count{display:none}
  .generation-item,.stack-focus-open .generation-item{opacity:1;filter:none;pointer-events:auto}
  .generation-item .result-card,.generation-item .generation-card-overlay{rotate:none}
  .generation-item.is-stacked:not(.is-expanded):not(.stack-front) .generation-card-overlay{visibility:visible}
}

/* Prototype account avatar, shared across desktop and mobile navigation. */
.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border-radius:50%;background:#8b5cf6;color:#fff;font:500 14px/1 Inter,Arial,sans-serif;letter-spacing:0}
.account-avatar-button{width:32px;height:32px;transition:background-color .18s ease}
.account-avatar-button:hover{background:#7c3aed}
.mobile-signup.account-avatar-button{width:36px;height:36px;padding:0;font-size:15px}

@property --credit-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.credit-profile{position:relative;display:block;width:24px;height:24px;flex:none}
.credit-avatar{position:absolute;inset:2px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#27272a;color:#fff;font:600 12px/1.45 Inter,Arial,sans-serif;letter-spacing:-.12px}
.credit-ring{position:absolute;inset:-2px;--credit-sweep:0deg;mask-image:conic-gradient(transparent 0deg calc(360deg - var(--credit-sweep)),#000 calc(360deg - var(--credit-sweep)) 360deg);-webkit-mask-image:conic-gradient(transparent 0deg calc(360deg - var(--credit-sweep)),#000 calc(360deg - var(--credit-sweep)) 360deg);transition:--credit-sweep .65s cubic-bezier(.22,1,.36,1)}
.credit-ring>img{width:28px;height:28px;max-width:none}
@media(prefers-reduced-motion:reduce){.credit-ring{transition:none}}

@media(max-width:760px){.workspace-heading{max-width:calc(100% - 80px)}}

.sidebar .tip:after{transition-duration:.12s}

/* Expanded sidebar section title and attribution follow the label reveal. */
.session-nav{gap:calc(16px - 8px * var(--label-opacity,0))}
.session-nav::before{display:none}
.session-section-heading{position:relative;height:calc(1px + 10px * var(--label-opacity,0));flex:none;margin:0 8px;overflow:hidden}
.session-section-heading::before{content:'';position:absolute;inset:0;background:var(--sidebar-divider);opacity:calc(1 - var(--label-opacity,0))}
.session-section-heading>span{display:block;font-size:12px;font-weight:500;line-height:11px;letter-spacing:-.06px;color:var(--secondary);opacity:var(--label-opacity,0);white-space:nowrap}
.sidebar-footer{height:calc(37px * var(--label-opacity,0));margin-top:calc(-8px + 20px * var(--label-opacity,0));padding:0 8px;flex:none;display:flex;flex-direction:column;gap:12px;overflow:hidden;opacity:var(--label-opacity,0);mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent)}
.sidebar-footer p{flex:none;margin:0;font-size:12px;font-weight:500;line-height:11px;letter-spacing:-.06px;color:var(--muted);white-space:nowrap}
.sidebar-footer a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.sidebar-footer a:hover{color:var(--text)}
.sidebar-footer a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}

/* Full generation preview keeps the canvas and its camera intact underneath. */
.generation-viewer{position:absolute;inset:0;z-index:18;overflow:hidden;isolation:isolate}
.generation-viewer::before{content:'';position:absolute;inset:0;background:var(--page);opacity:0;transition:opacity .3s ease}
.generation-viewer.is-visible::before{opacity:1}
.generation-viewer.is-closing::before{transition:opacity .4s ease}
.viewer-image-shell{z-index:2;position:absolute;transform-origin:top left;border-radius:16px;overflow:visible;border:0}
.viewer-image-zoom{width:100%;height:100%;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #0002;outline:2px solid var(--page);outline-offset:-2px;transform-origin:center;will-change:transform}
[data-theme=dark] .viewer-image-zoom{outline:none}
.viewer-image-zoom>img{width:100%;height:100%;object-fit:contain;display:block}
.viewer-image-status{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:16px;background:var(--page);color:var(--secondary);text-align:center}
.viewer-back{position:absolute;left:20px;top:20px;z-index:4;height:32px;padding:8px;display:flex;align-items:center;gap:8px;border-radius:999px;font-weight:500;font-size:14px}
.viewer-back>img{width:16px;height:16px;flex:none}
.viewer-back:hover{background:var(--ghost-hover)}
[data-theme=dark] .viewer-back img{filter:brightness(1.7)}
.viewer-details{z-index:1;position:absolute;display:flex;flex-direction:column;gap:28px;overflow:auto;scrollbar-width:thin;font-size:14px;font-weight:500;line-height:1.45;letter-spacing:-.14px}
.viewer-details h2{font:inherit;color:var(--secondary);margin:0 0 16px}
.viewer-details p{margin:0;overflow-wrap:anywhere}
#viewer-next{align-self:flex-start;flex:none;min-height:40px;padding:0 14px}
#viewer-google{align-self:flex-start;flex:none;min-height:40px;background:var(--blue);color:#fff;padding:0 14px;font-size:13px;white-space:nowrap}
#viewer-google:disabled{opacity:.65}
.viewer-details h2,.viewer-details p{text-box-trim:trim-both;text-box-edge:cap alphabetic}
#viewer-assets{display:flex;gap:12px;flex-wrap:wrap;padding:2px}
#viewer-assets>img{width:80px;height:80px;object-fit:cover;border-radius:16px;border:2px solid var(--page);box-shadow:0 8px 30px #0002;rotate:1.5deg}
.viewer-actions{position:absolute;bottom:20px;left:50%;width:var(--viewer-actions-width,398px);height:60px;transform:translateX(-50%);visibility:visible;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--tooltip-bg,#27272a);box-shadow:0 8px 10px var(--shadow);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);z-index:3}
.viewer-back,.viewer-details,.viewer-actions{opacity:0;transition:opacity .22s ease,translate .32s var(--ease)}
.viewer-back{translate:0 -64px}.viewer-details{translate:-226px 0;transition:opacity .22s ease,translate .28s cubic-bezier(.22,1,.36,1)}.viewer-actions{translate:0 100px}
.is-visible .viewer-back,.is-visible .viewer-actions{opacity:1;translate:0 0;transition-delay:.08s}
.is-visible .viewer-details{opacity:1;translate:0 0;transition-delay:.18s}
.generation-viewer.is-closing .viewer-details{transition-delay:0s;transition-duration:.2s}
.viewer-source{visibility:hidden!important}
.generation-item.viewer-other{translate:var(--viewer-out-x,0px) var(--viewer-out-y,0px);opacity:0;transition:translate .42s var(--ease),opacity .3s ease,filter .32s ease}
.generation-item:not(.viewer-other){transition:translate .52s var(--ease),opacity .32s ease,filter .32s ease}
.workspace-heading,.canvas-zoom,.top-actions,.composer-dock,.mobile-header{transition:translate .36s var(--ease),opacity .25s ease}
.viewer-open .workspace-heading{translate:0 -120px;opacity:0;pointer-events:none}
.viewer-open.viewer-guest .top-actions{z-index:20}
.viewer-open .composer-dock,.viewer-open .canvas-zoom{translate:0 240px;opacity:0;pointer-events:none}
@media(max-width:760px){
  html.generation-viewer-open{overflow:hidden}
  .generation-viewer{position:fixed;inset:0;z-index:30}
  .viewer-back{top:calc(16px + env(safe-area-inset-top,0px));left:12px}
  .viewer-actions{bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:4px;padding:10px;width:max-content;max-width:calc(100% - 24px)}
  .viewer-actions>.selection-action{font-size:12px;gap:6px;padding:6px;width:auto!important;min-width:32px}
  .viewer-details{gap:20px;translate:0 -36px}
  .viewer-open.viewer-guest .mobile-header{z-index:32}
  .viewer-open.viewer-guest .viewer-back{top:76px}
}
@media(prefers-reduced-motion:reduce){.generation-viewer *,.generation-viewer::before,.generation-item.viewer-other,.workspace-heading,.canvas-zoom,.top-actions,.composer-dock,.mobile-header{transition:none!important}}

.viewer-image-shell{touch-action:none;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.viewer-image-shell.image-zoomed{cursor:grab}
.viewer-image-shell.image-panning{cursor:grabbing}
.viewer-image-zoom>img{pointer-events:none}

/* Pricing uses the existing workspace, expanding as the sidebar slides away. */
@font-face{font-family:Inter;src:url('assets/inter-bold.ttf') format('truetype');font-weight:700;font-display:swap}
.sidebar{transition:width .496s var(--ease),flex-basis .496s var(--ease),padding .496s var(--ease),transform .496s var(--ease),opacity .32s ease}
body.pricing-open .sidebar{width:0!important;flex-basis:0!important;padding-left:0;padding-right:0;transform:translateX(-100%);opacity:0;overflow:hidden;pointer-events:none}
body.pricing-open .workspace{margin-left:4px}
body.pricing-open{overflow:hidden}
body.pricing-open .top-actions,body.pricing-open .mobile-header{visibility:hidden;pointer-events:none}
.pricing-page{position:absolute;inset:0;z-index:35;background:var(--page);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:60px 40px;outline:none!important}
.pricing-layout{width:min(992px,100%);min-height:706px;margin:auto;display:flex;flex-direction:column;justify-content:space-between;gap:72px}
@media(min-width:761px) and (min-height:834px){.pricing-page{display:flex;align-items:center}}
.pricing-main{display:flex;flex-direction:column;align-items:center;gap:36px;width:100%}
.pricing-heading{display:flex;flex-direction:column;gap:24px;text-align:center;max-width:792px;width:100%}
.pricing-heading h1{font-size:28px;line-height:1.3;font-weight:700;letter-spacing:-.28px;margin:0}
.pricing-heading p{font-size:17px;line-height:1.45;font-weight:400;color:var(--secondary);letter-spacing:-.17px;margin:0}
.pricing-heading h1,.pricing-heading p,.pricing-plan-heading h2,.pricing-plan-heading p,.plan-price,.plan-old-price,.plan-price-period,.plan-billing-note,.plan-credits p,.pricing-contact p{text-box-trim:trim-both;text-box-edge:cap alphabetic}
.billing-toggle{position:relative;isolation:isolate;display:flex;gap:4px;padding:4px;border:.5px solid var(--app);border-radius:999px;background:var(--app);width:222px;flex-shrink:0}
.billing-toggle button{flex:1;min-width:0;height:32px;font-size:14px;font-weight:500;border-radius:999px;color:var(--secondary);transition:color .2s,background .2s}
.billing-toggle button[aria-pressed=true]{color:var(--text)}
.billing-toggle button:hover{color:var(--text)}
.billing-indicator{position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 12px)/2);background:var(--surface);border-radius:999px;transition:translate .32s var(--ease)}
.billing-toggle.is-yearly .billing-indicator{translate:calc(100% + 4px) 0}
.billing-offer{position:absolute;left:145px;top:32px;padding:4px;background:#ea580c;color:white;font-size:12px;line-height:10px;font-weight:600;border-radius:999px;rotate:2deg;pointer-events:none}
.pricing-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;width:100%}
.pricing-card{padding:4px;border:0;border-radius:28px;background:var(--app);min-width:0;overflow:hidden}
.pricing-card-main{display:flex;flex-direction:column;gap:36px;padding:24px;border-radius:24px;background:var(--surface-raised)}
.pricing-card-main>*{flex-shrink:0}
.pricing-plan-heading{position:relative;display:flex;flex-direction:column;gap:20px}
.pricing-plan-heading h2{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.2px;margin:0}
.pricing-plan-heading p{font-size:14px;font-weight:400;line-height:1.45;color:var(--secondary);margin:0;min-height:30px}
.plan-badges{position:absolute;right:-12px;top:-12px;display:flex;gap:8px;align-items:center}
.plan-badges span{border-radius:999px;padding:8px;font-size:14px;font-weight:500;line-height:10px;white-space:nowrap}
.plan-recommended{color:var(--blue);background:rgba(37,99,235,.1)}
.plan-discount{color:white;background:#ea580c}
.plan-price-block{display:flex;flex-direction:column;gap:16px}
.plan-price-row{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.plan-price,.plan-old-price{font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-.28px}
.plan-old-price{position:relative;color:#71717a}
.plan-old-price::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:2px;border-radius:99px;background:#71717a;rotate:-21deg;box-shadow:0 0 0 1px var(--surface)}
.plan-price-period,.plan-billing-note{font-size:14px;font-weight:400;line-height:1.45;margin:0}
.plan-choose{height:42px;width:100%;border-radius:999px;background:var(--tooltip-bg,#27272a);color:var(--tooltip-text,#fafafa);font-size:14px;font-weight:500;transition:background-color .2s ease,color .2s ease}
.plan-choose.plan-accent{background:var(--blue);color:#fff}
.plan-choose:hover{background:var(--plan-button-hover)}.plan-choose.plan-accent:hover{background:#1d4ed8}.plan-choose:active{background:var(--plan-button-pressed)}.plan-choose.plan-accent:active{background:#1e40af}
.plan-credits{display:flex;flex-direction:column;gap:16px;padding:24px}
.plan-credits p{margin:0;line-height:1.45}
.plan-credits p:first-child{font-size:17px;font-weight:600;letter-spacing:-.17px}
.plan-credits p:last-child{font-size:14px;font-weight:400;color:var(--secondary)}
.pricing-contact{display:flex;flex-direction:column;align-items:center;gap:20px}
.pricing-contact p{margin:0;font-size:14px;font-weight:500;color:var(--secondary);text-align:center}
.pricing-contact button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:8px 12px;border:.5px solid var(--border);border-radius:999px;font-size:14px;font-weight:500;color:var(--secondary);line-height:14px;transition:background .2s,color .2s}
.pricing-contact button:hover{background:var(--ghost-hover);color:var(--text)}
.pricing-close{position:absolute;top:20px;right:20px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--hover);z-index:2;transition:background .2s}
.pricing-close:hover{background:var(--ghost-hover)}.pricing-close .pricing-mobile-close{display:none}
.pricing-close span{display:flex;align-items:center;justify-content:center}
[data-theme=dark] .pricing-contact img,[data-theme=dark] .pricing-desktop-close img{filter:brightness(1.5)}
@media(min-width:761px) and (max-width:1060px){.pricing-page{padding:64px 24px 40px}.pricing-card-main,.plan-credits{padding:20px}.plan-badges span{font-size:12px;padding:6px}.plan-badges{gap:4px}.plan-price,.plan-old-price{font-size:25px}.plan-price-row{gap:6px}}
@media(max-width:760px){
  html:has(body.pricing-open){overflow:hidden}
  body.pricing-open{position:fixed;width:100%;height:100dvh;padding:0}
  body.pricing-open .workspace{margin-left:0}
  body.pricing-open .workspace::after{content:'';position:fixed;inset:0;background:#0008;z-index:34}
  body.pricing-open .sidebar{display:none}
  .pricing-page{position:fixed;inset:calc(12px + env(safe-area-inset-top,0px)) 0 0;padding:48px 20px calc(40px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;background:var(--surface);z-index:40;-webkit-overflow-scrolling:touch}
  .pricing-layout{min-height:0;gap:40px}
  .pricing-main{gap:40px}
  .pricing-heading{gap:20px}
  .pricing-heading p{max-width:290px;align-self:center}
  .pricing-cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .pricing-card-main,.plan-credits{padding:24px}
  .pricing-plan-heading p{min-height:30px}
  .pricing-close{top:12px;right:12px;width:36px;height:36px;background:transparent}
  .pricing-close .pricing-desktop-close{display:none}.pricing-close .pricing-mobile-close{display:flex}
  .plan-badges span{font-size:14px}.plan-price,.plan-old-price{font-size:28px}
  .pricing-plan-heading p br{display:none}
}
@media(max-width:360px){.plan-badges{gap:4px;right:-12px}.plan-badges span{font-size:12px;padding:6px}.plan-price-row{gap:6px}}
@media(prefers-reduced-motion:reduce){.sidebar,.billing-indicator{transition:none!important}}

body.pricing-open #toast{z-index:50;bottom:32px;max-width:calc(100% - 40px);white-space:normal;text-align:center;width:max-content}

:root{--surface-raised:#fff;--plan-button-hover:#3f3f46;--plan-button-pressed:#18181b}
:root[data-theme=dark]{--surface-raised:#27272a;--plan-button-hover:#e4e4e7;--plan-button-pressed:#d4d4d8}
.plan-price{display:inline-flex;align-items:center;font-variant-numeric:normal;font-feature-settings:normal;text-box-trim:none;line-height:1.1;white-space:nowrap;vertical-align:baseline}
.price-drum{position:relative;display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;flex:none}
.price-drum-value{display:block;white-space:pre}
.price-drum-out{position:absolute;inset:0 auto auto 0}
.plan-price-block{position:relative}

.plan-recommended{order:0}.plan-discount{order:1}
@media(min-width:761px){.pricing-close{position:fixed;top:24px;right:24px}}

/* Template library shares the home card surface and hover treatment. */
.templates-page{position:absolute;inset:0;padding:60px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:4;background:var(--page)}
.templates-heading h1{font:700 28px/1.3 Inter,Arial,sans-serif;letter-spacing:-.28px;margin:0 0 28px;text-box-trim:trim-both;text-box-edge:cap alphabetic;outline:none}
.templates-controls{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#template-search{width:min(100%,360px);min-width:0;height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font:inherit;color:inherit}
#templates-back{display:inline-flex;align-items:center;gap:6px;height:44px;margin-left:auto;flex:none}
#templates-back img{width:14px;height:14px}
[data-theme=dark] #templates-back img{filter:brightness(1.7)}
.templates-filters{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.templates-count{margin:0 0 20px;color:var(--secondary);font-size:13px}
.templates-empty{padding:28px 0;color:var(--secondary)}
.templates-filters button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;min-height:36px;border-radius:999px;font-size:14px;font-weight:500;line-height:20px;transition:background .2s,color .2s;white-space:nowrap}
.templates-filters button:hover{background:var(--ghost-hover)}
.templates-filters button[aria-pressed=true]{background:var(--tooltip-bg,#27272a);color:var(--tooltip-text,#fafafa)}
.popular-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none}
.popular-icon img{flex:none;max-width:none}
.popular-icon img{filter:brightness(0)}
[aria-pressed=true] .popular-icon img{filter:none}
[data-theme=dark] .popular-icon img{filter:none}
[data-theme=dark] [aria-pressed=true] .popular-icon img{filter:brightness(0)}
.templates-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.catalog-entry{position:relative;min-width:0}
.catalog-entry>.starter-preview{left:14px;right:auto;top:14px;z-index:3}
.catalog-card{position:relative;display:block;width:100%;aspect-ratio:1;min-width:0;border-radius:24px;text-align:left;z-index:1;touch-action:pan-y;outline-offset:6px}
.catalog-card .card-surface{inset:0;transform:translateY(calc(-1 * var(--card-lift,0px))) scale(var(--card-scale,1));translate:var(--magnet-x,0px) var(--magnet-y,0px);will-change:transform,translate}
.catalog-card:hover,.catalog-card:focus-visible{z-index:2}
.catalog-card:hover .card-surface,.catalog-card:focus-visible .card-surface{--card-lift:4px;--card-scale:1.025;box-shadow:0 16px 36px rgba(0,0,0,.16)}
.catalog-card:hover .card-action,.catalog-card:focus-visible .card-action{opacity:1;transform:translate(0,0)}
[data-theme=dark] .catalog-card .card-surface{border:0}
.catalog-card .card-label{line-height:1.45;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.catalog-card[data-category=slides] .card-surface{background:#142346}
.catalog-card[data-category=slides] .card-image{object-fit:contain}
body.templates-open .canvas,body.templates-open .composer-dock{visibility:hidden;pointer-events:none;opacity:0}
.nav-button[data-templates-trigger][aria-current=page]{background:var(--ghost-hover)}
.nav-button[data-templates-trigger][aria-current=page] .ui-icon{color:var(--icon-hover)}
.mobile-page-name{display:none}
@media(min-width:761px) and (max-width:1100px){.templates-page{padding:48px 36px}.templates-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .templates-page{position:relative;inset:auto;width:100%;padding:76px 20px 40px;overflow:visible}
  .templates-heading{display:none}
  .templates-filters{gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .templates-count{margin-bottom:14px}
  .templates-filters button{flex:none;gap:5px;padding-inline:6px;font-size:13px}
  .templates-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .catalog-card{border-radius:24px}
  body.templates-open .canvas,body.templates-open .composer-dock{display:none}
  body.templates-open .mobile-brand{display:none}
  body.templates-open .mobile-page-name{display:block;font-size:14px;font-weight:500;text-align:center;grid-column:2;grid-row:1}
  body.templates-open .mobile-menu-button{grid-column:1;grid-row:1}
  body.templates-open .mobile-signup{grid-column:3;grid-row:1}
}
@media(hover:none),(prefers-reduced-motion:reduce){.catalog-card:hover .card-surface,.catalog-card:focus-visible .card-surface{--card-lift:0px;--card-scale:1}}

/* Service states share the prototype's composer and dialog surfaces. */
.composer-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px}
.composer-tabs .pill{padding:0 7px;background:transparent;border:1px solid var(--border);font-size:12px}
.composer-tabs .pill:not(:disabled):hover{background:var(--hover)}
.composer-tabs .pill[aria-pressed=true],.composer-tabs .pill[aria-pressed=true]:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.composer-tabs .pill:disabled{opacity:.6}
.reference-summary{font:400 13px/1.5 Inter,sans-serif;border:0;border-radius:10px;padding:8px 12px;cursor:pointer;background:var(--surface);color:inherit;text-align:left;margin-bottom:8px}
.composer-footer{font:400 12px/1.4 Inter,sans-serif;text-align:center;margin:10px 0 0;color:var(--secondary)}
.composer-footer button{margin-inline-start:4px;font:inherit;color:inherit;text-decoration:underline}
#plan-dialog .auth-content{gap:16px;display:flex;flex-direction:column}
#plan-cost{font-weight:600;margin:0}
#plan-remaining{font-size:13px;line-height:1.5;margin:0;color:var(--muted)}
.result-card>video{width:100%;height:100%;object-fit:cover;border-radius:inherit}
#viewer-image-zoom>video{width:100%;height:100%;object-fit:contain}
#viewer-image-zoom>audio{width:100%;margin:auto;align-self:center}
#viewer-image-zoom:has(>audio){display:flex;align-items:center;min-height:100px}
.generation-failed .live-sheen{display:none}
.generation-failed .progress-label{max-width:90%;white-space:normal}

.writing-preview{white-space:pre-wrap;text-align:left;padding:20px;font-size:14px;line-height:1.5;height:100%;overflow:hidden;margin:0;background:var(--surface)}
.writing-result{white-space:pre-wrap;overflow:auto;width:100%;height:100%;margin:0;padding:24px;text-align:left;font:400 15px/1.6 Inter,sans-serif;user-select:text;background:var(--surface);color:var(--text)}
.writing-result :is(h1,h2,h3,p,ul,ol){margin:0 0 .8em}
.writing-result :is(ul,ol){padding-inline-start:1.4em}
.viewer-image-shell:has(.writing-result){touch-action:pan-y;cursor:auto}
.slides-cover{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;padding:22px;text-align:left;background:#142346;color:#fff;overflow-wrap:anywhere}
.slides-cover small{color:#afc5ff}.slides-cover strong{font-size:22px;line-height:1.15}
.viewer-image-shell:has(.slides-preview){touch-action:pan-y;cursor:auto}
.slides-preview{height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:10px;background:var(--page);user-select:text}
.sheet-preview{touch-action:pan-x pan-y}
.viewer-image-shell:has(.sheet-preview){touch-action:pan-x pan-y}
.sheet-preview table{border-collapse:collapse;min-width:100%;background:var(--surface);font-size:14px}
.sheet-preview th,.sheet-preview td{padding:8px 12px;border:1px solid var(--border);text-align:left;white-space:nowrap}
.sheet-preview th{background:var(--hover);position:sticky;top:0}
.slide-page{display:grid;align-content:center;gap:12px;min-height:160px;aspect-ratio:16/9;padding:clamp(10px,2vw,22px);margin-bottom:8px;border-radius:10px;background:#f6f7fb;color:#172345;overflow-wrap:anywhere}
.slide-page:first-child{background:#142346;color:#fff}
.slide-page:has(img){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.slide-page img{width:100%;aspect-ratio:1;object-fit:contain}
.slide-page small{color:#2558d8}.slide-page:first-child small{color:#afc5ff}
.slide-page h3{font-size:clamp(15px,2vw,23px);line-height:1.2;margin:4px 0 7px}
.slide-page:first-child:has(img) h3{font-size:clamp(22px,3.8vw,39px);line-height:1.05;letter-spacing:-.035em}
.slide-page p,.slide-page ul{font-size:clamp(11px,1.4vw,15px);line-height:1.35;margin:0 0 5px}
.slide-page ul{padding-left:17px}

.composer-dock:has(#composer[aria-busy=false]) .status-dot{background:var(--muted);animation:none}
.attachment-ideas{display:flex;flex-wrap:wrap;gap:6px;padding:6px 4px 0}
.attachment-ideas .pill{font-size:12px;background:var(--surface);border:1px solid var(--border)}
.attachment-ideas .pill:hover{background:var(--hover)}

/* The home composer stays in flow; creations keep their existing fixed dock. */
.workspace:not(.has-result){background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--blue) 8%,var(--page)),var(--page) 67%)}
.workspace:not(.has-result) .canvas{display:none}
.workspace:not(.has-result) .composer-dock{
  --home-top-space:clamp(88px,15svh,144px);
  position:relative;
  inset:auto;
  transform:none;
  display:flex;
  flex-direction:column;
  width:min(1080px,calc(100% - 32px));
  max-width:none;
  min-height:calc(100svh - var(--home-top-space) - 40px);
  margin:var(--home-top-space) auto 24px;
}
.workspace:not(.has-result) .composer-dock::before,.workspace:not(.has-result) .composer-dock::after{display:none}
.workspace:not(.has-result) .processing-info{background:var(--hover);border-radius:16px;margin-bottom:6px}
.workspace.has-result .home-intro,.workspace.has-result .home-starters,.workspace.has-result .home-footer,.home-create-label{display:none}
.home-intro{text-align:center;margin-bottom:24px}
.home-intro h1{font:400 clamp(46px,5.5vw,72px)/1 'Patrick Hand',cursive;letter-spacing:-.035em;margin:0 0 8px}
.home-intro p{margin:0 auto;color:var(--secondary);font-size:15px;line-height:1.5}
.workspace:not(.has-result) #prompt{min-height:clamp(64px,9svh,92px)}
.workspace:not(.has-result) .composer[aria-busy=false] .generate-button{width:auto;gap:7px;padding-inline:13px;border-radius:999px;transform:none}
.workspace:not(.has-result) .composer[aria-busy=false] .home-create-label{display:inline;color:#fff;font-size:12px;font-weight:600}
.workspace:not(.has-result) .generate-button:disabled .home-create-label{color:var(--muted)}
.home-starters{margin-top:clamp(28px,4svh,40px)}
.home-footer{margin-top:auto;padding-top:32px;text-align:center}
.starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.workspace:not(.has-result) .composer-dock>:is(.home-intro,#composer,.composer-tabs,.composer-footer,#processing-info){width:min(760px,100%);margin-inline:auto}
.starter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.starter-heading h2{margin:0;font-size:20px;line-height:1.2}
#starter-templates{min-height:36px;color:var(--blue);font-size:12px;font-weight:600}
#starter-templates:hover{text-decoration:underline}
.starter-card{position:relative;min-width:0;aspect-ratio:1.94;border-radius:16px;isolation:isolate;background:var(--hover)}
.starter-card img,.starter-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.starter-kind,.starter-preview{position:absolute;top:10px;border-radius:999px;background:#fff;color:#18181b}
.starter-kind{left:10px;padding:4px 8px;font-size:10px;font-weight:600}
.starter-preview{right:10px;width:40px;height:40px;font-size:13px}
.starter-use{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:20px 10px 10px;border-radius:0 0 16px 16px;background:linear-gradient(transparent,#0a0b10ed);color:#fff;text-align:left;font-size:14px;font-weight:600}
.starter-use span:last-child{flex:none;padding:7px 9px;border:1px solid #ffffffb0;border-radius:999px;background:#131419b8;font-size:11px;white-space:nowrap}
.starter-use:hover span:last-child{background:#131419}
@media(min-width:761px){
  body:not(.templates-open,.pricing-open) .workspace:not(.has-result){overflow:auto}
}
@media(max-width:760px){
  .workspace:not(.has-result) .composer-dock{--home-top-space:calc(84px + env(safe-area-inset-top,0px))}
  .home-intro{margin-bottom:20px}
  .home-intro h1{font-size:clamp(36px,11vw,46px)}
  .home-intro p{max-width:34ch;font-size:13px}
  .starter-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(208px,62%);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .starter-card{aspect-ratio:1.65;scroll-snap-align:start}
  .starter-use{font-size:12px;padding:17px 8px 8px}
  .starter-preview{right:7px;top:7px;width:36px;height:36px}
}
@media(max-width:360px){
  .templates-filters{gap:2px}
  .templates-filters button{gap:4px;padding-inline:5px}
  .composer-tabs{gap:3px}
  .composer-tabs .pill{padding-inline:5px}
}

#creations-view{position:absolute;top:20px;left:168px;z-index:11}
.viewer-open #creations-view,#creations-list:not([hidden])~.canvas-zoom{display:none}
#creations-list{position:absolute;inset:72px 0 auto;max-height:calc(100% - var(--dock-height,160px) - 98px);width:min(680px,calc(100% - 40px));margin-inline:auto;overflow:auto;overscroll-behavior:contain;padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--page)}
#creations-list h2{margin:0 0 5px;font-size:24px}
#creations-list p,#creation-rows small{color:var(--secondary);font-size:12px}
#creations-list p{margin:0 0 16px}
#creation-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#creation-rows li{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
#creation-rows img{width:42px;height:42px;object-fit:cover;border-radius:6px}
#creation-rows .creation-title{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere;font-weight:600}
#creation-rows .creation-title span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#creation-rows small{display:block;margin-top:4px;font-weight:400}
.creation-list-actions{display:flex;flex:none;gap:6px}
#creation-rows .pill{flex:none;white-space:nowrap;border:1px solid var(--border);font-size:12px;background:var(--surface)}
.workspace:has(#creations-list:not([hidden])) #processing-info:has(#request-open:not([hidden])){display:none}
@media(max-width:760px){
  #creations-view{top:20px;left:auto;right:20px}
  .creation-list-actions{flex-direction:column}
  #creations-list{position:relative;inset:auto;max-height:calc(100dvh - var(--dock-height,160px) - 152px);margin-bottom:calc(var(--dock-height,160px) + 32px);padding:14px}
}