/* Beginner-first hierarchy. Advanced controls remain available in native details. */
:root { --flow-orange:#ff942f; --flow-ink:#15120f; --flow-muted:#afa9a2; }
body { font-family:'Schibsted Grotesk',system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid #ffb566; outline-offset:4px; }
body .studio-homebar { background:#171614; border-color:#ffffff12; }
body .studio-homebar-nav a { color:#c2bbb2; font-size:13px; }
body .studio-homebar-nav a:hover { color:#ffad62; }
body .studio-homebar .app-install { background:transparent; border-color:#ffffff20; }
/* A welcoming first screen; the model stays centre stage once it is opened. */
body:has(#creation-card:not(.hidden)) #viewport { background:radial-gradient(ellipse at 25% 25%,#39291970,transparent 65%),#111210; }
body #creation-card { max-width:1020px; border:1px solid #ffffff17; border-radius:24px; background:#1a1917; box-shadow:0 25px 90px #0006; }
body .creation-header { padding:30px 34px 22px; border-bottom:1px solid #ffffff10; }
body .creation-title { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-.04em; }
body .creation-subtitle { font-size:15px; color:#b9b2a9; line-height:1.6; }
body .creation-roadmap { display:flex; gap:20px; margin:20px 0 0; padding:0; list-style:none; }
body .creation-roadmap li { display:flex; align-items:center; gap:7px; color:#b3aca3; font:12px system-ui; }
body .creation-roadmap li span { display:grid; place-items:center; width:22px; height:22px; border:1px solid #ffffff24; border-radius:50%; font:11px system-ui; }
body .creation-roadmap li.active { color:#ffb56c; }
body .creation-roadmap li.active span { background:#ff942f; color:#201007; border-color:transparent; }
body .creation-body { padding:26px 34px 30px; gap:32px; grid-template-columns:minmax(0,1.5fr) minmax(235px,1fr); }
body .creation-kicker { font:600 12px 'Schibsted Grotesk',system-ui; letter-spacing:.03em; text-transform:none; color:#c9c1b7; }
body .type-selector { gap:8px; margin:10px 0 22px; }
body .creation-main .type-tab { min-height:64px; padding:12px; background:#23221f; border:1px solid #ffffff13; box-shadow:none; border-radius:12px; }
body .creation-main .type-tab.active { background:#342619; border-color:#cf823b; }
body .type-tab strong { font:600 14px 'Schibsted Grotesk',system-ui; }
body .type-tab small { font-size:11px; color:#b7afa6; }
body #trellisPrompt { background:#121310; border:1px solid #514336; border-radius:14px; min-height:120px; padding:16px; font:15px/1.6 'Schibsted Grotesk',system-ui; color:#f8f2e9; box-shadow:none; }
body #trellisPrompt::placeholder { color:#8e877d; }
body .prompt-suggestions { gap:6px; margin:14px 0; }
body .prompt-suggestions button { border-radius:20px; background:#24231f; color:#c9bdb0; border:1px solid #ffffff16; padding:8px 12px; clip-path:none; font-size:12px; }
body .prompt-suggestions button:hover { border-color:#ff942f; color:#ffc489; }
body .brief-flair-note { font-size:11px; color:#aba398; margin:0 0 12px; }
body .brief-flair-actions button,body #turnaroundBtn { background:#2c2822; border:1px solid #ffffff18; color:#eedac3; border-radius:8px; clip-path:none; }
body .creation-options { border:1px solid #ffffff12; border-radius:10px; margin:16px 0; background:#ffffff03; }
body .creation-options > summary { cursor:pointer; padding:12px; color:#d1c8bc; font-size:13px; }
body .creation-options > summary span { color:#a59c91; font-size:11px; margin-left:8px; }
body .creation-options[open] { padding:0 12px 12px; }
body .creation-options[open] > summary { padding-inline:0; }
body .creation-options .creation-size-details { margin:0; }
body .generation-note { font:12px/1.5 system-ui; color:#aaa396; text-align:center; }
body .btn-generate { border-radius:11px; clip-path:none; background:linear-gradient(180deg,#ffa44c,#f58927); color:#201207; box-shadow:0 4px 0 #9d551b; min-height:50px; border:0; font-size:15px; }
body .btn-generate:hover:not(:disabled) { filter:brightness(1.08); }
body .generation-cost { color:#593515; font:11px system-ui; }
body .creation-side { border-left:1px solid #ffffff10; padding-left:30px; }
body .starter-example-card { border:1px solid #ffffff17; border-radius:16px; background:#21251f; clip-path:none; box-shadow:none; overflow:hidden; }
body .starter-example-card img { aspect-ratio:1.35; width:100%; object-fit:cover; image-rendering:pixelated; }
body .starter-example-copy { padding:16px; }
body .starter-example-copy strong { font-family:'Bricolage Grotesque',system-ui; font-size:19px; line-height:1.25; }
body .starter-example-copy small { color:#a9c8ac; font:10px system-ui; letter-spacing:.12em; }
body .starter-example-copy > span { font:12px system-ui; color:#b8beb0; }
body .btn-upload { border-radius:12px; border:1px dashed #ffffff2d; clip-path:none; background:transparent; margin-top:16px; }
body .btn-upload strong { font-size:13px; }
body .btn-upload span,body .upload-hint { font-size:11px; color:#aaa398; }
body .gallery-view-all-btn { border:0; background:transparent; color:#ffb66f; font-size:13px; }
body .creation-size-details summary,body .voxel-author-prompt-editor summary { font-size:12px; }
/* Consistent workspace furniture with one orange next action per stage. */
body[data-native-studio] { --native-panel:360px; }
body[data-native-studio] #sidebar { background:#1b1a17; border-left:1px solid #ffffff12; }
#nativeStudioPanel { padding:24px; gap:18px; }
#nativeStudioPanel h2 { font-family:'Bricolage Grotesque',system-ui; font-size:22px; font-weight:700; letter-spacing:-.025em; }
#nativeStudioPanel h3 { font-family:'Bricolage Grotesque',system-ui; font-size:23px; font-weight:600; letter-spacing:-.025em; margin:4px 0; }
body[data-native-studio] .native-steps { background:#1b1a17; border-color:#ffffff12; gap:10px; }
body[data-native-studio] .native-steps button { font-size:13px; padding:8px 20px; }
body[data-native-studio] .native-steps button[aria-current='step'] { background:#f6963420; box-shadow:inset 0 0 0 1px #f6963445; color:#ffc182; }
#nativeStudioPanel label { font-size:12px; color:#c1b9ae; line-height:1.5; }
#nativeStudioPanel label:not(.checkbox-label) { display:block; }
#nativeStudioPanel [data-entity-settings] > label { margin:14px 0; }
#nativeStudioPanel button { background:#292823; border:1px solid #ffffff1c; border-radius:9px; color:#e5dfd6; min-height:40px; font-size:12px; transition:background .15s,border-color .15s; }
#nativeStudioPanel button:hover:not(:disabled) { border-color:#c88a4c; background:#393027; }
#nativeStudioPanel .native-next { background:#ff942f; border-color:#ff942f; color:#251509; padding:13px; font-size:13px; font-weight:700; border-radius:10px; }
#nativeStudioPanel .native-next:hover:not(:disabled) { background:#ffac56; }
#nativeStudioPanel .native-studio-note { color:#b1a99e; font-size:12px; line-height:1.6; }
#nativeStudioPanel [data-saved] { font-size:11px; border-left:2px solid #91ac87; padding-left:10px; }
.native-save-actions { padding-bottom:18px; border-bottom:1px solid #ffffff12; align-items:center; }
.native-save-actions a { margin-left:auto; font-size:12px; text-decoration:none; }
.native-tools { gap:6px; }
.native-tools button { flex:1; }
#nativeStudioPanel .native-tools [aria-pressed='true'] { background:#f6963420; border-color:#eaa057; color:#ffcf9b; }
#nativeStudioPanel [data-paint-options] { padding:15px; border:1px solid #ffffff12; background:#ffffff03; border-radius:12px; }
.native-field-title { font-size:11px; color:#b9aea0; margin-bottom:12px!important; }
#nativeStudioPanel .native-palette button { width:32px; height:32px; min-height:32px; border:2px solid #ffffff36; border-radius:8px; }
#nativeStudioPanel details { border-top:1px solid #ffffff12; margin:0; }
#nativeStudioPanel summary { cursor:pointer; min-height:44px; padding:12px 0; font-size:12px; line-height:1.5; color:#d8cabb; }
#nativeStudioPanel details[open] > summary { color:#ffbd7a; }
#nativeStudioPanel details:not([open]) > :not(summary) { display:none; }
#nativeStudioPanel .native-ai { display:block; border:1px solid #ffffff15; padding:0 13px; border-radius:12px; background:#30271c40; }
#nativeStudioPanel .native-ai[open] { padding-bottom:12px; }
#nativeStudioPanel .native-ai textarea { margin:8px 0; padding:12px; }
#nativeStudioPanel .native-ai button { margin:4px 0; }
#nativeStudioPanel .native-ai p { margin-top:8px; }
#nativeStudioPanel .native-ai > summary::marker { color:#ffac58; }
#nativeStudioPanel .native-platform { font:11px system-ui; color:#b8d0a8; background:#95b77513; padding:7px 10px; border-radius:6px; width:fit-content; }
#nativeStudioPanel [data-page='2'] > [data-command] { padding:8px; font-size:10px; color:#afa594; background:#1113; border-radius:6px; }
#nativeStudioPanel .native-file-buttons { display:grid; grid-template-columns:1fr 1fr; }
#nativeStudioPanel .native-playback { padding:12px; border-radius:12px; background:#ffffff04; border:1px solid #ffffff0e; }
#nativeStudioPanel .native-review-views { margin:0; }
#nativeStudioPanel select,#nativeStudioPanel input[type='number'] { background:#131410; border-color:#464137; color:#f2e9dd; }
#nativeStudioPanel .native-custom-colour { margin-top:12px; }
body[data-native-mode='animate'] #nativeStudioPanel [data-saved] { position:static; }
body[data-native-mode='animate'] .native-save-actions { position:absolute; top:12px; right:24px; border:0; padding:0; }
body[data-native-mode='animate'] .native-playback { margin-right:320px; padding:0!important; border:0!important; background:none!important; }
body[data-native-mode='animate'] .native-key-settings .native-ai { display:block; margin-top:0; }
/* Collection browsing: two scopes, search and a small row of filters. */
body .gallery-head { padding:46px 0 24px; }
body .gallery-head h1 { font-size:clamp(32px,4vw,48px); margin:0; }
body .gallery-head .sub { color:#b6ada0; font-size:15px; }
body .gallery-scopes { border-bottom:1px solid #ffffff16; padding:0; gap:24px; margin:0 0 22px; }
body .gallery-scopes .filter { background:transparent; box-shadow:none; border:0; border-radius:0; padding:12px 0; color:#b8afa5; }
body .gallery-scopes .filter.active { color:#ffb366; border-bottom:2px solid #ff942f; }
.gallery-toolbar { display:flex; align-items:end; gap:22px; justify-content:space-between; flex-wrap:wrap; }
.gallery-search { flex:1; min-width:220px; color:#afa599; font-size:11px; }
.gallery-search input { display:block; width:100%; margin-top:7px; background:#1d1e19; border:1px solid #ffffff20; color:#f0e7dc; border-radius:10px; padding:13px 15px; font-size:14px; min-height:44px; }
body .gallery-toolbar .filters { padding:0; margin:0; gap:5px; }
body .gallery-toolbar .filter { font:12px system-ui; border:1px solid #ffffff16; box-shadow:none; background:#24231e; }
body .gallery-toolbar .filter.active { background:#ff942f; color:#251507; }
.gallery-results { margin-top:16px; color:#a79c8e; font-size:12px; }
body .gallery-head ~ main { padding-top:18px; }
body .card { border-color:#ffffff16; border-radius:16px; background:#1d1d18; }
body .card:hover { transform:translateY(-3px); border-color:#b58c5e; }
body .card .prompt { font-size:17px; letter-spacing:-.02em; }
body .card .btn-ember { background:#333025; border:1px solid #7b613d; color:#ffca8a; }
body .card:hover .btn-ember { background:#f99a3b; color:#251507; border-color:#f99a3b; }
body .state { border-radius:16px; clip-path:none; padding:32px; gap:14px; align-content:center; }
body .hero-scene { border:1px solid #ffffff13; border-radius:26px; background:radial-gradient(ellipse at 50% 40%,#394334,#1c231d 65%); overflow:hidden; }
body .hero-model-link { border-radius:24px; }
body .steps { grid-template-columns:repeat(4,1fr); }
body .step-card { padding:26px 22px; background:#1d1c18; border-color:#ffffff14; }
body .step-num { color:#ffa955; font:11px system-ui; letter-spacing:.08em; }
body .step-card h3 { font-size:23px; line-height:1.15; margin:15px 0 12px; }
body .step-card p { font-size:14px; line-height:1.7; color:#b7ada0; }
body .hero-actions .btn-ember { background:#ff942f; color:#231405; }
@media(max-width:1000px) { body .steps { grid-template-columns:repeat(2,1fr); } }
@media(max-width:800px) {
 body .creation-body { grid-template-columns:1fr; padding:22px; }
 body .creation-header { padding:24px 22px 20px; }
 body .creation-side { padding:20px 0 0; border-left:0; border-top:1px solid #ffffff14; }
 body .creation-side .starter-example-card { display:grid; grid-template-columns:100px 1fr; }
 body .starter-example-card img { height:100%; aspect-ratio:1; }
 body .creation-roadmap { gap:12px; flex-wrap:wrap; }
 body .creation-roadmap li { font-size:11px; }
 #nativeStudioPanel { padding:18px; }
 body[data-native-mode='animate'] .native-save-actions { position:static; }
 body[data-native-mode='animate'] .native-playback { margin-right:0; }
 .gallery-toolbar { gap:14px; }
 .gallery-search { flex-basis:100%; }
 #nativeStudioPanel .native-palette button { width:36px; height:36px; min-height:36px; }
 body .studio-account-link { display:none; }
}
@media(max-width:480px) {
 body .creation-roadmap { gap:10px; }
 body .creation-roadmap li span { width:18px; height:18px; }
 body .creation-roadmap li { gap:4px; }
 body .creation-main .type-tab { padding:10px 6px; }
 body .type-tab small { font-size:10px; }
 body .steps { grid-template-columns:1fr; }
 body .hero-actions { display:grid; }
 body .hero-actions .btn { justify-content:center; }
 body .gallery-head { padding-top:28px; }
 body .gallery-toolbar .filter { padding:9px 13px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
/* Keep Create within reach on a standard laptop. */
body:has(#creation-card:not(.hidden)) #viewport > canvas { visibility:hidden; }
body:has(#creation-card:not(.hidden)) #status { display:none; }
body .creation-header { padding-top:22px; padding-bottom:18px; }
body .creation-roadmap { margin-top:14px; }
body .creation-body { padding-top:20px; padding-bottom:24px; }
body .type-selector { margin-bottom:14px; }
body .creation-main .type-tab.active,body .creation-main .type-tab.active .type-glyph { color:#ffc689; }
body .creation-main .type-tab.active small { color:#d1b493; }
body #trellisPrompt { min-height:96px; }
body .brief-flair-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; }
body .brief-flair-actions button { width:auto; flex:none; padding:8px 13px; min-height:34px; }
body .brief-flair-actions .reference-image-row { margin:0; display:flex; width:auto; }
body .brief-flair-note { margin:0; }
body .prompt-section { gap:7px; }
body .prompt-suggestions { margin:5px 0; }
body .creation-options { margin:5px 0 9px; }
body .creation-alternatives { padding-left:26px; border-left:1px solid #ffffff10; }
body .btn-upload span { font:11px/1.6 system-ui; letter-spacing:0; text-transform:none; }
@media(max-width:800px) {
 body .creation-alternatives { padding:18px 0 0; border-left:0; border-top:1px solid #ffffff12; }
 body .creation-alternatives .starter-example-card { display:grid; grid-template-columns:100px 1fr; }
 body .starter-example-card img { height:100%; }
 body #trellisPrompt { font-size:16px; }
}
@media(min-width:801px) and (max-height:850px) {
 body .creation-header { padding:18px 30px 14px; }
 body .creation-title { font-size:32px; }
 body .creation-roadmap { margin-top:10px; }
 body .creation-body { padding:16px 30px 18px; }
 body .creation-main .type-tab { min-height:52px; padding:9px; }
 body .type-selector { margin-top:6px; margin-bottom:10px; }
 body #trellisPrompt { min-height:84px; padding:12px; }
 body .prompt-section { gap:5px; }
 body .creation-options > summary { padding:10px 12px; }
 body .prompt-suggestions button { padding:6px 10px; }
 body .generation-note { margin:4px 0 0; }
}
#nativeStudioPanel { gap:12px; padding:20px; }
.native-editor { gap:10px; }
#nativeStudioPanel [data-page] { gap:8px; }
.native-save-actions { padding-bottom:12px; }
#nativeStudioPanel summary { min-height:38px; padding:10px 0; }
body[data-native-studio]:not([data-native-mode='animate']) .native-playback { display:block; padding:0!important; border:0!important; background:none!important; }
body[data-native-studio]:not([data-native-mode='animate']) .native-playback > label,
body[data-native-studio]:not([data-native-mode='animate']) .native-playback > input { display:none; }
body[data-native-studio]:not([data-native-mode='animate']) .native-playback > button { font-size:11px; min-height:32px; padding:5px 12px; }
.native-save-actions [data-private-save] { min-width:140px; white-space:nowrap; }
body[data-native-mode='animate'] .native-save-actions { width:275px; }
#nativeStudioPanel .native-save-actions a { white-space:nowrap; }
@media(max-width:800px) { body[data-native-mode='animate'] .native-save-actions { width:auto; } }
/* Accounts use the same welcoming visual language and keep a single submit action. */
body .auth-card { background:#1d1c18; clip-path:none; border:1px solid #ffffff20; border-radius:22px; box-shadow:0 22px 75px #0004; }
body .auth-card > .pixel-label { color:#ecaa69; font:11px system-ui; letter-spacing:.03em; }
body .auth-card h1 { font-size:32px; letter-spacing:-.04em; line-height:1.15; }
body .auth-card .field label { font:13px system-ui; letter-spacing:0; text-transform:none; color:#d1c8bd; }
body .auth-card .field small { font-size:11px; color:#9f9589; }
body .auth-card .field input { border:1px solid #494339; border-radius:9px; background:#131410; box-shadow:none; font-size:16px; }
body .auth-card .field input:focus { outline:2px solid #efa252; outline-offset:2px; }
body .auth-card .btn { clip-path:none; border-radius:10px; }
body .auth-card .btn-ember { background:#ff942f; color:#241305; }
body .auth-card .auth-sub,body .auth-alt { line-height:1.6; color:#b6ab9d; }
@media(max-width:480px) { body .auth-wrap { padding:24px 16px; } body .auth-card { padding:28px 22px; } }
/* The clip picker belongs to Animate; Model only needs a preview pause control. */
body[data-native-studio]:not([data-native-mode='animate']) #nativeStudioPanel .native-playback > label,
body[data-native-studio]:not([data-native-mode='animate']) #nativeStudioPanel .native-playback > input { display:none; }
/* Size is a first decision, directly after type and before the written idea. */
body .creation-size-guide { gap:7px; margin:0 0 18px; padding:12px; box-shadow:none; clip-path:none; background:#ffffff03; border:1px solid #ffffff18; border-radius:12px; }
body .creation-size-guide .voxel-envelope-heading { margin:0; }
body .creation-size-guide .creation-kicker { font-size:12px; color:#c7bbae; }
body .creation-size-summary { display:block; margin-top:5px; font:500 12px/1.5 'Schibsted Grotesk',system-ui; color:#ffbd7c; }
body .creation-size-guide #creationSizeHint,body .creation-size-guide #creationEnvelopeDensity { display:none; }
body .creation-size-guide .voxel-envelope-presets { display:flex; flex-wrap:wrap; gap:5px; margin:0; }
body .creation-size-guide .voxel-envelope-preset { min-height:32px; padding:6px 9px; font:11px system-ui; border-radius:7px; background:#29251f; border:1px solid #ffffff1c; box-shadow:none; color:#cfc2b1; clip-path:none; }
body .creation-size-guide .voxel-envelope-preset.active { background:#624322; border-color:#efac68; color:#fff0d9; }
body .creation-size-guide .creation-size-custom { margin:0; }
body .creation-size-custom > summary { padding:4px 0; font-size:11px; color:#bfb4a8; cursor:pointer; }
body .creation-size-guide .voxel-envelope-custom-heading { margin-top:10px; }
body .creation-size-guide [hidden] { display:none!important; }
body .creation-size-guide .voxel-envelope-inputs { margin-top:8px; }
body .creation-main > .item-style-choice { margin:0 0 14px; }
body .creation-main > .item-style-choice[hidden] { display:none; }
@media(max-width:480px) {
 body .creation-size-guide .voxel-envelope-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 body .creation-size-guide .voxel-envelope-preset { min-height:38px; padding:8px; }
}