/* Dark workshop presentation. Dark mode is a product requirement. Vault: App shell and Minecraft handoff.md.
   Loaded after the legacy editor styles; no model, export or persistence changes. */
:root {
 color-scheme:dark;
 --canvas:#111314; --panel:#1b1d1e; --copy:#eeeae3; --muted:#b1aea8;
 --line:#373a3b; --highlight:#ffad66; --selected:#362a21;
 --success-surface:#223229; --warm-surface:#362b1e; --input:#141617; --raised:#252829;
 --stage:#171e1b; --primary:#ff9c45; --on-primary:#251507;
 --bg:var(--canvas); --surface:var(--panel); --surface2:var(--raised);
 --text:var(--copy); --text-primary:var(--copy); --text-muted:var(--muted); --text-dim:#989b98;
 --border:var(--line); --border-hover:#70736d; --accent:var(--highlight); --accent-hover:#ffc18a;
 --coal:var(--panel); --slate:var(--raised); --slate-2:#303334; --seam:#ffffff12; --seam-strong:#ffffff28;
 --parchment:var(--copy); --bone:#c9c4bb; --mute:var(--muted); --ember:var(--primary); --ember-hot:var(--highlight);
 --emerald:#99c59d; --diamond:#91bdca; --gold:#e2bb78; --flow-muted:var(--muted);
}
body { background:var(--canvas); color:var(--copy); }
body::before { display:none; }
::selection { background:#744923; color:var(--copy); }
:where(button,a,input,select,textarea,summary):focus-visible,
#nativeStudioPanel :where(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--highlight); outline-offset:3px; }
input,select,textarea { accent-color:var(--highlight); }
button { touch-action:manipulation; }
button:disabled { cursor:default; }
body .studio-homebar,body .nav { background:var(--canvas); border-color:var(--line); backdrop-filter:none; box-shadow:none; }
body .brand,body .studio-brand { color:var(--copy); }
body .brand-forge,body .studio-brand-tool { color:var(--highlight); }
body .nav-links a,body .studio-homebar-nav a { color:var(--muted); }
body .nav-links a:hover,body .studio-homebar-nav a:hover { color:var(--highlight); }
body .app-install,body .studio-homebar .app-install { background:var(--panel); color:var(--copy); border-color:var(--line); }
body .btn,body .filter { border-radius:12px; clip-path:none; }
body .btn-ember,body .hero-actions .btn-ember { background:var(--primary); border-color:var(--primary); color:var(--on-primary); box-shadow:none; }
body .btn-ember:hover { background:#ffb56f; color:var(--on-primary); }
body .btn-ghost { border:1px solid var(--line); background:var(--panel); color:var(--copy); }
/* Start with an idea, or a real example to play with. */
body:has(#creation-card:not(.hidden)) #viewport { background:radial-gradient(ellipse at 15% 20%,#35261e66,transparent 55%),radial-gradient(ellipse at 90% 80%,#21312944,transparent 55%),var(--canvas); }
body #creation-card { max-width:1060px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:none; padding:0; }
body .creation-header { padding:26px 32px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
body .creation-eyebrow { display:block; color:var(--highlight); font:600 11px/1.5 'Schibsted Grotesk',system-ui; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px; }
body .creation-title { font-size:clamp(29px,3.3vw,42px); color:var(--copy); letter-spacing:-.045em; line-height:1.12; }
body .creation-subtitle { color:var(--muted); font-size:14px; }
body .creation-roadmap { gap:22px; margin-top:14px; }
body .creation-roadmap li { color:var(--muted); }
body .creation-roadmap li span { background:var(--raised); border:0; color:#a3a39d; }
body .creation-roadmap li.active { color:var(--highlight); }
body .creation-roadmap li.active span { background:var(--highlight); color:var(--on-primary); }
body .creation-body { padding:24px 32px 28px; gap:32px; grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); }
body .creation-kicker { color:var(--muted); font-weight:650; }
body .creation-main .type-tab { min-height:72px; border-radius:14px; background:var(--raised); border:1px solid var(--line); color:var(--copy); gap:10px; }
body .creation-main .type-tab.active { color:var(--highlight); border:2px solid var(--line); padding:11px; background:var(--selected); }
body .creation-main .type-tab:hover { background:var(--selected); }
body .creation-main .type-tab.active .type-glyph { color:var(--highlight); }
body .type-tab small,body .creation-main .type-tab.active small { color:var(--muted); font-size:10px; }
body .type-tab strong { color:inherit; }
body .type-glyph { color:var(--muted); }
body .creation-size-guide { background:#202222; border:1px solid var(--line); border-radius:12px; padding:10px 12px; gap:6px; margin-bottom:16px; }
body .creation-size-guide .creation-kicker { color:var(--muted); }
body .creation-size-summary { color:var(--muted); font-size:11px; }
body .creation-size-guide .voxel-envelope-preset { background:var(--input); border:1px solid var(--line); color:var(--muted); min-height:32px; }
body .creation-size-guide .voxel-envelope-preset.active { background:var(--selected); border-color:var(--line); color:var(--muted); }
body .creation-size-custom > summary { color:var(--muted); }
body .creation-size-guide input,body .item-style-option { background:var(--input); border-color:var(--line); color:var(--copy); }
body .item-style-option:has(input:checked) { background:var(--selected); border-color:var(--line); }
body .item-style-option span { color:var(--muted); }
body #trellisPrompt { border:1.5px solid var(--line); background:var(--input); color:var(--copy); min-height:96px; padding:14px; box-shadow:none; }
body #trellisPrompt::placeholder { color:#a3a39d; }
body .prompt-suggestions button { border:1px solid var(--line); background:var(--raised); color:var(--muted); min-height:34px; }
body .prompt-suggestions button:hover { background:#33322c; border-color:var(--line); color:var(--muted); }
body .brief-flair-actions button,body #turnaroundBtn { background:var(--panel); border-color:var(--line); color:var(--muted); }
body .brief-flair-note,body .generation-note,body .helper-text,body .generation-auth-prompt { color:var(--muted); }
body .voxel-author-prompt-editor { border-color:var(--line); background:#202223; }
body .voxel-author-prompt-editor summary { color:var(--muted); }
body .voxel-author-prompt-editor textarea { background:var(--input); border-color:var(--line); color:var(--copy); }
body .btn-generate { background:var(--primary); border:1px solid var(--line); color:var(--on-primary); box-shadow:none; border-radius:13px; min-height:50px; }
body .btn-generate:hover:not(:disabled) { background:#ffb56f; filter:none; }
body .generation-cost { color:var(--on-primary); }
body .creation-alternatives { border-left:1px solid var(--line); padding-left:28px; }
body .creation-alternatives .creation-section-head { display:block; margin-bottom:15px; }
body .creation-alternatives .creation-kicker { display:block; font:600 22px/1.2 'Bricolage Grotesque',system-ui; letter-spacing:-.02em; color:var(--copy); }
body .creation-alternatives .creation-step-note { display:block; color:var(--muted); font:12px/1.5 'Schibsted Grotesk',system-ui; margin-top:6px; }
body .starter-example-card { border:1px solid var(--line); border-radius:18px; background:var(--selected); color:var(--copy); text-align:left; transition:transform .18s,box-shadow .18s; }
body .starter-example-card:hover:not(:disabled) { transform:translateY(-2px); box-shadow:none; border-color:var(--line); }
body .starter-example-card img { height:220px; width:100%; max-height:none; object-fit:contain; background:#182422; border-bottom:1px solid var(--line); }
body .starter-example-copy { padding:17px; gap:9px; }
body .starter-example-copy small { color:var(--muted); font-size:10px; font-weight:600; }
body .starter-example-copy strong { color:var(--muted); font-size:22px; }
body .starter-example-copy > span { color:var(--muted); }
body .btn-upload { border:1px dashed var(--line); color:var(--muted); background:transparent; border-radius:12px; margin-top:18px; }
body .btn-upload span,body .upload-hint { color:var(--muted); }
body .gallery-view-all-btn { color:var(--highlight); }
body #creation-card.is-generating { background:var(--panel); }
body .creation-progress-stage,body .progress-header,body .progress-reassurance { color:var(--muted); }
body .progress-bar-track { background:#38352e; }
body .progress-bar-fill { background:var(--highlight); }
/* A calm stage and a small, friendly tool shelf. */
body[data-native-studio] { --native-panel:390px; --accent:var(--highlight); }
body[data-native-studio] #sidebar { background:var(--panel); border-color:var(--line); }
body[data-native-studio] .native-steps { background:var(--canvas); border-color:var(--line); gap:12px; }
body[data-native-studio] .native-steps button { background:transparent; color:var(--muted); min-width:112px; border-radius:12px; font-weight:600; }
body[data-native-studio] .native-steps button[aria-current='step'] { background:var(--selected); color:var(--muted); box-shadow:none; }
body[data-native-studio] .native-steps button:disabled { opacity:.45; }
body[data-native-studio] #fitViewportBtn { background:var(--panel); color:var(--muted); border:1px solid var(--line); box-shadow:none; border-radius:20px; }
#nativeStudioPanel { padding:22px; color:var(--copy); gap:12px; }
#nativeStudioPanel > h2 { display:none; }
#nativeStudioPanel .native-editor { gap:10px; }
#nativeStudioPanel label { color:var(--muted); }
#nativeStudioPanel .native-title-field { color:#a3a39d; font-size:10px; letter-spacing:.04em; }
#nativeStudioPanel [data-model-size] { margin-top:-3px; font-size:11px; }
#nativeStudioPanel h3 { font-size:27px; color:var(--copy); }
#nativeStudioPanel .native-studio-note { color:var(--muted); font-size:12px; }
#nativeStudioPanel [data-saved] { border-color:var(--line); color:#a8c5ab; font-size:11px; }
#nativeStudioPanel .native-save-actions { padding:4px 0 16px; border-color:var(--line); }
#nativeStudioPanel a { color:var(--highlight); }
#nativeStudioPanel button { color:var(--muted); background:var(--raised); border:1px solid var(--line); border-radius:10px; font-weight:500; min-height:40px; }
#nativeStudioPanel button:hover:not(:disabled) { color:var(--muted); background:#35312d; border-color:var(--line); }
#nativeStudioPanel button[aria-pressed='true'] { background:var(--selected); border-color:var(--line); color:var(--muted); }
#nativeStudioPanel .native-next { background:var(--highlight); color:var(--on-primary); border-color:var(--highlight); border-radius:12px; box-shadow:none; padding:14px; }
#nativeStudioPanel .native-next:hover:not(:disabled) { background:#ffb56f; color:var(--on-primary); }
#nativeStudioPanel :is(input:not([type='checkbox']):not([type='range']):not([type='color']),select,textarea) { background:var(--input); color:var(--copy); border:1px solid var(--line); border-radius:9px; font:13px/1.5 'Schibsted Grotesk',system-ui; padding:9px; width:100%; min-width:0; }
#nativeStudioPanel input[type='range'] { accent-color:var(--highlight); }
#nativeStudioPanel [data-page] { gap:12px; padding:6px 0 12px; }
.workshop-kicker { color:#dfba84; font-size:10px; font-weight:650; letter-spacing:.045em; }
#nativeStudioPanel .native-tools { gap:8px; }
#nativeStudioPanel .native-tools button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:82px; font-size:11px; border-radius:13px; }
#nativeStudioPanel .native-tools svg { width:25px; height:25px; }
#nativeStudioPanel .native-tools [aria-pressed='true'] { background:var(--selected); border-color:var(--line); color:var(--muted); box-shadow:none; }
#nativeStudioPanel [data-paint-options] { background:#232627; border-color:var(--line); }
#nativeStudioPanel .native-palette button { border:2px solid var(--line); outline:1px solid var(--line); }
#nativeStudioPanel .native-palette button[aria-pressed='true'] { outline:3px solid var(--highlight); }
#nativeStudioPanel details { border-color:var(--line); }
#nativeStudioPanel summary { color:var(--muted); min-height:44px; font-size:12px; }
#nativeStudioPanel details[open] > summary { color:var(--highlight); }
#nativeStudioPanel .native-ai { background:#29251f; border:1px solid var(--line); border-radius:14px; }
#nativeStudioPanel .native-ai > summary { color:var(--muted); font-weight:600; }
#nativeStudioPanel .native-ai > summary::marker { color:var(--muted); }
#nativeStudioPanel .native-playback { border-color:var(--line); background:#242c27; }
#nativeStudioPanel .native-playback button { background:var(--panel); }
#nativeStudioPanel .native-platform { color:#a8c5ab; background:var(--success-surface); border-radius:20px; padding:6px 12px; }
#nativeStudioPanel [data-page='2'] > [data-command] { color:var(--muted); background:var(--input); }
.workshop-export-stamp { display:grid; place-items:center; width:54px; height:54px; color:#dfba84; font-size:32px; background:var(--warm-surface); border-radius:17px; transform:none; margin-bottom:8px; }
.workshop-install-steps { list-style:none; counter-reset:install; display:grid; gap:16px; margin:8px 0; padding:0; }
.workshop-install-steps li { counter-increment:install; position:relative; padding-left:35px; font-size:12px; }
.workshop-install-steps li::before { content:counter(install); position:absolute; left:0; top:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--success-surface); color:#a8c5ab; }
.workshop-install-steps strong,.workshop-install-steps span { display:block; }
.workshop-install-steps span { color:var(--muted); margin-top:3px; line-height:1.5; }
/* Abilities first; engine details are still within reach. */
#nativeStudioPanel .bedrock-editor { gap:12px; }
#nativeStudioPanel .bedrock-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0 4px; }
#nativeStudioPanel .bedrock-choices button { background:var(--success-surface); border-color:var(--line); color:#a8c5ab; min-height:42px; }
#nativeStudioPanel .bedrock-choices button:hover { background:#304437; border-color:var(--line); }
#nativeStudioPanel .bedrock-summary { color:#a8c5ab; background:var(--success-surface); border-color:var(--line); }
#nativeStudioPanel .bedrock-component { background:var(--input); border:1px solid var(--line); border-radius:12px; padding:0 12px; margin-bottom:8px; }
#nativeStudioPanel .bedrock-component > summary { color:var(--muted); font-weight:600; padding:12px 0; }
#nativeStudioPanel .bedrock-component[open] { padding-bottom:12px; border-color:var(--line); }
#nativeStudioPanel .bedrock-component .bedrock-fields { background:var(--input); border-radius:9px; padding:10px; }
#nativeStudioPanel .bedrock-component fieldset { border-color:var(--line); }
#nativeStudioPanel .bedrock-section-title { font:600 13px 'Schibsted Grotesk',system-ui; color:var(--muted); margin:6px 0 -2px; }
#nativeStudioPanel .bedrock-search-results { background:var(--input); color:var(--muted); border-radius:10px; }
#nativeStudioPanel .bedrock-search-results:empty { display:none; }
#nativeStudioPanel .bedrock-search-result { border-color:var(--line); }
#nativeStudioPanel .bedrock-issues:not(:empty) { color:#dfba84; background:#392f1e; border:1px solid var(--line); border-radius:10px; padding:12px 12px 12px 27px; }
#nativeStudioPanel .bedrock-issues:empty { display:none; }
#nativeStudioPanel [data-behavior-setup] .bedrock-component { margin-top:8px; }
#nativeStudioPanel .bedrock-editor > button { background:none; border:0; color:var(--highlight); min-height:30px; text-align:left; padding:0; font-size:11px; }
/* Animation has a friendly starting point and optional precision. */
body[data-native-mode='animate'] #sidebar { border-color:var(--line); }
body[data-native-mode='animate'] #nativeStudioPanel { padding:14px 24px; }
#nativeStudioPanel .workshop-animation-intro { padding:13px 16px; border-radius:13px; background:#262a27; color:var(--muted); }
.workshop-animation-intro strong { display:block; color:var(--muted); font:600 19px/1.4 'Bricolage Grotesque',system-ui; margin-bottom:2px; }
.native-key-settings { border-color:var(--line); }
.native-key-main > .native-precision { grid-column:1/3; }
#nativeStudioPanel .native-key-timeline { border-radius:8px; background:repeating-linear-gradient(90deg,#424740 0 1px,transparent 1px 10%),linear-gradient(transparent 18px,#5e695a 18px,#5e695a 20px,transparent 20px); }
[data-kf-playhead] { background:var(--highlight); }
#nativeStudioPanel .native-key-timeline button[aria-pressed='true'] { outline-color:var(--highlight); }
/* The same welcome in the gallery, homepage, and sign-in screens. */
body .hero-scene { background:var(--stage); border:1px solid var(--line); border-radius:18px; box-shadow:none; transform:none; }
body .hero-scene::before,body .hero-scene::after { display:none; }
body .hero-model-link { border-radius:18px; }
body .hero-model-canvas { background:var(--stage); }
body .scene-caption { color:#a8c5ab; }
body .hero-motion-toggle { color:#a8c5ab; background:#26392c; border-color:var(--line); border-radius:20px; }
body .hero h1 { color:var(--copy); }
body .hero-sub { color:var(--muted); }
body .hero-meta { color:var(--muted); }
body .hero-meta span::before { background:#99c59d; }
body .step-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; }
body .step-card:nth-child(2) { background:#292620; }
body .step-card:nth-child(3) { background:#222c25; }
body .step-card:nth-child(4) { background:var(--warm-surface); }
body .step-num { color:var(--highlight); }
body .step-card p { color:var(--muted); }
body .pricing-card,body .price-card,body .cta-banner { background:var(--panel); border-color:var(--line); border-radius:20px; }
body .gallery-head { padding-top:48px; }
body .gallery-head h1 { letter-spacing:-.045em; }
body .gallery-head .sub { color:var(--muted); }
body .gallery-scopes { border-color:var(--line); }
body .gallery-scopes .filter { color:var(--muted); }
body .gallery-scopes .filter.active { color:var(--highlight); border-color:var(--highlight); }
body .gallery-search { color:var(--muted); }
body .gallery-search input { color:var(--copy); background:var(--input); border:1px solid var(--line); border-radius:14px; }
body .gallery-toolbar .filter { background:var(--panel); color:var(--muted); border-color:var(--line); border-radius:20px; }
body .gallery-toolbar .filter.active { background:var(--highlight); color:var(--on-primary); }
body .gallery-results { color:var(--muted); }
body .card { border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:none; }
body .card:hover { border-color:var(--line); box-shadow:none; }
body .card .prompt { color:var(--copy); }
body .card .btn-ember { background:var(--selected); border-color:var(--line); color:var(--muted); box-shadow:none; }
body .card:hover .btn-ember { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
body .card .pill { color:var(--muted); background:var(--raised); border:0; }
body .state { background:var(--raised); color:#a3a39d; border-color:var(--line); }
body .auth-card { background:var(--panel); color:var(--copy); border:1px solid var(--line); box-shadow:none; }
body .auth-card .field label,body .auth-card .field small,body .auth-card .auth-sub,body .auth-alt { color:var(--muted); }
body .auth-card .field input { background:var(--input); color:var(--copy); border:1px solid var(--line); }
body .auth-card .field input:focus { outline:3px solid var(--highlight); }
body .auth-card > .pixel-label { color:var(--highlight); }
body .auth-card .btn-ember { background:var(--highlight); color:var(--on-primary); }
body .app-install-dialog { background:var(--panel); color:var(--copy); border:1px solid var(--line); border-radius:16px; }
body .app-install-dialog p,body .app-install-dialog li { color:var(--muted); }
/* Mobile keeps a useful model stage and a scrolling tool shelf. */
@media(max-width:1100px) and (min-width:801px) { body[data-native-studio] { --native-panel:360px; } }
@media(max-height:850px) and (min-width:801px) {
 body .creation-header { padding:20px 28px 14px; }
 body .creation-title { font-size:34px; }
 body .creation-body { padding:18px 28px 22px; gap:28px; }
 body .creation-main .type-tab { min-height:60px; }
 body .creation-eyebrow { margin-bottom:5px; }
 body .creation-size-guide { margin-bottom:12px; }
}
@media(max-width:800px) {
 body #creation-card { border-radius:16px; }
 body .creation-header { padding:24px 22px 18px; }
 body .creation-body { grid-template-columns:1fr; padding:22px; gap:24px; }
 body .creation-alternatives { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; }
 body .starter-example-card { display:grid; grid-template-columns:110px 1fr; }
 body .starter-example-card img { height:100%; aspect-ratio:1; border-bottom:0; }
 body .starter-example-copy { padding:15px; }
 body .starter-example-copy strong { font-size:19px; }
 body .creation-roadmap { gap:12px; }
 body[data-native-studio] .native-steps { gap:3px; padding:6px; }
 body[data-native-studio] .native-steps button { min-width:0; flex:1; padding:8px 4px; font-size:12px; border-radius:9px; }
 body[data-native-studio] #sidebar { border-top:1px solid var(--line); border-radius:16px 22px 0 0; box-shadow:none; }
 #nativeStudioPanel { padding:20px; }
 body[data-native-mode='animate'] #nativeStudioPanel { padding:16px 20px; }
 #nativeStudioPanel .native-tools button { min-height:72px; }
 .native-key-main > .native-precision { grid-column:1/-1; }
 body .gallery-head { padding-top:32px; }
 body .hero-scene { transform:none; }
}
@media(max-width:480px) {
 body .creation-eyebrow { font-size:9px; }
 body .creation-title { font-size:30px; }
 body .creation-header,body .creation-body { padding-left:18px; padding-right:18px; }
 body .creation-main .type-tab,body .creation-main .type-tab.active { min-height:74px; padding:9px 4px; gap:7px; }
 body .type-tab small { font-size:9px; }
 body .creation-roadmap { gap:10px; }
 body .creation-roadmap li { font-size:10px; }
 body .creation-size-guide .voxel-envelope-presets { display:flex; gap:5px; }
 body .creation-size-guide .voxel-envelope-preset { font-size:10px; padding:7px 8px; min-height:34px; }
 body .starter-example-copy > span { font-size:11px; }
 body .studio-homebar-nav a { font-size:12px; }
 body .studio-homebar .app-install { display:none; }
}
@media(prefers-reduced-motion:reduce) { body .starter-example-card:hover { transform:none; } }
/* Quiet legacy chrome and keep the primary action in the first laptop screen. */
html:has(body[data-native-studio]) { overflow:hidden; }
body #creation-card { width:min(1060px,calc(100% - 32px)); }
body #typeSelector { background:transparent; border:0; padding:0; box-shadow:none; clip-path:none; }
body .creation-extras { border:0; border-top:1px solid var(--line); margin:5px 0; }
body .creation-extras > summary { padding:10px 0; color:var(--muted); cursor:pointer; font-size:12px; }
body .creation-extras > summary span { color:#a3a39d; font-size:10px; margin-left:5px; }
body .creation-extras[open] { padding-bottom:10px; }
body .creation-extras .brief-flair-note { margin:8px 0; }
body .creation-extras .voxel-author-prompt-editor { margin:10px 0 0; }
body[data-native-studio] .viewport-toolbar { background:transparent; border:0; box-shadow:none; clip-path:none; }
#nativeStudioPanel .native-try-trigger { background:var(--warm-surface); color:#dfba84; border-color:var(--line); }
#nativeStudioPanel .bedrock-editor .native-studio-note { color:var(--muted); }
body[data-native-studio]:not([data-native-mode='animate']):not([data-try-on]) #nativeStudioPanel .native-playback { position:absolute; right:0; top:0; display:block; padding:0; border:0; background:transparent; }
body[data-native-studio]:not([data-native-mode='animate']):not([data-try-on]) #nativeStudioPanel .native-playback button { border-radius:20px; background:var(--panel); min-height:34px; }
body[data-native-studio]:not([data-native-mode='animate']) #nativeStudioPanel .native-editor { position:relative; }
body[data-native-studio]:not([data-native-mode='animate']):not([data-try-on]) #nativeStudioPanel:has(.native-playback:not([hidden])) .native-title-field { padding-right:80px; }

body:has(#creation-card:not(.hidden)) .viewport-toolbar { display:none; }
body[data-native-studio] .viewport-toolbar .toolbar-group { background:transparent; border:0; box-shadow:none; clip-path:none; padding:0; }
#nativeStudioPanel .native-try-heading button,#nativeStudioPanel [data-fit-scale-label] { color:var(--highlight); }
#nativeStudioPanel [data-fit-catalog] { background:var(--input); border-color:var(--line); }
#nativeStudioPanel [data-fit-catalog-status] { color:var(--muted); }
#nativeStudioPanel [data-fit-help] { background:var(--warm-surface); border-color:var(--line); }
body .card-actions [data-inspect] { color:var(--muted); border-color:var(--line); }
body .hero h1 .gradient { text-shadow:none; }
body .app-install-dialog button { background:var(--highlight); color:var(--on-primary); }
@media(max-height:800px) and (min-width:801px) {
 body .creation-header { padding:16px 28px 12px; }
 body .creation-eyebrow { display:none; }
 body .creation-title { font-size:32px; }
 body .creation-roadmap { margin-top:10px; }
 body .creation-body { padding-top:16px; padding-bottom:18px; }
 body .creation-main .type-tab { min-height:54px; }
 body .creation-size-guide { padding:8px 10px; gap:3px; margin-bottom:10px; }
 body .creation-size-guide .voxel-envelope-preset { min-height:29px; padding:5px 8px; }
 body #trellisPrompt { min-height:78px; }
 body .prompt-suggestions button { min-height:30px; padding:6px 10px; }
 body .creation-extras > summary { padding:8px 0; }
}
@media(max-width:800px) {
 body .starter-example-card img { height:100%; min-height:125px; width:110px; }
 #nativeStudioPanel :is(input[type='text'],input[type='number'],input[type='search'],textarea,select) { font-size:16px; }
}
body[data-native-studio] #nativeStudioPanel label.native-title-field input[data-creation-name] { background:transparent; border:0; border-bottom:1px dashed var(--line); border-radius:0; padding:4px 0 8px; font:600 23px/1.2 'Bricolage Grotesque',system-ui; }
.native-clip-fields > label:has([data-kf-new-name]) { grid-column:1/-1; }
@media(max-width:800px) {
 body[data-native-studio]:not([data-try-on]) #viewport { bottom:54dvh; }
 body[data-native-studio]:not([data-try-on]) #sidebar { height:54dvh; }
 #nativeStudioPanel .workshop-kicker { display:none; }
 #nativeStudioPanel h3 { font-size:25px; }
 #nativeStudioPanel .workshop-export-stamp { display:none; }
 #nativeStudioPanel [data-page] { gap:10px; }
}
body .studio-card,body .price-card.featured { background:var(--selected); border-color:var(--line); }
body .price-flag { color:var(--muted); background:var(--selected); }
body .cta-band { background:#202423; border-color:var(--line); }
body .auth-error { color:#ffb4a8; background:#3a2421; border-color:var(--line); }
body .native-inspector { color:var(--copy); background:var(--panel); border:1px solid var(--line); border-radius:16px; }
body .native-inspector .filter,body .native-inspector .btn { color:var(--highlight); background:var(--selected); border:1px solid var(--line); }
body .native-inspector canvas { border-radius:16px; }
body .native-inspector summary,body .native-inspector .native-downloads a { color:var(--highlight); }

/* Selection and action hierarchy in the dark studio. */
body:has(#creation-card:not(.hidden)) #viewport::before,
body:has(#creation-card:not(.hidden)) #viewport::after { display:none; }
body #creation-card { box-shadow:0 18px 70px #0006; }
body .creation-main .type-tab.active,
body .creation-size-guide .voxel-envelope-preset.active,
#nativeStudioPanel .native-tools [aria-pressed='true'],
#nativeStudioPanel button[aria-pressed='true'] { border-color:#af783f; color:#ffc18a; }
body .creation-roadmap li.active span,
body .gallery-toolbar .filter.active,
body .card:hover .btn-ember,
body .auth-card .btn-ember,
body .app-install-dialog button { background:var(--primary); color:var(--on-primary); }
body[data-native-studio] .native-steps button[aria-current='step'] { color:#ffc18a; box-shadow:inset 0 0 0 1px #9b6a3655; }
#nativeStudioPanel .native-next { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
#nativeStudioPanel .native-next:hover:not(:disabled) { background:#ffb56f; color:var(--on-primary); }
#nativeStudioPanel .native-ai > summary,
#nativeStudioPanel .native-ai > summary::marker { color:#e8bb88; }
#nativeStudioPanel .bedrock-component > summary,
.workshop-animation-intro strong,body .starter-example-copy strong { color:var(--copy); }
#nativeStudioPanel .bedrock-issues [data-severity='error'] { color:#ffb4a8; }
#nativeStudioPanel .native-palette button { border-color:#88877d; }
body .starter-example-card { background:#222824; }
body .starter-example-copy small { color:#a8c5ab; }
body .hero h1 em { text-shadow:none; }

/* Designer review, Sept 2026: viewport views, paint helpers, learning checks, clearer clips and export.
   Vault: System/Designer review Sept 2026.md. */
body[data-native-studio] #fitViewportBtn { display:none; }
.native-view-dock { position:absolute; top:12px; left:12px; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:calc(100% - 24px); }
.native-view-dock button,.native-view-lighting > summary { min-height:34px; padding:6px 12px; border:1px solid var(--line); border-radius:20px; background:var(--panel); color:var(--muted); font:500 12px/1 'Schibsted Grotesk',system-ui; cursor:pointer; }
.native-view-dock button:hover,.native-view-lighting > summary:hover { color:var(--copy); border-color:var(--border-hover); }
.native-view-angles { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.native-view-dock .native-view-angles button { min-height:30px; padding:5px 10px; border:0; background:transparent; }
.native-view-dock .native-view-angles button:hover { background:var(--raised); }
.native-view-lighting { position:relative; }
.native-view-lighting > summary { display:flex; align-items:center; list-style:none; }
.native-view-lighting > summary::-webkit-details-marker { display:none; }
.native-view-lighting[open] > summary { color:#ffc18a; border-color:#af783f; }
.native-view-menu { position:absolute; top:calc(100% + 6px); left:0; display:grid; gap:10px; min-width:170px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 12px 30px #0008; color:var(--copy); font-size:13px; }
.native-view-menu label { display:flex; align-items:center; gap:8px; cursor:pointer; }
@media(max-width:600px) {
 .native-view-dock { top:8px; left:8px; gap:4px; max-width:calc(100% - 16px); }
 .native-view-dock [data-view-fit] span { display:none; }
 .native-view-dock button,.native-view-lighting > summary { min-height:32px; padding:5px 9px; font-size:11px; }
 .native-view-dock .native-view-angles button { padding:4px 7px; min-height:28px; }
}
#nativeStudioPanel .native-tools button { position:relative; }
#nativeStudioPanel .native-tools kbd { position:absolute; top:7px; right:8px; padding:3px 5px; border:1px solid var(--line); border-radius:5px; background:var(--input); color:#908d87; font:600 10px/1 ui-monospace,monospace; }
@media(hover:none) { #nativeStudioPanel .native-tools kbd { display:none; } }
.native-brushes { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin-bottom:12px; }
#nativeStudioPanel .native-custom-colour [data-remove-colour] { justify-self:start; }
#nativeStudioPanel .native-custom-colour[open] { display:grid; gap:8px; }
#nativeStudioPanel .native-open-model { display:grid; gap:6px; font-size:12px; }
#nativeStudioPanel .native-parts[open] { display:grid; gap:10px; }
#nativeStudioPanel .native-parts [data-element-status]:empty { display:none; }
#nativeStudioPanel .native-parts [data-element-status] { padding:8px 10px; border-left:2px solid var(--highlight); background:var(--warm-surface); }
body[data-native-mode='animate'] #nativeStudioPanel .native-open-model { display:none; }
body[data-native-mode='animate'] #nativeStudioPanel .native-save-actions button { flex:0 0 auto; }
/* Learn: a few hands-on checks for the creative eye, each linked to a studio tool. */
#nativeStudioPanel .native-learn { padding:0 14px; border:1px solid var(--line); border-radius:14px; background:#1d2320; }
#nativeStudioPanel .native-learn > summary { color:#a8c5ab; font-weight:600; }
#nativeStudioPanel .native-learn[open] { display:grid; gap:10px; padding-bottom:14px; }
.native-learn article { display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--input); }
.native-learn h4 { margin:0; color:var(--copy); font:600 14px/1.3 'Schibsted Grotesk',system-ui; }
#nativeStudioPanel .native-learn article p { color:var(--muted); font-size:12px; line-height:1.5; }
#nativeStudioPanel .native-learn .native-learn-try strong { color:#a8c5ab; }
#nativeStudioPanel .native-learn article button { justify-self:start; min-height:34px; padding:6px 12px; }
/* Animate: edit the selected clip and create new clips in separate, labelled groups. */
.native-new-clip { display:grid; gap:8px; margin:0; padding:10px 12px 2px; border:1px solid var(--line); border-radius:12px; }
.native-new-clip legend { padding:0 6px; color:#ffc18a; font-size:12px; font-weight:600; }
.native-new-clip label { display:grid; gap:6px; }
.native-clip-fields > .native-loop { grid-column:1/-1; display:flex; align-items:center; gap:8px; }
.native-clip-fields > label:has(select) { display:grid; gap:6px; }
.native-pivot-settings[open] { display:grid; gap:8px; }
.native-key-main > .native-key-tracks { grid-column:1/-1; display:grid; gap:2px; }
.native-key-track { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:6px; opacity:.62; }
.native-key-track.is-active { opacity:1; }
.native-key-track > span { color:var(--muted); font-size:11px; }
.native-key-track.is-active > span { color:#ffc18a; font-weight:600; }
#nativeStudioPanel .native-key-track .native-key-timeline { margin:0 14px; }
@media(max-width:800px) { .native-key-main > .native-key-tracks { grid-column:1/-1!important; } }
/* Try On: the next step is obvious and the status chip never wraps. */
#nativeStudioPanel .native-try-heading .native-platform { white-space:nowrap; }
#nativeStudioPanel .native-try-heading [data-fit-done] { min-height:36px; padding:8px 16px; border:1px solid var(--primary); border-radius:20px; background:var(--primary); color:var(--on-primary); font-weight:650; }
#nativeStudioPanel .native-try-heading [data-fit-done]:hover:not(:disabled) { background:#ffb56f; color:var(--on-primary); }
/* Export: one obvious route into Minecraft, one into Blockbench, sharing and files after. */
#nativeStudioPanel .native-export-choice { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--input); }
#nativeStudioPanel .native-export-primary { background:#221c16; border-color:#5a4029; }
.native-export-lead { display:grid; gap:3px; }
#nativeStudioPanel .native-export-lead strong { color:var(--copy); font-size:14px; }
#nativeStudioPanel .native-export-lead span { color:var(--muted); font-size:12px; line-height:1.5; }
#nativeStudioPanel .native-export-choice .native-next { margin-top:0; }
#nativeStudioPanel .native-command { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; align-items:center; font:inherit; }
#nativeStudioPanel .native-command > span { grid-column:1/-1; color:var(--muted); font-size:12px; }
#nativeStudioPanel .native-command code { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#0f1112; color:var(--copy); font:12px ui-monospace,monospace; overflow-wrap:anywhere; user-select:all; }
#nativeStudioPanel .native-command button { min-height:36px; padding:6px 14px; }
/* Animate keeps the name out of the workbench; playback leads, then saving. */
body[data-native-mode='animate'] #nativeStudioPanel .native-title-field { display:none; }
body[data-native-mode='animate'] #nativeStudioPanel .native-editor > .native-playback { order:-2; }
body[data-native-mode='animate'] #nativeStudioPanel .native-editor > .native-save-actions { order:-1; padding:0; }
/* The Lighting menu hangs from the dock's right edge, which is already inside the viewport,
   so it cannot run off a phone screen (the dock is wider than the menu). */
.native-view-lighting { position:static; }
.native-view-dock .native-view-menu { left:auto; right:0; max-width:calc(100vw - 16px); box-sizing:border-box; }