:root {
    color-scheme: dark;
    --aether-surface: #19191c;
    --aether-line: #343438;
    --aether-line-soft: #29292e;
    --aether-shadow: none;
}
* { letter-spacing: 0 !important; }
body { background: #111113 !important; color: #f4f4f5; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.icon-button { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; min-width: 40px; padding: 8px !important; }
.icon-button svg { width: 18px; height: 18px; }
.post-comments { border-top: 1px solid #343438; margin-top: 12px; padding-top: 12px; }
.post-comments summary { cursor: pointer; font-size: 12px; color: #97979f; }
.post-comments > .space-y-2 { margin-top: 12px; }
.motion-preview { position: relative; aspect-ratio: 4/3; max-height: 440px; overflow: hidden; background: #242428; border-radius: 6px; }
.motion-transport { position: absolute; z-index: 2; bottom: 8px; left: 8px; right: 8px; display: flex; gap: 10px; align-items: center; background: #19191cdd; padding: 6px 10px; border-radius: 5px; }
.motion-transport input { flex: 1; min-width: 0; }
.motion-transport button { font-size: 12px; min-width: 44px; }
body > .container { max-width: 1440px !important; padding: 24px 32px 100px; }
header { display: flex; align-items: baseline; gap: 20px; text-align: left !important; margin-bottom: 22px !important; }
header h1 { font-size: 30px !important; font-weight: 600 !important; }
#header-subtitle { font-size: 13px !important; margin: 0 !important; }
nav { top: 12px; background: #19191cf2 !important; box-shadow: none !important; margin-bottom: 24px !important; backdrop-filter: blur(20px); }
button, input, select { -webkit-tap-highlight-color: transparent; }
button { min-height: 40px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid #d2f58a !important; outline-offset: 3px;
}
button:hover { transform: none !important; }
button:disabled { opacity: .35 !important; }
.mode-button, .tool-button, .post-type-btn, .nav-button { box-shadow: none !important; }
.mode-button.active, .tool-button.active, .post-type-btn.active, .nav-button.active {
    background: #d2f58a !important; color: #18200e !important; border-color: #d2f58a !important; box-shadow: none !important;
}
#post-btn, #create-new-post-btn, .submit-comment-btn, #modal-action-btn {
    background: #ededee !important; color: #171719 !important; box-shadow: none !important;
}
input, select, textarea { background: #121214 !important; color: #efeff1 !important; border-color: #3a3a3f !important; }
input[type="range"] { accent-color: #d2f58a; }
input[type="range"]::-webkit-slider-thumb { background: #d2f58a !important; box-shadow: none !important; }
.content-panel, #shape-start-panel, #object-selector-panel, #anim-layers-panel, #anim-props-panel,
[id="2d-toolbar"], #panel-audio > div:first-child, #panel-animation > div:first-child {
    background: #19191c !important; box-shadow: none !important; backdrop-filter: none;
}
#art-content-panel { padding: 12px !important; margin-bottom: 18px !important; border: 1px solid #333337 !important; }
#shape-start-panel { border: 0 !important; padding: 0 0 16px !important; margin: 0 !important; background: transparent !important; }
#shape-selector-container > label { display: none; }
#shape-buttons { justify-content: flex-start; gap: 6px; overflow-x: auto; }
#shape-buttons > button { flex: 0 0 auto; margin: 0; font-size: 12px; padding: 8px 14px; }
#creation-view > .mb-6 { margin-bottom: 16px; }
#creation-view > .mb-6 > label { display: none; }
#creation-view > .mb-6 > .flex { justify-content: flex-start; gap: 6px; }
.post-type-btn { margin: 0 !important; font-size: 13px; padding: 9px 18px; }
.studio-heading { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.studio-heading h2 { font-size: 22px; font-weight: 600; }
.studio-heading p { color: #909096; font-size: 12px; margin-top: 3px; }
.studio-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-actions button, .quiet-button { padding: 8px 12px; border: 1px solid #39393e; border-radius: 6px; background: #202024; font-size: 12px; }
.studio-actions button:hover, .quiet-button:hover { background: #303035; }
.studio-actions input { width: 160px; padding: 8px; border: 1px solid #39393e; border-radius: 6px; font-size: 12px; }
.save-status { color: #a7b88e; font-size: 11px; white-space: nowrap; }
#panel-3d { height: min(72dvh, 780px) !important; min-height: 480px; }
[id="3d-content"] > .flex:first-child { flex-basis: 56px; }
#three-canvas-container { border: 0; background: #202024 !important; }
#mode-helper-text { display: none; }
#object-selector-panel { width: 210px !important; border: 0 !important; border-left: 1px solid #343438 !important; border-radius: 0 !important; padding-left: 14px !important; overflow-y: auto; }
#object-list li { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
#object-list li.active { background: #d2f58a20 !important; border: 1px solid #d2f58a60 !important; color: #dcf5b0; }
#object-selector-panel input { min-width: 0; }
.surface-controls { border-top: 1px solid #343438; margin-top: 14px; padding-top: 12px; }
.surface-controls summary { font-size: 12px; color: #bdbdc3; cursor: pointer; margin-bottom: 10px; }
.surface-controls label { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; font-size: 11px; color: #a5a5ac; }
.surface-controls input[type="range"] { width: 100px; }
.surface-controls button { margin: 3px 0; width: 100%; text-align: left; }
.viewport-dock { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 5; padding: 5px; border: 1px solid #ffffff26; border-radius: 8px; background: #18181bef; }
.viewport-dock button { min-height: 38px; padding: 0 12px; border-radius: 4px; font-size: 12px; color: #babac1; }
.viewport-dock button[aria-pressed="true"] { background: #d2f58a; color: #18200e; }
.viewport-stat { position: absolute; left: 12px; top: 12px; font-size: 10px; color: #adadb5; pointer-events: none; }
#drawing-canvas { width: 100% !important; height: 100% !important; object-fit: contain; border-radius: 0; background: #242428; }
[id="2d-content"] { width: min(100%, 960px, calc(62dvh * 1.333333)); flex: 0 0 auto; margin-inline: auto; aspect-ratio: 4/3; background: #242428 !important; }
#panel-2d { height: auto !important; }
[id="2d-toolbar"] { gap: 10px !important; justify-content: flex-start !important; }
.drawing-shapes { display: flex; gap: 4px; }
.drawing-opacity { display: flex; align-items: center; gap: 8px; color: #a5a5ac; font-size: 12px; }
.drawing-opacity input { width: 90px; }
#panel-audio { height: auto !important; }
#sequencer-container { overflow-x: auto; }
.sequencer-step { min-height: 28px; }
#main-text-area { min-height: 100px !important; height: 100px; font-size: 14px; }
#text-input-label { font-size: 12px; color: #a2a2a9; }
#timeline-view > .flex { align-items: center; }
#timeline-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
#timeline-container > div { margin: 0 !important; padding: 18px !important; background: #1b1b1f !important; border: 1px solid #323237 !important; box-shadow: none !important; border-radius: 8px !important; min-width: 0; }
#timeline-container img { max-height: 440px; aspect-ratio: 4/3; object-fit: cover; }
#timeline-container [id^="timeline-3d-"] { aspect-ratio: 4/3; height: auto !important; max-height: 440px; }
.studio-heading #create-new-post-btn { padding: 9px 16px; font-size: 13px; }
#timeline-container .prose { font-size: 14px; line-height: 1.7; }
.feed-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.feed-controls button { padding: 7px 14px; border-bottom: 2px solid transparent; font-size: 13px; color: #a1a1aa; }
.feed-controls button[aria-pressed="true"] { color: #d2f58a; border-color: #d2f58a; }
.feed-controls select { margin-left: auto; padding: 8px; font-size: 12px; border-radius: 5px; }
.post-kind { color: #d2f58a; font-size: 10px; text-transform: uppercase; margin-bottom: 12px; }
.post-extra { display: flex; gap: 8px; margin-top: 10px; }
.post-extra button { color: #acacb3; font-size: 12px; padding: 4px 10px; border-radius: 4px; }
.post-extra button[aria-pressed="true"] { color: #d2f58a; }
.comment-list { max-height: 180px; overflow: auto; }
.comment-input { min-width: 0; }
#timeline-container .comment-input { font-size: 12px; }
.workspace-empty { text-align: center; color: #94949d; padding: 60px 20px; grid-column: 1/-1; }
dialog { width: min(640px, calc(100vw - 32px)); max-height: 80dvh; padding: 24px; border: 1px solid #414147; border-radius: 8px; background: #202024; color: #f1f1f3; }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dialog-heading h2 { font-size: 20px; }
.project-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #37373c; }
.project-row > button:first-child { flex: 1; text-align: left; }
.project-row small { display: block; color: #92929b; font-size: 11px; margin-top: 4px; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 12px 20px; max-width: calc(100vw - 32px); background: #e7ebdf; color: #20251a; box-shadow: 0 5px 30px #0005; border-radius: 6px; font-size: 13px; z-index: 150; }
body.focus-studio header, body.focus-studio #creation-view > .mb-6, body.focus-studio #shape-start-panel,
body.focus-studio #main-content > :not(#art-content-panel):not(.publish-actions) { display: none !important; }
body.focus-studio #panel-3d { height: calc(100dvh - 220px) !important; }
@media (max-width: 760px) {
    body > .container { padding: 16px 12px 100px !important; }
    header { margin: 0 0 10px !important; justify-content: space-between; }
    header h1 { font-size: 26px !important; }
    #header-subtitle { font-size: 11px !important; }
    nav { position: fixed !important; top: auto !important; bottom: 0; left: 0; right: 0; margin: 0 !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; border-radius: 0 !important; border: 0 !important; border-top: 1px solid #3b3b3e !important; z-index: 60; }
    nav > div:first-child { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
    nav > div:last-child:not(.primary-navigation) { display: none !important; }
    nav .nav-button { margin: 0 !important; display: flex; flex-direction: column; gap: 3px; padding: 6px !important; border: 0 !important; background: transparent !important; font-size: 10px; min-height: 48px; }
    nav .nav-button span { margin: 0 !important; }
    nav .nav-button.active { color: #d2f58a !important; background: transparent !important; }
    .studio-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; position: relative; }
    .studio-heading p { display: none; }
    .studio-heading h2 { font-size: 20px; }
    .studio-actions { gap: 6px; width: 100%; }
    .studio-actions input { flex: 1; width: 100px; }
    .studio-actions button { padding: 8px; min-height: 40px; }
    .save-status { position: absolute; right: 0; top: 8px; font-size: 10px; }
    #creation-view > .mb-6 > .flex { display: flex !important; overflow-x: auto; flex-wrap: nowrap; }
    .post-type-btn { flex: 0 0 auto; padding: 8px 12px; min-height: 40px !important; }
    #creation-view > .mb-6 > .flex, #shape-buttons { scrollbar-width: thin; padding-bottom: 0 !important; }
    #shape-buttons > button { min-height: 44px !important; }
    #creation-view > .mb-6 { margin-bottom: 8px; }
    #shape-start-panel { padding-bottom: 8px !important; }
    [id="3d-content"] { margin-top: 0 !important; }
    #art-content-panel { padding: 8px !important; }
    #panel-3d { height: calc(100dvh - 360px) !important; min-height: 380px; }
    [id="3d-content"] > .flex:first-child { flex: 0 0 104px; }
    [id="3d-content"] > .flex-grow { flex-direction: row !important; }
    #three-canvas-container { min-height: 0 !important; }
    #object-selector-panel { display: none !important; }
    #object-selector-panel.mobile-open { display: block !important; position: absolute; top: 120px; right: 8px; bottom: 8px; z-index: 15; max-width: 240px; width: 70% !important; border: 1px solid #3a3a40 !important; padding: 12px !important; }
    [id="3d-content"] { position: relative; }
    .viewport-dock { bottom: 8px; max-width: calc(100% - 12px); }
    .viewport-dock button { padding: 0 9px; min-height: 42px; }
    #timeline-container { grid-template-columns: 1fr; gap: 18px; }
    #timeline-container > div { padding: 14px !important; }
    .feed-controls { gap: 2px; }
    .feed-controls button { padding: 7px 10px; }
    .feed-controls select { max-width: 95px; }
    .toast { bottom: calc(85px + env(safe-area-inset-bottom)); }
    input[type="text"], textarea { font-size: 16px !important; }
    body.focus-studio #panel-3d { height: calc(100dvh - 235px) !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; scroll-behavior: auto !important; } }

/* Shared spacing and interaction rhythm across feed and studio. */
html { scroll-padding-top: 100px; }
body { line-height: 1.5; }
button,input,select,textarea,summary { touch-action: manipulation; }
textarea:focus-visible { outline: 2px solid #d2f58a; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
button { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
nav { border: 1px solid #36363b !important; border-radius: 8px !important; }
.nav-button:not(.active) { color: #bdbdc6; }
.studio-heading h2 { line-height: 1.25; }
.studio-heading p { color: #a6a6b0; }
.studio-actions input { min-height: 40px; width: 200px; }
.post-type-btn { background: transparent !important; border: 1px solid transparent !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: #aaaab5; }
.post-type-btn.active { background: transparent !important; color: #e3f4c5 !important; border-color: transparent !important; border-bottom-color: #d2f58a !important; }
#creation-view > .mb-6 > .flex { border-bottom: 1px solid #303037; gap: 0; }
#art-content-panel { border-radius: 6px !important; }
#main-text-area { line-height: 1.65; padding: 14px; border-radius: 6px; resize: vertical; }
#timeline-container .prose { overflow-wrap: anywhere; }
.feed-controls { border-bottom: 1px solid #303037; padding-bottom: 4px; }
.feed-controls button { min-height: 44px; }
.post-extra button { min-height: 40px; }
dialog { overscroll-behavior: contain; }
.project-row { min-height: 72px; }
.project-row button { overflow-wrap: anywhere; }
.save-status { font-variant-numeric: tabular-nums; }
@media(min-width:1000px) {
    body > .container { padding-top: 28px; }
    header { margin-bottom: 26px !important; }
    #timeline-container { gap: 28px; }
    #timeline-container > div { padding: 22px !important; }
}
@media(max-width:760px) {
    html { scroll-padding-top: 16px; scroll-padding-bottom: 100px; }
    body > .container { padding-inline: 12px !important; }
    header { align-items: center; }
    .film-version { margin-left: 0; font-size: 9px; }
    .studio-actions { display: grid; grid-template-columns: minmax(0,1fr) repeat(4,40px); gap: 5px; }
    .studio-actions input { width: 100%; min-width: 0; }
    .post-type-btn { font-size: 12px; min-height: 44px !important; padding: 8px 11px; }
    #creation-view > .mb-6 > .flex { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: visible; }
    .post-type-btn { min-width: 0; padding-inline: 4px; }
    .feed-controls { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; }
    .feed-controls button { padding: 8px 3px; font-size: 11px; }
    .feed-controls select { grid-column: 1/-1; justify-self: end; max-width: none; min-height: 40px; margin-top: 6px; }
    nav { border-radius: 0 !important; }
    input[type="number"],select { font-size: 16px !important; }
}