/* PetHero's approved Claude Design identity. Tokens here own the entire app. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2')}
:root{--paper:#fff7ec;--ink:#1e1433;--muted:#574c6b;--accent:#5a2bb5;--line:#d4c7df;--soft:#efe4fb;--gold:#ffc53d;--coral:#ff6f59;--mint:#7fd8be;--sky:#8ec5ff;--rose:#f4a6d7;--lilac:#b9a3f5;--white:#fff;--cinema:#0d0819;--on-dark:#e4d9f2;--muted-on-dark:#cfc2e2;--mint-soft:#e6f5eb;--focus:#5a2bb5;--sans:'DM Sans',Arial,Helvetica,sans-serif;--display:'Bricolage Grotesque',Arial,Helvetica,sans-serif;--serif:var(--display);--editorial:'Instrument Serif',Georgia,serif;--hard-shadow:5px 5px 0 var(--ink);--scroll-thumb:#827095;--scroll-track:#f1e8f6;--scroll-hover:#5a2bb5}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,h4{font-family:var(--display);color:inherit}
a,button,input,select,textarea,summary{scroll-margin-block:90px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.button{border:2px solid var(--ink);border-radius:999px;min-height:49px;padding:13px 23px;gap:12px;font-size:14px;font-weight:700;line-height:1.35;transition:transform .18s,box-shadow .18s,background .18s}
.button.primary{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.button.primary:hover:not(:disabled){background:var(--gold);box-shadow:0 6px 0 var(--ink);transform:translateY(-2px)}
.button.dark{background:var(--ink);color:var(--paper);box-shadow:none}
.button.dark:hover:not(:disabled){background:var(--accent);color:var(--white)}
.button.secondary{background:transparent;color:var(--ink);box-shadow:none}
.button.secondary:hover:not(:disabled){background:var(--soft);box-shadow:0 3px 0 var(--ink)}
.button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.button:disabled{opacity:.6;box-shadow:none;transform:none;cursor:not-allowed}
.text-button{font-family:var(--sans);color:var(--ink);font-weight:600;text-underline-offset:4px}
.text-button:hover{color:var(--accent)}
.icon-button{border:1px solid var(--line);background:var(--paper);border-radius:50%;color:var(--ink);min-width:40px;min-height:40px}
.icon-button:hover{background:var(--gold);border-color:var(--ink)}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.12em;font-weight:700;line-height:1.6}
.muted{color:var(--muted)}
.brand{font-family:var(--display);font-weight:800;letter-spacing:-.6px;font-size:24px;gap:10px}
.brand-name{display:inline-flex;flex-direction:row;align-items:baseline;gap:5px;line-height:1.2;font-size:inherit;letter-spacing:inherit}
.brand-descriptor{font:inherit;letter-spacing:inherit;color:var(--accent);margin:0;display:inline}
.brand-symbol{width:42px;height:42px;display:block;flex-shrink:0}
.count{background:var(--gold);color:var(--ink)}
/* Shared account, movie, review, song and owner surfaces use the same controls. */
dialog{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgb(13 8 25 / 65%);backdrop-filter:blur(5px)}
.dialog-top h2,.creator-heading h2,.prompt-dialog h2,.player-top h2{font:750 clamp(27px,3vw,37px)/1.1 var(--display);letter-spacing:-1px}
.creator-heading{margin-bottom:25px}.creator-heading p,.studio-info{font-size:14px;line-height:1.75;color:var(--muted)}
.dialog-shell{background:var(--paper)}
.field input,.field select,.field textarea,.account-form input{border:1.5px solid var(--ink);background:var(--white);border-radius:12px;color:var(--ink);font-size:15px;line-height:1.5}
.field>span,.account-form label{color:var(--ink);font-weight:600}
.field small,.sample-note,.form-actions>span{color:var(--muted)}
.field textarea,textarea{resize:none}
.drop-zone{border:2px dashed var(--accent);border-radius:20px;background:var(--soft);color:var(--ink)}
.drop-zone.dragging,.drop-zone:hover{border-color:var(--ink);background:var(--mint-soft)}
.upload-symbol{background:var(--gold);color:var(--ink);border-radius:15px}
.sample-button{border-color:var(--ink);color:var(--ink);background:var(--white)}
.form-error,.credit-quote-error,.account-field-error{color:#8a1f39}
.demo-notice,.creation-pause-note,.account-notice{background:var(--soft);color:var(--ink);border-color:var(--accent)}
.stepper{color:var(--muted)}.stepper>span.active{color:var(--accent)}.stepper i{background:var(--line)}
.reference-review,.saved-idea,.idea-review,.idea-pet-details,.review-panel{background:var(--soft);border-radius:18px;color:var(--ink)}
.reference-review h3{font:700 27px/1.2 var(--display)}
.order-line{border-color:var(--line)}
.success-tag,.success-icon{background:var(--mint-soft);color:var(--ink)}
.scene-filter{border-color:var(--line);background:var(--white);color:var(--ink);border-radius:999px}
.scene-filter:hover{background:var(--soft);border-color:var(--ink)}
.scene-filter[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scene-option,.scene-choice,.scene-card{background:var(--white);border-color:var(--line);border-radius:18px;color:var(--ink)}
.scene-option[aria-pressed=true],.scene-choice[aria-pressed=true],.scene-card[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}
.scene-selection{border-color:var(--ink);border-radius:20px;background:var(--soft);color:var(--ink)}
.scene-selection h3{font-family:var(--display)}
.studio-project{border:1.5px solid var(--ink);background:var(--white);border-radius:20px;overflow:hidden}
.studio-project h3{font:700 26px/1.2 var(--display);letter-spacing:-.5px}
.project-details{background:var(--white)}
.studio-summary{color:var(--muted)}
.studio-empty h3{font:700 28px/1.2 var(--display)}
.studio-empty .empty-star{color:var(--accent)}
.player-screen,.reference-review>img,.finished-poster{border-radius:18px;background-color:var(--ink)}
.player-label{background:var(--gold);color:var(--ink)}
.demo-upgrade{background:var(--gold);border:2px solid var(--ink);border-radius:20px;color:var(--ink)}
.demo-upgrade h3{font-family:var(--display)}
.toast{background:var(--ink);color:var(--paper);border:1px solid var(--gold);border-radius:13px}
.account-modes{background:var(--soft);border-color:var(--line)}
.account-modes button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.google-account-button{border:1.5px solid var(--ink);background:var(--white);color:var(--ink)}
.google-account-button:hover:not(:disabled){background:var(--soft)}
.account-local-note{background:var(--mint-soft);border-color:var(--mint);color:var(--ink)}
.account-password .text-button{color:var(--accent)}
/* Prices and credits still come only from the server catalog. */
.credit-segmented{background:var(--soft);border:1px solid var(--line);border-radius:999px}
.credit-segmented button{border-radius:999px;color:var(--ink)}
.credit-segmented button:hover{background:var(--white)}
.credit-segmented button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.launch-plan{border:2px solid var(--ink);border-radius:24px;background:var(--white);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.launch-plan.is-featured{border-color:var(--ink);background:var(--ink);color:var(--paper);box-shadow:7px 7px 0 var(--coral)}
.launch-plan h3{font:700 27px/1.2 var(--display);letter-spacing:-.5px}
.launch-plan .plan-price,.credit-pack-amount{font-family:var(--display);font-weight:800}
.launch-plan .plan-kicker{color:var(--accent)}
.launch-plan.is-featured .plan-kicker{color:var(--gold)}
.launch-plan.is-featured .credit-billed,.launch-plan.is-featured .credit-example,.launch-plan.is-featured .credit-term,.launch-plan.is-featured small,.launch-plan.is-featured .credit-plan-list{color:var(--on-dark)}
.launch-plan.is-featured .button.primary{color:var(--ink);border-color:var(--paper);background:var(--gold)}
.credit-model{border:2px solid var(--ink);border-radius:22px;background:var(--white);color:var(--ink)}
.credit-model h4{font:700 23px/1.25 var(--display)}
.credit-rate{font-family:var(--display);color:var(--ink)}
.credit-model-tag{color:var(--accent)}
.credit-soundtrack{background:var(--ink);color:var(--paper);border-radius:26px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--mint)}
.credit-soundtrack h3{font-family:var(--display)}
.credit-soundtrack .eyebrow{color:var(--gold)}
.credit-soundtrack .credit-rate{color:var(--gold)}
.credit-calculator{border:2px solid var(--ink);border-radius:24px;background:var(--white)}
.credit-ribbon{background:var(--gold);border:2px solid var(--ink);border-radius:22px}
.wallet-total{font-family:var(--display)}
.wallet-history li{border-color:var(--line)}
/* Signed-in workbench: same cinema identity, restrained product layout. */
:root{--studio-white:var(--white);--studio-mint:var(--soft);--studio-blue-soft:var(--soft);--studio-shadow:4px 4px 0 var(--ink)}
.studio-sidebar{background:var(--ink);color:var(--paper);border-right:1px solid var(--cinema);--focus:var(--gold);scrollbar-color:var(--muted-on-dark) var(--ink)}
.sidebar-brand{background:var(--white);border:2px solid var(--paper);border-radius:22px;box-shadow:4px 4px 0 var(--cinema);overflow:hidden}
.sidebar-brand img{border-radius:20px}
.sidebar-caption,.sidebar-account-copy small,.sidebar-legal{color:var(--muted-on-dark)}
.sidebar-navigation a{color:var(--on-dark);font-size:14px}
.sidebar-navigation a:hover{background:#2c1f4a;color:var(--white)}
.sidebar-navigation a[aria-current=page]{background:var(--gold);color:var(--ink)}
.sidebar-navigation a[aria-current=page]:before{background:var(--ink)}
.sidebar-credit-card{background:#2c1f4a;border:1px solid #6e5b87;border-radius:22px;box-shadow:none}
.sidebar-credit-label,.sidebar-credit-number,.sidebar-credit-note{color:var(--on-dark)}
.sidebar-credit-number strong{color:var(--gold)}
.sidebar-balance:hover .sidebar-credit-label{color:var(--gold)}
.sidebar-account .icon-button,.sidebar-close{color:var(--paper);background:transparent}
.sidebar-account .icon-button:hover,.sidebar-close:hover{background:#3a2858;color:var(--gold)}
.sidebar-avatar{background:var(--mint);color:var(--ink)}
.sidebar-legal a:hover{color:var(--gold)}
.sidebar-account-error{color:var(--gold)}
.workspace-topbar{border-color:var(--line);background:var(--paper)}
.workspace-content .workspace-page-heading h1{font-weight:800;letter-spacing:-1.4px}
.workspace-welcome{border:2px solid var(--ink);border-radius:26px;background:var(--paper);box-shadow:var(--hard-shadow)}
.workspace-welcome h2{font-weight:800}
.workspace-welcome h2 em{font:italic 400 1.2em/.8 var(--editorial);color:var(--accent)}
.workspace-welcome-art{background:var(--lilac)}
.workspace-poster{background:var(--paper);border-color:var(--paper)}
.workspace-poster figcaption{color:var(--ink)}
.workspace-chorus{background:var(--gold);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.workspace-chorus .ui-icon{color:var(--ink)}
.workspace-pause{background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.workspace-pause .ui-icon{color:var(--accent)}
.workspace-scene{border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.workspace-scene:hover{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.workspace-scene-image>span{background:var(--gold);border:1px solid var(--ink);color:var(--ink)}
.workspace-scene-copy>.ui-icon{color:var(--accent)}
.workspace-custom,.workspace-empty{background:var(--white);border:1.5px solid var(--line)}
.workspace-empty-icon{background:var(--gold);color:var(--ink)}
.workspace-recent-film{border-color:var(--ink);background:var(--white)}
.workspace-recent-film:hover{border-color:var(--accent);background:var(--soft)}
.workspace-music-note{background:var(--mint);border:2px solid var(--ink);color:var(--ink)}
.workspace-music-note p{color:var(--ink)}
.workspace-music-note>.ui-icon{color:var(--ink)}
.workspace-menu{border:1.5px solid var(--ink);background:var(--gold);border-radius:12px;color:var(--ink)}
.workspace-menu:hover{background:var(--soft)}
.studio-navigation-dialog{background:var(--ink);border:0;box-shadow:none}
.workspace-connection{border-color:var(--ink);background:var(--gold)}
.studio-navigation-dialog .studio-sidebar{background:var(--ink)}
.studio-navigation-dialog::backdrop{background:rgb(13 8 25 / 65%)}
/* Ancillary app pages inherit the same type and surfaces. */
body:not(.pethero-welcome) h1{font:800 clamp(34px,5vw,60px)/1.1 var(--display);letter-spacing:-1.5px}
@media(max-width:760px){.field input,.field select,.field textarea,.account-form input{font-size:16px}.button{font-size:13px;padding:12px 19px}.workspace-content .workspace-page-heading h1{letter-spacing:-1px}.workspace-welcome h2 em{font-size:1.13em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover,.workspace-scene:hover{transform:none}}
@media(forced-colors:active){*{scrollbar-color:auto}.button,.sidebar-credit-card,.workspace-welcome{border:2px solid CanvasText}.sidebar-navigation a[aria-current=page]{outline:2px solid Highlight}}

/* Canonical variants that also carry component geometry specificity. */
.song-dialog{border:2px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink)}
.scene-catalog-card{background:var(--white);border-color:var(--ink);border-radius:18px}
.scene-catalog-card:hover{border-color:var(--accent);background:var(--paper)}
.scene-catalog-card[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}
.credit-membership .launch-plan.is-featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.launch-plan.is-featured .plan-price span,.launch-plan.is-featured>p{color:var(--on-dark)}
.launch-plan.is-featured li::before{color:var(--gold)}
.auth-password{border:1.5px solid var(--ink);border-radius:12px;background:var(--white)}
.auth-notice{background:var(--soft);color:var(--ink)}
.footer .footer-links a{color:var(--on-dark)}
.footer .footer-links a:hover{color:var(--gold)}