/* makethings.lol design system. This is the last stylesheet: it owns colour, type, spacing and
   the shared chrome across every screen size. Editor geometry and creative content colours
   (canvas pixels, sequencer steps, film lanes) stay with their modules. Everything here is
   token driven so the automatic dark mode and the named themes only swap variables. */

/* ============================================================ 0. Tokens */
html, body.aether-ui {
 --paper:#f4f1ea; --surface:#fffdf9; --ink:#1b1613; --muted:#6b625c; --line:#e6ddd3; --line-strong:#d3c6b9;
 --soft:#f6e4da; --accent:#9c4a2b; --action:#e0805e; --on-action:#1b1613; --accent-line:#e9c3b2;
 --action-2:#f2b28f; --action-shadow:#e0805e4d;
 --support-ink:#1f5f58; --support-soft:#ddedea; --support-line:#b9d8d2;
 --danger:#a8301f; --danger-soft:#fbe6e1; --danger-line:#eeb9ad;
 --chrome-soft:#f8f4ee; --panel:#f8f4ee; --stage:#1c1714; --stage-color:#1c1714; --media-bg:#ebe4da;
 --glass:#f4f1eae6; --glass-strong:#fffdf9e0; --shadow-1:0 1px 2px #1b161314,0 8px 24px #1b16130f; --shadow-2:0 12px 40px #1b161326;
 --radius:18px; --radius-sm:12px; --radius-xs:8px; --rail:88px;
 --font:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html { background:var(--paper); color-scheme:light; }
@media (prefers-color-scheme:dark) {
 html:not([data-theme]), html[data-theme="default"], html:not([data-theme]) body.aether-ui, html[data-theme="default"] body.aether-ui {
  --paper:#17110f; --surface:#221a17; --ink:#f6efe8; --muted:#b5a79e; --line:#352a26; --line-strong:#4a3b35;
  --soft:#3a2620; --accent:#f0a184; --action:#ee9b7c; --on-action:#1b1613; --accent-line:#8a4f3a;
  --action-2:#f7c2a6; --action-shadow:#ee9b7c66;
  --support-ink:#8fd3c8; --support-soft:#163330; --support-line:#255a54;
  --danger:#ff9d8f; --danger-soft:#3d1d18; --danger-line:#6a2e25;
  --chrome-soft:#2a201c; --panel:#2a201c; --stage:#0f0b0a; --stage-color:#0f0b0a; --media-bg:#0f0b0a;
  --glass:#17110fe0; --glass-strong:#221a17e6; --shadow-1:0 1px 2px #00000066,0 8px 24px #00000059; --shadow-2:0 16px 48px #000000a6;
  color-scheme:dark;
 }
 html:not([data-theme]), html[data-theme="default"] { background:#17110f; }
}
/* Named themes route their action colour through the same tokens. */
html[data-theme]:not([data-theme="default"]) body.aether-ui { --action:var(--theme-action); --on-action:var(--theme-on-action); --action-2:var(--theme-action); --action-shadow:#00000040; --chrome-soft:var(--soft); --panel:var(--soft); --glass:var(--paper); --glass-strong:var(--surface); --media-bg:var(--soft); --accent-line:var(--line); }
html:is([data-theme="starry"],[data-theme="cyber"]) body.aether-ui { color-scheme:dark; --support-ink:#ffb3a3; --support-soft:#3a1f19; --support-line:#5c2e24; --danger:#ff9a90; --danger-soft:#3a1c1a; --danger-line:#5f2b27; --stage:#0b0c0e; --stage-color:#0b0c0e; --shadow-1:0 1px 2px #00000066,0 8px 24px #00000059; --shadow-2:0 16px 48px #000000a6; }

/* ============================================================ 1. Base */
body.aether-ui { font-family:var(--font); background:var(--paper) !important; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.aether-ui :is(h1,h2,h3) { letter-spacing:-.02em !important; font-weight:650; }
.aether-ui ::selection { background:var(--soft); color:var(--ink); }
.aether-ui { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.aether-ui :is(button,a,input,select,textarea,summary,[contenteditable]):focus-visible { outline:3px solid var(--accent) !important; outline-offset:3px; }
.aether-ui #art-content-panel :focus-visible { outline-color:var(--accent) !important; }
.aether-ui #writing-editor:focus,.aether-ui #writing-editor:focus-visible,.aether-ui .ql-editor:focus,.aether-ui .ql-editor:focus-visible { outline:none !important; box-shadow:none !important; }
.aether-ui .studio-workbench #art-content-panel :is(.sequencer-step,.film-key,.film-clip,.sound-clip):focus-visible { outline-color:#fff !important; }
.aether-ui button { transition:transform 160ms cubic-bezier(.2,.8,.2,1),background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease; }
.aether-ui .toast,.aether-ui .publication-preview,.aether-ui .creation-card .prose,.aether-ui #writing-editor { font-family:var(--font); }
.aether-ui > .container { width:100%; max-width:1240px !important; padding:28px 32px 72px calc(var(--rail) + 32px) !important; }
.aether-ui .studio-heading h2 { color:var(--ink); }
.aether-ui .skip-content { background:var(--surface); color:var(--ink); border-color:var(--accent); box-shadow:var(--shadow-2); }
.theme-sky { z-index:0; }

/* ============================================================ 2. Shell: brand, rail, search */
.aether-ui header { width:var(--rail); height:88px; padding:20px !important; background:transparent; z-index:65; }
.brand-home { min-width:48px; min-height:48px; justify-content:center; gap:10px; }
.brand-symbol { width:48px; height:48px; border-radius:16px; font-size:30px; font-weight:700; letter-spacing:-.04em !important; color:var(--on-action); background:linear-gradient(135deg,var(--action),var(--action-2)); box-shadow:0 8px 20px var(--action-shadow); }
.brand-period { color:var(--accent); }
.aether-ui header h1 { font-size:24px !important; }
.aether-ui nav { width:var(--rail); inset:88px auto 0 0 !important; padding:8px 12px 24px !important; background:transparent !important; border:0 !important; border-right:0 !important; backdrop-filter:none !important; z-index:70; }
.aether-ui nav .primary-navigation { gap:6px; }
.aether-ui nav .nav-button { flex-direction:column; justify-content:center; gap:6px; min-height:62px; padding:8px 4px !important; border:0 !important; border-radius:16px; background:transparent !important; color:var(--muted) !important; font-size:11px; font-weight:600; letter-spacing:.01em; }
.aether-ui nav .nav-button svg { width:23px; height:23px; stroke-width:1.9; }
.aether-ui nav .nav-button:hover { background:var(--surface) !important; color:var(--ink) !important; box-shadow:var(--shadow-1); }
.aether-ui nav .nav-button.active,.aether-ui nav .nav-button[aria-current="page"] { background:var(--soft) !important; color:var(--accent) !important; box-shadow:none !important; }
.aether-ui nav #creation-nav-btn { margin:6px 0; color:var(--on-action) !important; background:linear-gradient(135deg,var(--action),var(--action-2)) !important; box-shadow:0 8px 20px var(--action-shadow) !important; }
.aether-ui nav #creation-nav-btn:hover { filter:brightness(1.06); }
.aether-ui nav #creation-nav-btn svg { stroke-width:2.4; }
.aether-ui nav #timeline-options-trigger { min-height:52px; margin-top:-4px; font-size:11px; }
.aether-ui nav #nav-account { left:12px; bottom:20px; width:64px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:600; color:var(--muted) !important; background:var(--surface) !important; border-radius:16px; box-shadow:var(--shadow-1); padding:8px 2px !important; }
.aether-ui nav #nav-account::before { content:''; width:20px; height:20px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") center/contain no-repeat; }
.aether-ui nav #nav-account:hover { color:var(--ink) !important; }
.shell-search { top:20px; right:24px; width:46px; height:46px; min-height:46px; border:1px solid var(--line); border-radius:50%; background:var(--glass-strong); color:var(--ink); box-shadow:var(--shadow-1); backdrop-filter:saturate(160%) blur(16px); }
.shell-search:hover { color:var(--accent); }
#timeline-options-trigger.has-filter::after { background:var(--accent); }

/* ============================================================ 3. Shared controls */
.aether-ui .studio-actions button,.aether-ui .project-menu > summary { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:14px; box-shadow:var(--shadow-1); }
.aether-ui .studio-actions button:hover,.aether-ui .project-menu > summary:hover { color:var(--accent); border-color:var(--accent-line); }
.project-menu-panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); }
.aether-ui .project-menu-panel > button,.aether-ui .project-menu-panel .appearance-open { color:var(--ink); border-radius:10px; }
.aether-ui .project-menu-panel > button:hover,.aether-ui .project-menu-panel .appearance-open:hover { background:var(--chrome-soft); }
.aether-ui #post-btn,.aether-ui #create-new-post-btn,.aether-ui .publication-submit,.aether-ui .timeline-options-done,.aether-ui .appearance-done,.aether-ui .collection-empty button,.aether-ui .asset-name-actions button[type="submit"],.aether-ui .profile-dialog-actions .profile-save,.aether-ui .search-submit,.aether-ui .auth-dialog #auth-submit {
 background:var(--action) !important; color:var(--on-action) !important; border-color:transparent !important; border-radius:14px; font-weight:650; box-shadow:0 6px 18px var(--action-shadow);
}
.aether-ui #post-btn:hover,.aether-ui #create-new-post-btn:hover,.aether-ui .publication-submit:hover,.aether-ui .auth-dialog #auth-submit:hover { background:var(--action) !important; filter:brightness(1.08); box-shadow:0 8px 22px var(--action-shadow); }
.aether-ui #post-btn { padding:10px 18px !important; font-size:14px !important; }
.aether-ui #post-btn svg { stroke-width:2.4; }
.aether-ui .appearance-open,.aether-ui .timeline-find-creator,.aether-ui #feed-snap,.aether-ui .publication-actions button,.aether-ui .asset-name-actions button,.aether-ui .profile-dialog-actions button,.aether-ui .film-library-more,.aether-ui .quiet-button,.aether-ui .auth-dialog button,.aether-ui .remake-reply-banner button,.aether-ui .remake-reply-start,.aether-ui .remake-original { border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.aether-ui .appearance-open:hover,.aether-ui .timeline-find-creator:hover,.aether-ui .quiet-button:hover,.aether-ui .auth-dialog button:not(#auth-submit):hover { border-color:var(--accent-line); color:var(--accent); background:var(--surface); }
.aether-ui .dialog-close,.aether-ui .timeline-options-heading button,.aether-ui .appearance-heading button,.aether-ui .auth-top > button,.aether-ui .studio-notice-close { color:var(--muted); border-radius:12px; border:0; background:transparent; }
.aether-ui .dialog-close:hover,.aether-ui .timeline-options-heading button:hover,.aether-ui .appearance-heading button:hover,.aether-ui .auth-top > button:hover { background:var(--chrome-soft); color:var(--ink); }
.aether-ui dialog :is(input,select,textarea),.aether-ui #project-search,.aether-ui #film-asset-search,.aether-ui #publication-format,.aether-ui .asset-name-dialog :is(input,select),.aether-ui #profile-form > input,.aether-ui #profile-form textarea,.aether-ui #profile-featured-input,.aether-ui .auth-dialog :is(input,select) { background:var(--chrome-soft) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:12px !important; }
.aether-ui dialog :is(input,select,textarea):focus,.aether-ui .auth-dialog :is(input,select):focus { border-color:var(--accent-line) !important; }
.aether-ui .feed-controls select,.aether-ui .profile-filters select { background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:12px; }
.aether-ui .profile-filters select { background:transparent !important; border:0 !important; }
.aether-ui #feed-snap[aria-pressed="true"] { background:var(--soft); color:var(--accent); border-color:var(--accent-line); }
.aether-ui .remake-reply-banner { background:var(--soft); border-color:var(--accent-line); color:var(--ink); border-radius:14px; }
.aether-ui .remake-reply-banner button,.aether-ui .remake-reply-start,.aether-ui .remake-original { color:var(--accent); border-color:var(--accent-line); }
.aether-ui .remake-reply-card { background:var(--chrome-soft); color:var(--ink); border-color:var(--line); }

/* ============================================================ 4. Feed */
.aether-ui #timeline-view { padding-top:8px; }
.aether-ui #timeline-container,.aether-ui #profile-posts-container { gap:28px; max-width:720px; }
.aether-ui #timeline-container > .creation-card,.aether-ui #profile-posts-container > .creation-card { padding:18px 20px 12px !important; border:1px solid var(--line) !important; background:var(--surface) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-1) !important; color:var(--ink); overflow:visible; }
html[data-theme]:not([data-theme="default"]) .aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card { background:var(--surface) !important; }
.aether-ui .creation-card .post-kind { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:5px 10px; border-radius:999px; background:var(--soft); color:var(--accent); font-size:10.5px; font-weight:700; letter-spacing:.06em !important; text-transform:uppercase; }
.aether-ui .creation-card .post-kind::after { display:none; }
.aether-ui .creation-card.post-settled .post-kind::after { display:none; }
.aether-ui .creation-meta { margin-bottom:14px !important; grid-template-columns:40px minmax(0,1fr); column-gap:12px; align-items:center; }
.aether-ui .creator-avatar { width:40px; height:40px; font-size:16px; font-weight:700; color:#25322d; box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line); }
.aether-ui .creation-meta p,.aether-ui .creation-meta p:first-of-type { color:var(--muted); font-size:12px; }
.aether-ui .creation-meta p:first-of-type { font-size:14px; }
.aether-ui .creation-meta a { color:var(--ink); font-weight:650; }
.aether-ui .creation-meta a:hover { color:var(--accent); text-decoration:none; }
.aether-ui .post-media { border-radius:14px; overflow:hidden; background:var(--media-bg); }
.aether-ui #timeline-container img,.aether-ui #profile-posts-container .post-media img { background:var(--media-bg); }
.aether-ui .creation-card[data-post-type="audio"] .post-media { background:linear-gradient(160deg,#1c1d24,#0e0f12); color:#eef0f6; border-radius:14px; }
.aether-ui .creation-card[data-post-type="audio"] .timeline-audio-play-btn { color:#fff; background:var(--action) !important; border:0 !important; border-radius:50% !important; box-shadow:0 8px 24px var(--action-shadow); }
.aether-ui .artwork-expand,.aether-ui .inspect-scene { top:12px; right:12px; border:1px solid #ffffff2e; border-radius:12px; background:#0e0f12b8; color:#fff; box-shadow:var(--shadow-1); backdrop-filter:blur(12px); font-size:12px; font-weight:600; }
.aether-ui .inspect-scene[aria-pressed="true"] { background:var(--action); border-color:transparent; color:var(--on-action); }
.aether-ui .creation-card .prose { color:var(--ink); font-size:15.5px; line-height:1.65; margin-top:14px; }
.aether-ui .creation-card[data-post-type="text"] .prose { color:var(--ink); font-size:22px; line-height:1.55; min-height:0; padding:12px 0 8px; }
.aether-ui .creation-card > .border-t { border-color:var(--line); margin-top:12px; padding-top:8px; }
.aether-ui .creation-actions { gap:4px; flex-wrap:wrap; }
.aether-ui .creation-actions button { color:var(--muted); font-size:13px; font-weight:600; border-radius:12px; padding:8px 10px; min-height:44px; gap:6px; }
.aether-ui .creation-actions button:hover { background:var(--chrome-soft); color:var(--ink); }
.aether-ui .creation-actions button:first-child { margin-left:-6px; }
.aether-ui .creation-actions svg { width:20px; height:20px; stroke-width:1.9; }
.aether-ui .creation-actions button[aria-pressed="true"],.aether-ui .creation-actions .liked { color:var(--accent); }
.aether-ui .creation-actions .like-btn[aria-pressed="true"] { color:#d6533a; }
.aether-ui .creation-actions button:nth-last-child(2) { margin-left:auto; }
html .aether-ui .creation-actions .support-creator-btn { color:var(--support-ink) !important; background:var(--support-soft) !important; border:1px solid var(--support-line) !important; border-radius:999px !important; padding:8px 14px !important; margin-left:auto; }
html .aether-ui .creation-actions .support-creator-btn:hover { filter:brightness(.97); }
.aether-ui .creation-actions .support-creator-btn svg { stroke-width:2.1; }
.aether-ui .creation-actions .support-creator-btn + button { margin-left:0; }
.aether-ui .post-comments { border-color:var(--line); margin-top:6px; padding-top:6px; }
.aether-ui .post-comments summary { color:var(--muted); font-size:13px; font-weight:600; min-height:40px; padding:6px 0; }
.aether-ui .comment-list > div { background:var(--chrome-soft); color:var(--ink); border-radius:12px; font-size:13px; }
.aether-ui .comment-input { background:var(--chrome-soft) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:999px !important; padding-inline:14px !important; }
.aether-ui .submit-comment-btn { background:var(--soft) !important; color:var(--accent) !important; border-radius:999px !important; font-weight:650; }
.aether-ui .workspace-empty { color:var(--muted); }

/* ============================================================ 5. Studio */
.aether-ui .project-heading { margin:0 0 16px; }
.aether-ui .project-identity h2 { display:none; }
.aether-ui #project-title { font-size:26px; font-weight:700; height:46px; letter-spacing:-.025em !important; color:var(--ink) !important; border-radius:10px; }
.aether-ui #project-title:hover { background:var(--surface) !important; border-color:var(--line) !important; padding-inline:8px; }
.aether-ui .save-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.aether-ui .save-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#2fbf71; flex-shrink:0; }
.studio-workbench { --chrome:var(--surface); --chrome-soft:var(--panel); --stage:var(--stage-color); background:var(--chrome); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-1); }
html[data-theme]:not([data-theme="default"]) .studio-workbench { --chrome-soft:var(--soft); }
.aether-ui .studio-workbench .project-workspace { padding:10px 14px; border-bottom:1px solid var(--line); }
.aether-ui .studio-workbench .post-type-btn { border-radius:14px !important; color:var(--muted) !important; }
.aether-ui .studio-workbench .post-type-btn:hover { background:var(--chrome-soft); color:var(--ink) !important; }
.aether-ui .studio-workbench .post-type-btn.active { background:var(--soft) !important; color:var(--accent) !important; }
.aether-ui .studio-workbench .post-type-btn svg { stroke-width:1.9; }
.aether-ui .studio-workbench .post-type-btn small { color:var(--muted); }
.aether-ui .studio-workbench .post-type-btn.active small { color:var(--accent); opacity:.85; }
.aether-ui .studio-workbench #project-compose { background:var(--soft); color:var(--accent); border-radius:12px; }
.aether-ui .studio-workbench .project-tray-actions button { border-radius:12px; }
.aether-ui .studio-workbench #shape-start-panel { background:var(--chrome-soft) !important; }
.aether-ui .studio-workbench #art-content-panel :where(button:not(.sequencer-step):not(.piano-key):not(.sound-clip):not(.film-clip):not(.film-key),select,input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"])) { border-radius:11px; }
.aether-ui .studio-workbench #art-content-panel :is(.tool-button.active,.mode-button.active,button[aria-pressed="true"]:not(.sequencer-step):not(.piano-key)) { background:var(--soft) !important; color:var(--accent) !important; border-color:var(--accent-line) !important; }
.aether-ui .studio-workbench #art-content-panel :is(#anim-play-pause,#audio-play-stop) { background:var(--action) !important; color:var(--on-action) !important; border-color:transparent !important; box-shadow:0 4px 14px var(--action-shadow); }
.aether-ui .studio-workbench #art-content-panel :is(#audio-play-stop[aria-pressed="true"],#draw-clear,#delete-object-btn,#film-delete) { color:var(--danger) !important; }
.aether-ui .studio-workbench #art-content-panel #audio-play-stop[aria-pressed="true"] { background:var(--danger-soft) !important; border-color:var(--danger-line) !important; box-shadow:none; }
.aether-ui .studio-workbench #art-content-panel :is(#draw-clear,#delete-object-btn,#film-delete):hover:not(:disabled) { background:var(--danger-soft) !important; color:var(--danger) !important; }
.aether-ui .studio-workbench :is(#three-canvas-container,[id="2d-content"],.film-stage-wrap) { border-radius:14px; }
.aether-ui .studio-workbench #sequencer { border-radius:14px; }
.aether-ui .studio-workbench .film-lane { border-radius:8px; }
.aether-ui .studio-workbench #object-selector-panel,.aether-ui .studio-workbench #anim-props-panel.film-inspector,.aether-ui .studio-workbench #sound-inspector { border-radius:14px !important; }
.aether-ui .studio-workbench #object-list li.active { border-color:var(--accent-line) !important; }
.aether-ui .studio-workbench :is(.viewport-dock,.film-stage-dock) { border-radius:14px; }
.aether-ui .studio-workbench .viewport-dock { box-shadow:var(--shadow-2); }
.aether-ui .model-camera-dock button,.aether-ui .studio-workbench #art-content-panel .model-camera-dock button { border-radius:14px; box-shadow:var(--shadow-1); }
.aether-ui .studio-workbench #art-content-panel .model-camera-dock button[aria-pressed="true"] { border-color:var(--accent-line) !important; }
.model-more-panel,.drawing-settings-panel,.aether-ui .studio-workbench .film-settings-disclosure[open] .film-settings,.aether-ui.focus-studio .workspace-immersive-shapes #shape-buttons { border-radius:16px; box-shadow:var(--shadow-2); background:var(--surface); border-color:var(--line); }
.aether-ui .studio-workbench .publish-actions { border-radius:0 0 22px 22px; background:var(--chrome); border-top:1px solid var(--line); }
.aether-ui .publish-actions { background:var(--chrome); }
.aether-ui .post-writing-shortcut,.aether-ui .studio-workbench #save-to-library-btn { border-radius:12px; color:var(--ink); }
.aether-ui .post-writing-shortcut:hover { border-color:var(--accent-line); color:var(--accent); }
.aether-ui .studio-workbench .writing-toolbar { background:var(--chrome); border-color:var(--line); }
.aether-ui .writing-toolbar { background:var(--chrome); border-color:var(--line); }
.aether-ui .writing-toolbar button,.aether-ui .writing-more summary,.aether-ui .writing-toolbar select { color:var(--muted) !important; border-radius:10px; }
.aether-ui .writing-toolbar button:hover,.aether-ui .writing-more summary:hover,.aether-ui .writing-more[open] summary { background:var(--chrome-soft); color:var(--ink); }
.aether-ui .studio-workbench .writing-toolbar button[aria-pressed="true"] { background:var(--soft); color:var(--accent); box-shadow:none; }
.aether-ui .writing-select > svg { color:var(--muted); }
.aether-ui .writing-more-panel,.aether-ui .writing-more > div { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-2); border-radius:14px; }
.aether-ui #writing-document,.aether-ui #writing-surface { background:transparent; }
.aether-ui #writing-editor,.aether-ui .writing-prose,.aether-ui .ql-editor { color:var(--ink); }
.aether-ui #writing-editor.ql-blank::before,.aether-ui .ql-editor.ql-blank::before { color:var(--muted); font-style:normal; }
.aether-ui #writing-editor a,.aether-ui .writing-prose a { color:var(--accent); }
.aether-ui #text-input-label,.aether-ui .word-count { color:var(--muted); }
.aether-ui #main-text-area { background:var(--chrome-soft) !important; color:var(--ink) !important; border-color:var(--line) !important; }
.aether-ui .film-inspector-sheet-bar,.model-inspector-sheet-bar { background:var(--chrome); }
.aether-ui #panel-3d > #model-inspector-dialog.model-inspector-sheet,.aether-ui #panel-animation > #film-inspector-dialog.film-inspector-sheet { border-radius:24px 24px 0 0; box-shadow:var(--shadow-2); }
.aether-ui .film-stage-dock #film-pose-save { background:var(--action); color:var(--on-action); }
.aether-ui .workspace-immersive-asset,.aether-ui .film-immersive-save { border-radius:12px; }
.model-gesture-help { border-radius:10px; }
.aether-ui .sound-keyboard-hint,.film-library-hint,.film-library-status { color:var(--muted); }
.aether-ui .film-library-grid .film-asset { background:var(--chrome-soft); color:var(--ink); border-color:var(--line); border-radius:14px; }
.aether-ui .film-library-grid .film-asset svg { color:var(--accent); }

/* ============================================================ 6. Profile */
.aether-ui #profile-view { max-width:880px; }
.aether-ui #profile-view > .profile-back-row { margin:4px 0 18px; }
.aether-ui #back-to-timeline-btn { color:var(--muted); border-radius:12px; padding:6px 10px 6px 6px; }
.aether-ui #back-to-timeline-btn:hover { color:var(--ink); background:var(--surface); }
.creator-profile { position:relative; grid-template-columns:104px minmax(0,1fr); gap:0 22px; padding:24px 24px 26px; border-radius:24px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); overflow:hidden; }
.creator-profile::before { content:''; position:absolute; inset:0 0 auto; height:72px; background:linear-gradient(120deg,var(--soft),transparent 70%); pointer-events:none; }
.profile-portrait { position:relative; width:104px; height:104px; font-size:44px; font-weight:700; color:#25322d; box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--line); }
.profile-identity { position:relative; padding-top:6px; }
.profile-eyebrow { color:var(--accent); font-weight:700; letter-spacing:.08em !important; }
.aether-ui #profile-author-name { color:var(--ink); font-size:34px; font-weight:750; }
#profile-handle { color:var(--muted); }
#profile-bio { color:var(--ink); }
.aether-ui #edit-profile { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; font-weight:600; }
.aether-ui #edit-profile:hover { border-color:var(--accent-line); color:var(--accent); }
.profile-stats { position:relative; grid-column:2; gap:12px; margin-top:22px; }
.profile-stats > div { flex-direction:column-reverse; gap:2px; padding:12px 16px; min-width:110px; background:var(--chrome-soft); border-radius:14px; }
.profile-stats dt { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.04em !important; text-transform:uppercase; }
.profile-stats dd { color:var(--ink); font-size:24px; font-weight:750; }
.profile-collection-header { border-bottom:1px solid var(--line); margin:24px 0 24px; }
.profile-tabs button { color:var(--muted); font-weight:600; font-size:14px; }
.profile-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
.profile-tabs svg:last-child { color:var(--muted); }
.aether-ui .profile-filters select { color:var(--muted) !important; font-weight:600; }
.aether-ui .profile-filters { border-color:var(--line); }
.aether-ui #profile-posts-container > .collection-empty,.aether-ui #timeline-container > .collection-empty { color:var(--muted); background:var(--surface) !important; border:1px dashed var(--line-strong) !important; border-radius:22px; }
.collection-empty h3 { color:var(--ink); font-weight:600; }
.aether-ui .collection-empty button { border-radius:999px; padding:10px 18px; }
.aether-ui .featured-label { color:var(--accent); }

/* ============================================================ 7. Dialogs, sheets, toasts, tooltips */
.aether-ui dialog { color-scheme:inherit; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-2); padding:24px; }
html[data-theme]:not([data-theme="default"]) .aether-ui dialog { background:#fff; }
.aether-ui dialog::backdrop { background:#0b0c1266; backdrop-filter:blur(8px) saturate(120%); }
.aether-ui dialog h2,.aether-ui dialog h3 { color:inherit; }
.aether-ui .auth-dialog { background:var(--surface); color:var(--ink); border-color:var(--line); border-radius:24px; }
.aether-ui .auth-dialog label,.aether-ui #auth-email { color:inherit; }
.aether-ui .auth-device-note,.aether-ui #auth-password-help,.aether-ui .creator-picker-results span,.aether-ui .support-work { color:var(--muted); }
.aether-ui #auth-mfa-secret { background:var(--chrome-soft); color:var(--ink); }
.aether-ui .creator-picker-results button { border-radius:14px; }
.aether-ui .support-availability { background:var(--chrome-soft); border-color:var(--line); border-radius:16px; }
.aether-ui .support-dialog .support-creator { color:var(--ink); }
.aether-ui #timeline-options { border-radius:24px; }
.aether-ui .timeline-options label { color:var(--muted); }
.aether-ui .timeline-options #timeline-options-count { color:var(--muted); }
.aether-ui .timeline-options #feed-snap { border-radius:12px; background:var(--surface); color:var(--ink); }
.aether-ui .timeline-options #feed-snap[aria-pressed="true"] { background:var(--soft); color:var(--accent); border-color:var(--accent-line); }
.aether-ui .project-row { border-color:var(--line); }
.aether-ui .project-row > button { border-radius:12px; }
.aether-ui .project-row > button:hover { background:var(--chrome-soft); }
.aether-ui .project-row span { color:var(--ink); }
.aether-ui .project-row small,#projects-dialog .project-row small { color:var(--muted); }
.aether-ui #save-project-copy { color:var(--ink); border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.aether-ui .project-library-footer p { color:var(--muted); }
.aether-ui .publication-preview { background:var(--chrome-soft); border-color:var(--line); border-radius:16px; }
.aether-ui .publication-inclusion,.aether-ui .publication-scope { color:var(--muted); }
.aether-ui .publication-error { color:var(--danger); }
.aether-ui .publication-media { color:var(--accent); }
.aether-ui .asset-name-dialog p,.aether-ui #profile-bio-count,.aether-ui #profile-form > label,.aether-ui #profile-featured-field label,.aether-ui #profile-form legend { color:var(--muted); }
.aether-ui #profile-save-error { color:var(--danger); }
.aether-ui .appearance-intro,.aether-ui .appearance-note { color:var(--muted); }
.aether-ui .theme-choice { border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); }
.aether-ui .theme-choice:has(input:checked) { border-color:var(--accent); background:var(--soft); box-shadow:inset 0 0 0 1px var(--accent); }
.aether-ui .theme-choice strong { color:var(--ink); }
.aether-ui .theme-choice small { color:var(--muted); }
.aether-ui #appearance-dialog .theme-choice input,.aether-ui #appearance-dialog .theme-motion input { accent-color:var(--accent); }
.aether-ui .theme-preview { border-radius:12px; border-color:var(--line); background:linear-gradient(135deg,#f4f1ea 0 48%,#1b1613 48% 52%,#e0805e 52%); }
.aether-ui .theme-preview[data-palette="starry"] { background:radial-gradient(circle at 25% 25%,#fff 1px,transparent 2px),radial-gradient(circle at 75% 60%,#aac5ff 2px,transparent 3px),linear-gradient(135deg,#0b1224,#29487c); }
.aether-ui .theme-preview[data-palette="solar"] { background:linear-gradient(135deg,#edf3dd 40%,#d7e8a3 40% 65%,#35603b 65%); }
.aether-ui .theme-preview[data-palette="cyber"] { background:linear-gradient(135deg,#140e22 45%,#edb2f4 46% 51%,#392547 52%); }
.aether-ui .theme-preview[data-palette="paper"] { background:linear-gradient(135deg,#efe4d3 60%,#895038 60%); }
.aether-ui .appearance-status { color:var(--danger); }
.aether-ui .toast { background:#17181c; color:#f2f2f5; border:1px solid #ffffff1f; border-radius:16px; box-shadow:var(--shadow-2); }
.aether-ui .toast[data-kind="error"] { background:#3a1c1a; color:#ffd9d4; border-color:#5f2b27; }
.aether-ui .studio-notice-close:hover { background:#ffffff14; }
.aether-ui .toast.in-dialog { box-shadow:none; }
#tool-tooltip { background:#17181c; color:#f2f2f5; border-radius:10px; box-shadow:var(--shadow-2); font-size:12px; }
.aether-ui .artwork-viewer { background:#0b0c0e; border-radius:20px; }
.artwork-close { background:#17181c; color:#fff; border:1px solid #ffffff2e; border-radius:12px; }
.aether-ui .film-export-dialog p { color:var(--muted); }

/* ============================================================ 8. Welcome hero */
.welcome-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:center; max-width:720px; margin:0 auto 28px; padding:28px 28px 26px; border-radius:24px; color:#fff; background:linear-gradient(120deg,#3b1d15 0%,#b9522f 48%,#f0a07c 100%); box-shadow:var(--shadow-2); overflow:hidden; isolation:isolate; }
.welcome-hero::before { content:''; position:absolute; inset:-40% -20% auto auto; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#ffd9a8aa,transparent 65%); filter:blur(20px); pointer-events:none; z-index:-1; }
.welcome-hero::after { content:''; position:absolute; inset:auto auto -50% -10%; width:55%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#9fe0d3aa,transparent 65%); filter:blur(24px); pointer-events:none; z-index:-1; }
.welcome-hero[hidden] { display:none; }
.welcome-copy { min-width:0; }
.welcome-eyebrow { margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.12em !important; text-transform:uppercase; color:#ffffffb8; }
.welcome-hero h2 { margin:0; font-size:clamp(26px,4.2vw,36px); line-height:1.08; font-weight:800; letter-spacing:-.03em !important; color:#fff; text-wrap:balance; }
.welcome-hero > .welcome-copy > p:last-child { margin:12px 0 0; max-width:46ch; font-size:14.5px; line-height:1.55; color:#ffffffd6; }
.welcome-tools { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; grid-column:1 / -1; }
.aether-ui .welcome-tools button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:66px; padding:8px 4px; border:1px solid #ffffff2b; border-radius:16px; background:#ffffff1a; color:#fff; font-size:12px; font-weight:650; backdrop-filter:blur(10px); }
.aether-ui .welcome-tools button:hover { background:#ffffff2e; border-color:#ffffff55; transform:translateY(-1px); }
.welcome-tools svg { width:22px; height:22px; stroke-width:1.9; }
.aether-ui .welcome-dismiss { position:absolute; top:12px; right:12px; width:40px; height:40px; min-height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#ffffff1f; color:#fff; font-size:22px; line-height:1; }
.aether-ui .welcome-dismiss:hover { background:#ffffff38; }
/* The hero is the first snap stop; a large margin clamps that stop to the very top. */
html.feed-snapping .welcome-hero { scroll-snap-align:start; scroll-margin-top:0; }

/* ============================================================ 9. Phone chrome (mobile first: most people arrive here) */
@media (max-width:760px) {
 .aether-ui > .container { padding:calc(72px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-left)) calc(104px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right)) !important; }
 .aether-ui header { width:100%; height:calc(60px + env(safe-area-inset-top)); padding:calc(8px + env(safe-area-inset-top)) 14px 8px !important; border-bottom:1px solid var(--line); background:transparent !important; }
 /* Blur sits on a pseudo-element: a filter on the bar itself would trap its fixed children. */
 .aether-ui header::before,.aether-ui nav::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--glass); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); }
 .aether-ui header::before { border-bottom:1px solid var(--line); }
 .brand-home { gap:9px; min-height:44px; }
 .brand-home > span:last-child { display:inline; font-size:22px; font-weight:750; letter-spacing:-.03em !important; color:var(--ink); }
 .brand-symbol { width:36px; height:36px; border-radius:12px; font-size:24px; box-shadow:0 4px 12px var(--action-shadow); }
 .aether-ui header h1 { font-size:22px !important; }
 /* Account and Options sit in the top bar; search joins the tab bar below. */
 .aether-ui nav #nav-account { left:auto; bottom:auto; top:calc(9px + env(safe-area-inset-top)); right:12px; width:auto; min-width:44px; min-height:42px; padding:0 14px !important; flex-direction:row; gap:6px; font-size:13px; border-radius:999px; background:var(--soft) !important; color:var(--accent) !important; box-shadow:none; }
 .aether-ui nav #nav-account::before { width:17px; height:17px; }
 #timeline-options-trigger { top:calc(8px + env(safe-area-inset-top)); right:auto; left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
 .aether-ui[data-view="timeline"] #timeline-options-trigger { right:calc(12px + 100px); }
 .aether-ui nav { width:100%; inset:auto 0 0 !important; padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important; background:transparent !important; border:0 !important; border-top:1px solid var(--line) !important; backdrop-filter:none !important; overflow:visible; }
 .aether-ui nav .primary-navigation { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
 .aether-ui nav #timeline-nav-btn { grid-column:1; }
 .aether-ui nav #creation-nav-btn { grid-column:3; }
 .aether-ui nav #nav-projects { grid-column:4; }
 .aether-ui nav #my-profile-btn { grid-column:5; }
 .aether-ui nav .nav-button { min-height:54px; padding:6px 2px !important; gap:4px; border-radius:14px; font-size:10.5px; }
 .aether-ui nav .nav-button svg { width:24px; height:24px; }
 .aether-ui nav .nav-button:hover { box-shadow:none; background:transparent !important; }
 .aether-ui nav .nav-button.active,.aether-ui nav .nav-button[aria-current="page"] { background:transparent !important; color:var(--accent) !important; }
 /* Raised Create action in the centre of the tab bar. */
 .aether-ui nav #creation-nav-btn { position:relative; margin:0; overflow:visible; background:transparent !important; box-shadow:none !important; color:var(--muted) !important; }
 .aether-ui nav #creation-nav-btn::before { content:''; position:absolute; top:-20px; left:50%; width:58px; height:58px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(135deg,var(--action),var(--action-2)); box-shadow:0 10px 24px var(--action-shadow),0 0 0 5px var(--paper); }
 .aether-ui nav #creation-nav-btn svg { position:absolute; top:-6px; left:50%; width:30px; height:30px; transform:translateX(-50%); color:var(--on-action); z-index:1; }
 .aether-ui nav #creation-nav-btn span { position:absolute; bottom:6px; left:0; right:0; text-align:center; }
 .aether-ui nav #creation-nav-btn.active,.aether-ui nav #creation-nav-btn[aria-current="page"] { color:var(--accent) !important; }
 .aether-ui nav #creation-nav-btn:active::before { transform:translateX(-50%) scale(.94); }
 .aether-ui nav .shell-search { position:static; grid-column:2; width:auto; height:auto; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 2px; border:0; border-radius:14px; background:transparent; color:var(--muted); box-shadow:none; backdrop-filter:none; font-size:10.5px; font-weight:600; }
 .aether-ui nav .shell-search span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; }
 .aether-ui nav .shell-search svg { width:24px; height:24px; }
 .aether-ui nav .shell-search:hover { color:var(--ink); }
 /* Until the script moves it, the header copy stays out of the way. */
 .aether-ui header .shell-search { top:calc(8px + env(safe-area-inset-top)); right:auto; left:-999px; }
 /* Studio */
 .aether-ui .project-heading { margin:0 0 12px; gap:8px; }
 .aether-ui #project-title { font-size:22px !important; height:44px; min-height:44px; }
 .aether-ui .studio-actions button,.aether-ui .project-menu > summary { border-radius:12px; }
 .studio-workbench { border-radius:18px; }
 .aether-ui .studio-workbench .project-workspace { padding:6px 6px 6px; }
 .aether-ui .studio-workbench .post-type-btn { min-height:56px !important; border-radius:12px !important; font-size:11px; }
 .aether-ui .studio-workbench .post-type-btn.has-content::after { background:var(--accent); }
 .aether-ui .studio-workbench .publish-actions { border-radius:0 0 18px 18px; }
 .aether-ui .publish-actions { bottom:calc(72px + env(safe-area-inset-bottom)); }
 .aether-ui #post-btn { padding:10px 14px !important; font-size:14px !important; }
 /* Feed */
 .aether-ui #timeline-container,.aether-ui #profile-posts-container { gap:16px; }
 .aether-ui #timeline-container > .creation-card,.aether-ui #profile-posts-container > .creation-card { padding:14px 14px 8px !important; border-radius:18px !important; }
 .aether-ui .creation-card .prose { font-size:15px; margin-top:12px; }
 .aether-ui .creation-card[data-post-type="text"] .prose { font-size:20px; }
 .aether-ui .post-media { margin-inline:0; border-radius:12px; }
 .aether-ui #timeline-container [id^="timeline-3d-"],.aether-ui #profile-posts-container [id^="timeline-3d-"] { width:100%; aspect-ratio:1; }
 .aether-ui .creation-actions { gap:0; }
 .aether-ui .creation-actions button { font-size:12px; padding:6px 8px; }
 .aether-ui .creation-actions button:first-child { margin-left:-4px; }
 html .aether-ui .creation-actions .support-creator-btn { padding:6px 12px !important; }
 .aether-ui .creation-meta { margin-bottom:12px !important; grid-template-columns:36px minmax(0,1fr); column-gap:10px; }
 .aether-ui .creator-avatar { width:36px; height:36px; font-size:14px; }
 /* Profile */
 .creator-profile { grid-template-columns:72px minmax(0,1fr); gap:0 14px; padding:18px 16px 18px; border-radius:20px; }
 .profile-portrait { width:72px; height:72px; font-size:30px; }
 .aether-ui #profile-author-name { font-size:26px; }
 .profile-stats { grid-column:1 / -1; gap:8px; max-width:none; margin-top:18px; }
 .profile-stats > div { flex:1; min-width:0; padding:10px 8px; align-items:center; text-align:center; }
 .profile-stats dd { font-size:20px; }
 .profile-collection-header { margin:18px 0 16px; }
 .aether-ui .toast:not(.in-dialog) { bottom:calc(150px + env(safe-area-inset-bottom)); }
 /* Dialogs become bottom sheets, within thumb reach. */
 .aether-ui dialog:not(.model-inspector-sheet):not(.film-inspector-sheet):not(.artwork-viewer) { width:100%; max-width:none; margin:auto 0 0; max-height:calc(100dvh - 40px - env(safe-area-inset-top)); padding:20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; border-bottom:0; animation:sheet-rise 240ms cubic-bezier(.2,.8,.2,1); }
 .aether-ui dialog:not(.model-inspector-sheet):not(.film-inspector-sheet):not(.artwork-viewer)::before { content:''; display:block; width:40px; height:4px; margin:-6px auto 14px; border-radius:2px; background:var(--line-strong); }
 .aether-ui #projects-dialog[open] { width:100%; max-height:calc(100dvh - 40px - env(safe-area-inset-top)); }
 .aether-ui .timeline-options,.aether-ui #appearance-dialog,.aether-ui #publication-review,.aether-ui #film-library-dialog,.aether-ui .asset-name-dialog,.aether-ui #edit-profile-dialog,.aether-ui .auth-dialog { width:100%; }
 .aether-ui .artwork-viewer { width:100vw; max-width:100vw; max-height:100dvh; border-radius:0; margin:0; }
 /* Welcome hero */
 .welcome-hero { grid-template-columns:minmax(0,1fr); gap:16px; margin:0 0 16px; padding:22px 18px 18px; border-radius:20px; }
 .welcome-hero > .welcome-copy > p:last-child { font-size:14px; }
 .welcome-tools { gap:6px; }
 .aether-ui .welcome-tools button { min-height:60px; font-size:11px; border-radius:14px; }
}
@keyframes sheet-rise { from { transform:translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
@media (max-width:360px) {
 .brand-home > span:last-child { display:none; }
 .aether-ui .creation-actions button:not(.support-creator-btn):not(.like-btn) span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .aether-ui .creation-actions button { position:relative; padding:6px; }
}
/* Short desktop rails keep every target reachable. */
@media (min-width:761px) and (max-height:600px) {
 .aether-ui nav .nav-button { min-height:48px; gap:3px; }
 .aether-ui nav #nav-account { bottom:12px; min-height:44px; }
}
@media (min-width:761px) and (max-width:1050px) {
 .aether-ui > .container { padding-left:calc(var(--rail) + 20px) !important; padding-right:24px !important; }
}
/* Immersive editors keep their own chrome tokens; no rail or search in the way. */
.aether-ui:is(.film-expanded,.focus-studio,.sound-expanded) .welcome-hero { display:none; }

/* ============================================================ 10. Motion and access */
@media (prefers-reduced-motion:reduce) {
 .aether-ui dialog { animation:none !important; }
 .aether-ui .welcome-tools button:hover { transform:none; }
}
@media (prefers-contrast:more) {
 .aether-ui { --line:#8b8f9a; --line-strong:#6f7380; --muted:#3f4450; }
}
@media (forced-colors:active) {
 .brand-symbol,.aether-ui nav #creation-nav-btn::before { background:ButtonText; }
 .welcome-hero { background:Canvas; color:CanvasText; border:1px solid CanvasText; }
}

/* ============================================================ 11. App feel: no stray selection, callouts or drags */
/* The page behaves like an app: text only selects inside fields and the writing editor. */
.aether-ui, .aether-ui * { -webkit-touch-callout:none; -webkit-user-drag:none; }
.aether-ui { user-select:none; -webkit-user-select:none; }
.aether-ui :is(input,textarea,select,[contenteditable="true"],.ql-editor,code),.aether-ui .ql-editor * { user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; }
.aether-ui :is(img,canvas,video,svg) { -webkit-user-drag:none; }
html { overscroll-behavior-y:none; }

/* ============================================================ 12. Writing: a sheet of paper, not a form field */
.aether-ui[data-tool="text"] #writing-area,.aether-ui .studio-workbench #writing-area { max-width:760px; margin:20px auto 8px; padding:36px 44px 48px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-1); }
.aether-ui .studio-workbench .caption-heading { max-width:none; margin:0 0 14px; align-items:baseline; }
.aether-ui #text-input-label { font-size:11px; font-weight:700; letter-spacing:.1em !important; text-transform:uppercase; color:var(--muted); }
.aether-ui .word-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.aether-ui .studio-workbench .writing-toolbar,.aether-ui .writing-toolbar { top:12px; z-index:14; gap:2px 6px; padding:6px; border:1px solid var(--line) !important; border-radius:16px; background:var(--glass-strong); box-shadow:var(--shadow-1); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); }
.aether-ui .writing-type-controls { gap:4px; }
.aether-ui .writing-select { width:112px; }
.aether-ui .writing-select:last-child { width:74px; }
.aether-ui .writing-toolbar select { height:40px; min-height:40px; padding:6px 22px 6px 10px; border-radius:10px; color:var(--ink) !important; font-size:13px; font-weight:600; }
.aether-ui .writing-toolbar select:hover,.aether-ui .writing-toolbar button:hover,.aether-ui .writing-more summary:hover { background:var(--chrome-soft) !important; }
.aether-ui .writing-select > svg { top:14px; right:8px; color:var(--muted); }
.aether-ui .writing-toolbar button,.aether-ui .writing-more summary { width:40px; min-width:40px; min-height:40px; height:40px; border-radius:10px; color:var(--ink) !important; }
.aether-ui .writing-toolbar button svg,.aether-ui .writing-more summary svg { width:18px; height:18px; stroke-width:2; }
.aether-ui .writing-toolbar button:disabled { color:var(--muted) !important; opacity:.45 !important; }
.aether-ui .studio-workbench .writing-toolbar button[aria-pressed="true"],.aether-ui .writing-toolbar button[aria-pressed="true"] { background:var(--soft) !important; color:var(--accent) !important; box-shadow:none; }
.aether-ui .writing-more-menu { border-radius:14px; padding:6px; background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-2); }
.aether-ui .writing-more-menu button { width:100%; height:auto; min-height:44px; border-radius:10px; }
.aether-ui .studio-workbench :is(#writing-document,.caption-heading) { max-width:none; }
.aether-ui .studio-workbench #writing-editor,.aether-ui #writing-editor { padding:28px 0 60px; min-height:max(340px,46dvh); font-size:19px; line-height:1.75; color:var(--ink); caret-color:var(--accent); }
.aether-ui #writing-document { font-size:19px; }
.aether-ui .studio-workbench #writing-editor.ql-blank::before,.aether-ui #writing-editor.ql-blank::before { left:0; right:0; font-size:26px; font-weight:600; letter-spacing:-.02em !important; color:var(--muted); opacity:.75; font-style:normal; }
.aether-ui #writing-editor h1,.aether-ui .writing-prose h1 { font-size:40px; letter-spacing:-.03em !important; font-weight:750; }
.aether-ui #writing-editor h2,.aether-ui .writing-prose h2 { font-size:30px; letter-spacing:-.025em !important; }
.aether-ui #writing-editor h3,.aether-ui .writing-prose h3 { font-size:23px; }
.aether-ui #writing-editor a,.aether-ui .writing-prose a { color:var(--accent); text-decoration-color:var(--accent-line); }
.aether-ui .writing-font-serif { font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; }
.aether-ui .writing-font-monospace { font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace; }
.aether-ui .creation-card .writing-prose { font-size:19px; line-height:1.75; }
.aether-ui .creation-card .writing-prose h1 { font-size:30px; }
.aether-ui .creation-card .writing-prose h2 { font-size:24px; }
.aether-ui .creation-card .writing-prose h3 { font-size:20px; }
.aether-ui #writing-link-dialog { border-radius:24px; }
#writing-link-form label { color:var(--muted); }
#writing-link-error { color:var(--danger); }
.aether-ui .writing-link-save { background:var(--action); color:var(--on-action); border-radius:12px; }
.aether-ui #writing-unlink { color:var(--danger); }
.aether-ui[data-tool="text"] .studio-workbench .publish-actions { max-width:none; }
@media (max-width:760px) {
 .aether-ui[data-tool="text"] #writing-area,.aether-ui .studio-workbench #writing-area { margin:8px 0 0; padding:18px 18px 36px; border-radius:18px; }
 .aether-ui .studio-workbench .writing-toolbar,.aether-ui .writing-toolbar { top:calc(66px + env(safe-area-inset-top)); gap:4px; padding:6px; border-radius:16px; }
 .aether-ui .writing-type-controls { width:100%; gap:4px; }
 .aether-ui .writing-select { width:40%; flex:1 1 0; }
 .aether-ui .writing-select:last-child { width:22%; flex:0 0 78px; }
 .aether-ui .writing-toolbar select { font-size:15px; height:42px; min-height:42px; }
 .aether-ui .writing-inline-controls { justify-content:space-between; }
 .aether-ui .writing-inline-controls > button,.aether-ui .writing-more summary { width:100%; max-width:none; height:44px; min-height:44px; border-radius:12px; }
 .aether-ui .studio-workbench #writing-editor,.aether-ui #writing-editor { padding:20px 0 40px; min-height:max(300px,40dvh); font-size:18px; line-height:1.7; }
 .aether-ui .studio-workbench #writing-editor.ql-blank::before,.aether-ui #writing-editor.ql-blank::before { font-size:22px; left:0; right:0; }
 .aether-ui #writing-editor h1 { font-size:32px; }
 .aether-ui #writing-editor h2 { font-size:25px; }
 .aether-ui .creation-card .writing-prose { font-size:18px; }
}

/* ============================================================ 13. Experience: ambient light, motion and feedback */
html, body.aether-ui { --aurora-1:#f8cdb8c4; --aurora-2:#ffe3c9b0; --aurora-3:#cfe6e0b8; }
@media (prefers-color-scheme:dark) {
 html:not([data-theme]), html[data-theme="default"], html:not([data-theme]) body.aether-ui, html[data-theme="default"] body.aether-ui { --aurora-1:#5a2a1fcc; --aurora-2:#3d2a12b3; --aurora-3:#123632b3; }
}
/* A slow aurora behind the paper. Only the transform animates, so the blur is rasterised once. */
html[data-theme="default"] body.aether-ui::before, html:not([data-theme]) body.aether-ui::before {
 content:''; display:block; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
 background:radial-gradient(38% 34% at 18% 16%,var(--aurora-1),transparent 65%),radial-gradient(34% 30% at 82% 14%,var(--aurora-2),transparent 65%),radial-gradient(44% 40% at 58% 92%,var(--aurora-3),transparent 65%);
 filter:blur(48px); will-change:transform; animation:aurora 28s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform:translate3d(-2%,-1%,0) scale(1); } 50% { transform:translate3d(1.5%,2%,0) scale(1.06); } to { transform:translate3d(2.5%,-2%,0) scale(1.02); } }
html[data-theme-motion="off"] body.aether-ui::before { animation-play-state:paused; }
/* Views arrive; cards settle in one after another. */
.aether-ui :is(#timeline-view,#creation-view,#profile-view):not(.hidden) { animation:view-in 360ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes view-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.aether-ui #timeline-container > .creation-card,.aether-ui #profile-posts-container > .creation-card { animation:card-in 520ms cubic-bezier(.2,.8,.2,1) both; }
.aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card:nth-child(2) { animation-delay:70ms; }
.aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card:nth-child(3) { animation-delay:140ms; }
.aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card:nth-child(4) { animation-delay:210ms; }
.aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card:nth-child(n+5) { animation-delay:260ms; }
@keyframes card-in { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
.welcome-hero::before { animation:drift-a 18s ease-in-out infinite alternate; }
.welcome-hero::after { animation:drift-b 22s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform:translate3d(-12%,10%,0) scale(1.15); } }
@keyframes drift-b { to { transform:translate3d(14%,-12%,0) scale(1.1); } }
/* Feedback: hearts pop, the Post button gleams, toasts rise, Create breathes on phones. */
.aether-ui .creation-actions .like-btn.press-confirmed svg { animation:heart-pop 460ms cubic-bezier(.2,.8,.2,1); }
@keyframes heart-pop { 0% { transform:scale(.6); } 45% { transform:scale(1.45) rotate(-8deg); filter:drop-shadow(0 0 8px #e0805e99); } 100% { transform:scale(1); } }
.aether-ui #post-btn,.aether-ui #create-new-post-btn { position:relative; overflow:hidden; }
.aether-ui #post-btn::after,.aether-ui #create-new-post-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%); transform:translateX(-120%); transition:transform 700ms ease; pointer-events:none; }
.aether-ui #post-btn:hover::after,.aether-ui #create-new-post-btn:hover::after { transform:translateX(120%); }
.aether-ui .toast:not([hidden]):not(.in-dialog) { animation:toast-in 320ms cubic-bezier(.2,.8,.2,1); }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
.brand-symbol { transition:transform 300ms cubic-bezier(.2,.8,.2,1); }
.brand-home:hover .brand-symbol { transform:rotate(-6deg) scale(1.06); }
@media (max-width:760px) {
 .aether-ui nav #creation-nav-btn::before { animation:create-breathe 4.5s ease-in-out infinite; }
 @keyframes create-breathe { 0%,100% { box-shadow:0 10px 24px var(--action-shadow),0 0 0 5px var(--paper); } 50% { box-shadow:0 12px 34px var(--action-shadow),0 0 0 5px var(--paper),0 0 0 12px #e0805e1f; } }
}
@media (prefers-reduced-motion:reduce) {
 body.aether-ui::before,.welcome-hero::before,.welcome-hero::after,.aether-ui nav #creation-nav-btn::before { animation:none !important; }
 .aether-ui :is(#timeline-view,#creation-view,#profile-view):not(.hidden),.aether-ui :is(#timeline-container,#profile-posts-container) > .creation-card { animation:none !important; }
 .aether-ui #post-btn::after,.aether-ui #create-new-post-btn::after { display:none; }
}

/* ============================================================ 14. Hosted social: consent, privacy, reports */
.aether-ui .auth-check { display:flex; align-items:flex-start; gap:10px; margin:14px 0 4px; font-weight:500; line-height:1.5; }
.aether-ui .auth-check input { width:20px; height:20px; min-height:20px; flex:0 0 20px; margin-top:2px; accent-color:var(--accent); }
.aether-ui #auth-consent[hidden],.aether-ui #auth-privacy[hidden] { display:none; }
.aether-ui #auth-consent-help,.aether-ui #auth-privacy p { color:var(--muted); font-size:13px; line-height:1.5; margin-top:6px; }
.aether-ui #auth-privacy { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.aether-ui #auth-privacy h3 { font-size:15px; font-weight:650; margin:0 0 4px; }
.aether-ui #auth-delete-account { color:var(--danger); border-color:var(--danger-line); }
.aether-ui .consent-dialog,.aether-ui .report-dialog { width:min(440px,calc(100vw - 24px)); }
.aether-ui .consent-dialog label,.aether-ui .report-dialog label { display:block; margin:14px 0 6px; font-weight:600; }
.aether-ui .consent-dialog input[type="number"],.aether-ui .report-dialog select,.aether-ui .report-dialog textarea { width:100%; min-height:44px; padding:10px 12px; font-size:16px; border:1px solid var(--line); border-radius:12px; background:var(--chrome-soft); color:var(--ink); }
.aether-ui .consent-submit,.aether-ui .report-dialog button[type="submit"] { width:100%; margin-top:16px; background:var(--action) !important; color:var(--on-action) !important; border:0; border-radius:12px; font-weight:650; }
.aether-ui .creation-actions .hosted-action { color:var(--muted); font-size:12px; }
.aether-ui .feed-load-more { display:block; width:min(720px,100%); margin:8px auto 24px; min-height:48px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font-weight:600; }
.aether-ui .feed-load-more:hover { border-color:var(--accent-line); color:var(--accent); }
.aether-ui .feed-load-more[hidden] { display:none; }
@media (max-width:760px) { .aether-ui .consent-dialog,.aether-ui .report-dialog { width:100%; } }

/* ============================================================ 15. Account dialog and timeline options, decluttered */
.aether-ui .auth-dialog { padding:22px 22px 20px; }
.aether-ui .auth-top h2 { font-size:22px; }
.aether-ui .auth-dialog label { margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--muted); }
.aether-ui .auth-dialog #auth-name-help,.aether-ui .auth-dialog #auth-password-help,.aether-ui #auth-consent-help { margin-top:6px; font-size:12px; color:var(--muted); }
.aether-ui .auth-dialog .auth-device-note { margin-top:14px; font-size:12px; text-align:center; }
.aether-ui .auth-dialog .auth-links { margin-top:10px; }
.aether-ui .auth-dialog .auth-links button { border:0; background:transparent; color:var(--accent); font-weight:600; min-height:40px; }
.aether-ui .auth-dialog .auth-links button:hover { background:var(--chrome-soft); }
.aether-ui .auth-dialog #auth-google { margin-top:10px; }
.aether-ui .auth-dialog #auth-email { margin-top:14px; font-size:15px; }
.aether-ui .auth-dialog #auth-verification { margin-top:4px; font-size:13px; color:var(--muted); }
.aether-ui .auth-dialog #auth-mfa-state:empty { display:none; }
.aether-ui .auth-dialog #auth-mfa-state { margin-top:10px; font-size:13px; color:var(--muted); }
.aether-ui .auth-dialog .auth-buttons { gap:6px; }
.aether-ui .auth-dialog .auth-buttons button { flex:1 1 auto; font-size:13px; padding:8px 10px; }
.aether-ui .auth-dialog #auth-name-form button { margin-top:8px; margin-right:6px; font-size:13px; }
.aether-ui #auth-privacy { margin-top:18px; padding-top:14px; }
.aether-ui #auth-privacy p { margin:0 0 8px; }
.aether-ui .auth-dialog #auth-status { margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--soft); color:var(--ink); font-size:13px; }
.aether-ui .auth-dialog #auth-status:empty { display:none; padding:0; }

.aether-ui .timeline-options { width:min(420px,calc(100vw - 24px)); padding:20px 20px 18px; }
.aether-ui .timeline-options-heading { margin-bottom:14px; }
.aether-ui .timeline-options-heading h2 { font-size:20px; }
.aether-ui .timeline-options .feed-controls { grid-template-columns:1fr 1fr; gap:10px; margin:0 0 10px; }
.aether-ui .timeline-options label { gap:5px; font-size:12px; font-weight:600; letter-spacing:.04em !important; text-transform:uppercase; }
.aether-ui .timeline-options .feed-controls select { font-size:15px; font-weight:600; color:var(--ink) !important; border-radius:12px; background:var(--chrome-soft) !important; }
.aether-ui .timeline-options-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.aether-ui .timeline-options-fields > .feed-controls { grid-column:1 / -1; }
.aether-ui .timeline-options #feed-snap,.aether-ui .timeline-find-creator,.aether-ui .timeline-options-fields > .appearance-open { margin:0; width:100%; min-height:46px; justify-content:center; gap:8px; font-size:13px; font-weight:600; border-radius:12px; }
.aether-ui .timeline-options #feed-snap { grid-column:1 / -1; justify-content:flex-start; }
.aether-ui .timeline-options #feed-snap[aria-pressed="true"]::after { content:'On'; margin-left:auto; font-size:12px; color:var(--accent); }
.aether-ui .timeline-options #feed-snap:not([aria-pressed="true"])::after { content:'Off'; margin-left:auto; font-size:12px; color:var(--muted); }
.aether-ui .timeline-options #timeline-options-count { margin:12px 0 10px; text-align:center; font-size:12px; }
.aether-ui .timeline-options-done { border-radius:12px; }

/* ============================================================ 16. Model tool: starters and first-run guidance */
.aether-ui .shape-row-divider { align-self:center; flex:0 0 1px; width:1px; height:24px; margin:0 6px; background:var(--line-strong); }
.aether-ui .starter-btn { color:var(--accent) !important; font-weight:600; }
.aether-ui .starter-btn::before { content:'✦ '; font-size:11px; }
.aether-ui .shape-choices #shape-buttons .shape-row-divider,.aether-ui.focus-studio .workspace-immersive-shapes #shape-buttons .shape-row-divider { grid-column:1 / -1; width:auto; height:1px; margin:2px 0; }
.model-empty-state { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:6px; padding:24px 24px 90px; text-align:center; color:#f6efe8; pointer-events:none; }
.model-empty-state strong { font-size:20px; letter-spacing:-.01em; }
.model-empty-state span { max-width:320px; font-size:13px; line-height:1.5; color:#d8cfc7; }
.model-empty-state[hidden] { display:none; }

/* ============================================================ 17. Sound tool: tempo up front, note names, musical ruler */
.aether-ui #panel-audio .sound-tempo { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
.aether-ui #panel-audio .sound-tempo input[type="range"] { width:120px; max-width:none; margin:0; }
.aether-ui #panel-audio .sound-tempo #bpm-display { width:auto; min-width:58px; color:var(--ink); font-variant-numeric:tabular-nums; }
.aether-ui #panel-audio .sound-tempo #bpm-display::after { content:' BPM'; color:var(--muted); }
.aether-ui #panel-audio .sound-switcher #sound-clock { margin-left:0; }
.aether-ui .sound-starters [data-starter="surprise"] { border-style:dashed; }
@media (min-width:761px) {
    .aether-ui #sequencer .sound-step-row .sound-row-label { display:flex; align-items:center; justify-content:flex-end; width:28px; flex-shrink:0; font-size:11px; color:#bdcbbf; }
    .aether-ui #sequencer .sequence-ruler { padding-left:32px; }
}
@media (max-width:760px) {
    .aether-ui #panel-audio .sound-tempo { flex-basis:100%; margin-left:0; order:4; }
    .aether-ui #panel-audio .sound-tempo input[type="range"] { flex:1; width:auto; }
}

/* ============================================================ 18. Card actions: four in the row, the rest under More */
.aether-ui .creation-actions > button:nth-last-child(2) { margin-left:0; }
.aether-ui .creation-actions .card-menu-wrap { position:relative; margin-left:auto; }
.aether-ui .creation-actions .card-more { min-width:44px; justify-content:center; }
.aether-ui .creation-actions .card-more[aria-expanded="true"] { background:var(--chrome-soft); color:var(--ink); }
.aether-ui .card-menu { position:absolute; right:0; bottom:calc(100% + 6px); z-index:30; min-width:200px; display:grid; gap:4px; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-2); animation:card-menu-in 160ms ease-out; }
@keyframes card-menu-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.aether-ui .card-menu[hidden] { display:none; }
.aether-ui .creation-actions .card-menu button { width:100%; justify-content:flex-start; margin:0 !important; padding:10px 12px !important; border-radius:10px !important; }
html .aether-ui .creation-actions .card-menu .support-creator-btn { border-radius:10px !important; }
.aether-ui .creation-actions .card-menu .hosted-action { color:var(--muted); }
.aether-ui .creation-actions .card-menu button span { position:static !important; width:auto !important; height:auto !important; clip-path:none !important; overflow:visible !important; }
.aether-ui #back-to-timeline-btn[hidden] { display:none !important; }

/* ============================================================ 19. Support up front, a friendlier comment thread */
html .aether-ui .creation-actions .support-creator-btn.support-emphasis { color:var(--on-action) !important; background:var(--action) !important; border-color:transparent !important; box-shadow:0 6px 18px var(--action-shadow); margin-left:auto; padding:8px 16px !important; }
html .aether-ui .creation-actions .support-creator-btn.support-emphasis:hover { filter:brightness(1.04); }
.aether-ui .creation-actions .support-creator-btn.support-emphasis + .card-menu-wrap { margin-left:4px; }
.aether-ui .creation-actions .support-creator-btn.support-emphasis span { position:static !important; width:auto !important; height:auto !important; clip-path:none !important; overflow:visible !important; }
.aether-ui .post-comments { margin-top:10px; padding-top:10px; }
.aether-ui .post-comments summary { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--chrome-soft); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; }
.aether-ui .post-comments summary::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--action); }
.aether-ui .post-comments[open] summary { margin-bottom:10px; }
.aether-ui .comment-list { display:grid; gap:8px; max-height:none; }
.aether-ui .comment-list > div { padding:10px 14px; border-radius:16px 16px 16px 4px; background:var(--chrome-soft); color:var(--ink); font-size:13px; line-height:1.5; }
.aether-ui .comment-list > .remake-reply-card { grid-template-columns:1fr; gap:4px; padding:12px 14px; border:1px solid var(--accent-line) !important; border-radius:16px !important; background:var(--soft) !important; color:var(--ink) !important; }
.aether-ui .remake-reply-card .remake-badge { justify-self:start; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.aether-ui .remake-reply-card strong { color:var(--ink); font-size:13px; }
.aether-ui .remake-reply-card span { color:var(--muted); font-size:13px; }
.aether-ui .remake-reply-card img { border-radius:10px; margin-top:4px; }
.aether-ui .post-comments .comment-input { min-height:44px; }
.aether-ui .post-comments .submit-comment-btn { padding:0 16px !important; }
.aether-ui .remake-reply-start,.aether-ui .remake-original { border-radius:999px; font-size:13px; }