@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Serif:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--navy: #0c2340;--white: #ffffff;--secondary-1: #4b9cd3;--secondary-2: #a2aaad;--navy-95: oklch(from var(--navy) calc(l*.55) c h);--navy-90: oklch(from var(--navy) calc(l*.7) c h);--navy-70: oklch(from var(--navy) calc(l*1.3) c h);--navy-50: oklch(from var(--navy) calc(l*2.1) c h);--navy-20: oklch(from var(--navy) .94 calc(c*.4) h);--navy-10: oklch(from var(--navy) .97 calc(c/4) h);--secondary-1-70: oklch(from var(--secondary-1) calc(l*.75) c h);--secondary-1-30: oklch(from var(--secondary-1) .93 calc(c/2) h);--secondary-2-70: oklch(from var(--secondary-2) calc(l*.7) c h);--secondary-2-30: oklch(from var(--secondary-2) .93 calc(c*.4) h);--success: #1e8e5a;--warning: #c77a1f;--danger: #c4342b;--focus-ring: var(--secondary-1);--bg-page: var(--white);--bg-surface: var(--white);--bg-elevated: var(--white);--bg-sunken: var(--navy-10);--bg-inverse: var(--navy);--text-primary: var(--navy);--text-secondary: var(--navy-70);--text-tertiary: var(--navy-50);--text-inverse: var(--white);--text-on-accent: var(--white);--border-default: var(--navy-20);--border-strong: var(--navy-50);--accent-1: var(--secondary-1);--accent-1-soft: var(--secondary-1-30);--accent-2: var(--secondary-2);--accent-2-soft: var(--secondary-2-30);--nav-bg: var(--navy);--nav-fg: var(--white);--nav-fg-muted: oklch(from var(--white) .72 0 h);--font-display: "Bebas Neue", system-ui, sans-serif;--font-body: "IBM Plex Serif", Georgia, serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--text-2xs: 11px;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 19px;--text-xl: 24px;--text-2xl: 32px;--text-3xl: 44px;--text-4xl: 64px;--text-5xl: 96px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--space-32: 128px;--radius-sharp: 0px;--radius-sm: 2px;--radius-md: 4px;--shadow-sm: 0 1px 2px oklch(from var(--navy) l c h / .12);--shadow-md: 0 4px 12px oklch(from var(--navy) l c h / .16);--shadow-lg: 0 12px 32px oklch(from var(--navy) l c h / .22);--shadow-focus: 0 0 0 3px oklch(from var(--secondary-1) l c h / .45);--dur-instant: 80ms;--dur-fast: .14s;--dur-base: .22s;--dur-slow: .36s;--ease-snap: cubic-bezier(.2, .8, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--cut-a: 8deg;--cut-b: 98deg;--lh-tight: 1.05;--lh-snug: 1.2;--lh-normal: 1.45;--lh-relaxed: 1.6;--ls-display: .01em;--ls-caps: .08em;--ls-normal: 0;color:var(--text-primary);font-family:var(--font-body);background:var(--bg-page)}:root[data-theme=dark]{--bg-page: var(--navy-95);--bg-surface: var(--navy);--bg-elevated: var(--navy-90);--bg-sunken: var(--navy-95);--bg-inverse: var(--white);--text-primary: var(--white);--text-secondary: oklch(from var(--white) .85 0 h);--text-tertiary: oklch(from var(--white) .65 0 h);--text-inverse: var(--navy);--text-on-accent: var(--navy);--border-default: oklch(from var(--white) .4 0 h);--border-strong: oklch(from var(--white) .6 0 h);--accent-1-soft: oklch(from var(--secondary-1) .3 c h);--accent-2-soft: oklch(from var(--secondary-2) .32 c h);--nav-bg: var(--navy-95);--nav-fg: var(--white);--nav-fg-muted: oklch(from var(--white) .7 0 h)}.fold-tr{clip-path:polygon(0 0,100% 0,100% calc(100% - (100%*tan(var(--cut-a)))),0 100%)}.fold-br{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - (100%*tan(var(--cut-a)))))}.fold-chevron-right{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}.fold-notch-left{clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}@keyframes ads-fold-out{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}*{box-sizing:border-box}body{margin:0;background:linear-gradient(98deg,transparent 0 72%,var(--navy-10) 72% 73%,transparent 73%),var(--bg-page);color:var(--text-primary);font-family:var(--font-body)}button,input,textarea,a.download-button{font:inherit}button,a.download-button{align-items:center;background:var(--navy);border:0;border-radius:var(--radius-sharp);color:var(--white);cursor:pointer;display:inline-flex;gap:8px;justify-content:center;min-height:40px;padding:0 24px 0 16px;text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:var(--ls-display);line-height:1;transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap),transform var(--dur-instant) var(--ease-snap)}button:hover,a.download-button:hover{background:var(--navy-90)}button:active,a.download-button:active{transform:scale(.98)}button:disabled{cursor:not-allowed;opacity:.55}button.secondary{background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--navy)}button.secondary:hover,a.download-button.secondary-link:hover,button.ghost:hover{background:var(--navy-10);color:var(--navy)}a.download-button.secondary-link{background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--navy)}button.ghost{background:transparent;color:var(--navy);justify-content:flex-start;min-height:32px;padding-left:0;clip-path:none}button.danger{background:var(--danger)}button.selected-tool{background:var(--accent-1);color:var(--text-on-accent)}button:focus-visible,a.download-button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{box-shadow:var(--shadow-focus);outline:none}.icon-button{aspect-ratio:1;clip-path:none;min-height:36px;padding:0;width:36px}.auth-screen{display:grid;min-height:100vh;place-items:center;padding:var(--space-8);background:linear-gradient(98deg,var(--navy) 0 48%,transparent 48%),var(--bg-page)}.auth-panel{background:var(--bg-surface);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);clip-path:polygon(0 0,100% 0,100% calc(100% - (100%*tan(var(--cut-a)))),0 100%);display:grid;gap:var(--space-4);max-width:460px;padding:var(--space-8)}.auth-message{background:var(--navy-10);border-left:3px solid var(--accent-1);color:var(--text-secondary);font-size:14px;margin:0;padding:10px 12px}.brand-row{align-items:center;display:flex;gap:10px}.brand-row h1{font-family:var(--font-display);font-size:34px;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0}.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}aside{background:var(--nav-bg);border-right:0;color:var(--nav-fg);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);position:relative}aside:after{background:var(--accent-1);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 100px));content:"";height:100%;position:absolute;right:-8px;top:0;width:8px}aside .brand-row{border-bottom:1px solid rgb(255 255 255 / 18%);margin-bottom:var(--space-2);padding-bottom:var(--space-5)}aside .brand-row strong{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight)}aside button.secondary,aside a.download-button{background:var(--white);border:0;color:var(--navy)}aside button.secondary:hover,aside a.download-button:hover{background:var(--accent-1);color:var(--navy)}aside button.ghost{color:var(--nav-fg)}aside button.ghost:hover{background:#ffffff1a;color:var(--nav-fg)}.workspace-ready{align-items:center;background:#ffffff14;border:1px solid rgb(255 255 255 / 18%);border-radius:var(--radius-sharp);color:var(--white);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);display:flex;gap:10px;padding:var(--space-4);animation:ads-fold-out var(--dur-base) var(--ease-snap)}.workspace-ready div{display:grid;gap:2px}.workspace-ready span{color:#ffffffad;font-size:12px}.account-pill{border:1px solid rgb(255 255 255 / 18%);color:#ffffffb8;font-size:12px;overflow:hidden;padding:10px 12px;text-overflow:ellipsis;white-space:nowrap}label{color:var(--text-secondary);display:grid;font-size:13px;gap:6px}input,textarea{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sharp);color:var(--text-primary);min-height:38px;padding:8px 10px;width:100%}input:focus,textarea:focus{border-color:var(--accent-1);box-shadow:var(--shadow-focus);outline:none}textarea{height:120px;resize:vertical}.content{padding:var(--space-8) var(--space-10)}header{align-items:center;display:flex;justify-content:space-between;margin-bottom:22px}header h1{font-family:var(--font-display);font-size:52px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0}header p,.shot-card p,.install-panel p,.empty-state p,.auth-panel p{color:#617069;color:var(--text-secondary)}.install-panel,.advanced-panel,.empty-state{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sharp);clip-path:polygon(0 0,100% 0,100% calc(100% - (100%*tan(var(--cut-a)))),0 100%)}.install-panel{display:grid;gap:16px;margin-bottom:18px;padding:18px}.install-panel h2,.empty-state h2{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0 0 6px}.install-panel p,.empty-state p{margin:0}.install-actions{display:flex;flex-wrap:wrap;gap:10px}details{border-top:1px solid var(--border-default);padding-top:12px}summary{color:var(--navy);cursor:pointer;font-family:var(--font-display);font-size:18px;letter-spacing:var(--ls-display)}ol{color:var(--text-secondary);margin:10px 0 0;padding-left:20px}li{margin:6px 0}code{background:var(--navy-10);border-radius:var(--radius-sm);color:var(--navy);font-family:var(--font-mono);padding:2px 5px}.text-toggle{background:transparent;color:var(--navy);clip-path:none;justify-content:flex-start;margin-bottom:18px;min-height:auto;padding:0}.advanced-panel{display:grid;gap:12px;margin-bottom:18px;padding:14px}.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.empty-state{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;grid-column:1 / -1;justify-content:center;min-height:260px;padding:30px;text-align:center}.shot-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sharp);clip-path:polygon(0 0,100% 0,100% calc(100% - (100%*tan(var(--cut-a)))),0 100%);display:grid;gap:10px;padding:var(--space-4);transition:box-shadow var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap)}.shot-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.thumb{align-items:center;aspect-ratio:16 / 10;background:var(--navy-10);border-radius:var(--radius-sharp);color:var(--text-secondary);display:flex;justify-content:center}.thumb-button{align-items:center;aspect-ratio:16 / 10;background:var(--navy-95);border-radius:var(--radius-sharp);color:var(--text-secondary);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 8px) 100%,0 100%);display:flex;justify-content:center;min-height:0;overflow:hidden;padding:0;width:100%}.thumb-button img{height:100%;object-fit:cover;width:100%}.thumb-canvas{align-items:center;background:#1e2521;display:inline-flex;height:100%;justify-content:center;position:relative;width:100%}.thumb-canvas img{display:block;height:100%;object-fit:contain;width:100%}.thumb-canvas svg{height:100%;top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;width:100%}.thumb-canvas rect,.thumb-canvas ellipse,.thumb-canvas line{vector-effect:non-scaling-stroke}.thumb-canvas .text-note{font-size:10px;padding:3px}.shot-card h2{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0}.shot-card p{font-size:13px;margin:0;overflow-wrap:anywhere}.status{border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;justify-self:start;padding:4px 8px;text-transform:capitalize}.status.draft{background:var(--accent-1-soft);color:var(--navy)}.status.locked{background:#1e8e5a24;color:var(--success)}.actions{flex-wrap:wrap;display:flex;gap:8px}.meta-row{align-items:center;color:var(--text-secondary);display:flex;font-family:var(--font-mono);font-size:12px;gap:10px}.viewer-backdrop{align-items:stretch;background:oklch(from var(--navy) l c h / .74);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:28px;position:fixed;z-index:20}.viewer{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sharp);box-shadow:var(--shadow-lg);clip-path:polygon(0 0,100% 0,100% calc(100% - (100%*tan(var(--cut-a)))),0 100%);display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto auto minmax(0,1fr);height:calc(100vh - 56px);max-width:1280px;overflow:hidden;width:100%}.viewer-header{border-bottom:1px solid var(--border-default);grid-column:1 / -1;margin:0;padding:14px 16px}.viewer-header h2{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0}.viewer-header p{color:var(--text-secondary);margin:4px 0 0;overflow-wrap:anywhere}.viewer-toolbar{align-items:center;background:var(--navy-10);border-bottom:1px solid var(--border-default);display:flex;flex-wrap:wrap;gap:8px;grid-column:1 / -1;padding:10px 16px}.tool-group,.style-controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.tool-group{border-right:1px solid var(--border-default);padding-right:8px}.tool-group button{aspect-ratio:1;min-height:36px;padding:0;width:36px}.style-controls{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sharp);color:var(--navy);min-height:40px;padding:6px 8px}.style-controls label{align-items:center;color:var(--navy);display:inline-flex;font-family:var(--font-mono);font-size:12px;gap:6px}.style-controls input[type=checkbox]{min-height:16px;width:16px}.style-controls input[type=color]{border:0;border-radius:var(--radius-sm);height:24px;min-height:24px;padding:0;width:28px}.style-controls input[type=range]{min-height:24px;width:74px}.size-label span{color:var(--text-secondary);min-width:14px}.image-stage{align-items:center;background:var(--navy-95);cursor:crosshair;display:flex;justify-content:center;min-height:420px;overflow:auto;position:relative}.image-canvas{display:inline-flex;max-height:100%;max-width:100%;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.image-stage.locked{cursor:default}.image-canvas img{display:block;max-height:100%;max-width:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.image-canvas svg{height:100%;top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;width:100%}.image-canvas rect,.image-canvas ellipse,.image-canvas line{fill:#ffd66626;stroke:#ffd666;vector-effect:non-scaling-stroke}.image-canvas .draft{fill:#3794702e;stroke:#58d19d}.text-note{background:#fff4bf;border:1px solid var(--warning);border-radius:var(--radius-sm);color:var(--navy);display:block;font-size:12px;line-height:1.25;min-height:0;overflow:hidden;padding:6px;text-align:left;width:100%}.viewer .annotation-list{background:var(--bg-surface);border-left:1px solid var(--border-default);border-right:0;display:block;min-height:0;overflow:auto;padding:16px}.annotation-list h3{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0 0 10px}.annotation-list p{color:var(--text-secondary);margin:0}.annotation-item{border:1px solid var(--border-default);border-radius:var(--radius-sharp);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 6px) 100%,0 100%);display:grid;gap:8px;margin-bottom:8px;padding:10px}.annotation-item span{color:var(--navy);font-family:var(--font-mono);font-size:13px;overflow-wrap:anywhere}@media(max-width:780px){.app-shell{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--border-default)}.content{padding:20px}.install-actions{flex-direction:column}.viewer-backdrop{padding:0}.viewer{border-radius:0;grid-template-columns:1fr;height:100vh}.viewer .annotation-list{border-left:0;border-top:1px solid var(--border-default);max-height:220px}}
