/* Shared foundation: clean paper, graphite type and a considered teal accent. */
:root{
 --paper:#fff;--white:#fff;--ink:#202c2d;--dark:#202c2d;
 --muted:#75807b;--line:#e4e9e5;--soft:#f3f6f3;
 --accent:#244c48;--accent-dark:#173c38;--blue:#46625f;--red:#a44a42;
 --shadow:0 8px 26px #20302b08;--motion-fast:180ms;
 color:#202c2d;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body,.shell{background:#fff;color:var(--ink)}
.topbar,body:not(.home-mode) .topbar{background:#fffffffa;border-bottom:1px solid #edf0ed;backdrop-filter:blur(14px)}
.brand{gap:11px;transition:opacity var(--motion-fast) ease}
.brand:hover{opacity:.82}
.brand-symbol,.brand-image{width:46px;height:46px;flex-shrink:0}
.brand-image{background:transparent}
.brand-name{gap:3px}
.brand-name strong{color:#263d37;font-size:23px;line-height:1.15;letter-spacing:.055em;font-weight:650}
.brand-name small{color:#7a847d;font-size:10px;line-height:1.3;letter-spacing:.07em}
.breadcrumb,body:not(.home-mode) .breadcrumb,.breadcrumb>a,body:not(.home-mode) .breadcrumb>a{color:#7a847e}
.breadcrumb strong,body:not(.home-mode) .breadcrumb strong{color:#3e4942}
.breadcrumb>span{color:#c8cfca}
.breadcrumb>a{transition:color var(--motion-fast) ease}
.breadcrumb>a:hover{color:#244c48}
.personal-entry{border-radius:10px;color:#59665f;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease}
.personal-entry .avatar{background:#f1f5f1;color:#36534b;border-radius:9px}
.personal-entry:hover,.personal-entry.active{background:#f5f7f4;border-color:#e4e9e2;color:#244c48}
.personal-entry:active{transform:translateY(1px)}
.avatar{background:#f1f5f1;color:#36534b}
.footer,.main:not(.page-home) .footer{border-top-color:#e8ece6;color:#7a847d}
.footer button,.main:not(.page-home) .footer button{color:#748078;transition:color var(--motion-fast) ease}
.footer button:hover,.main:not(.page-home) .footer button:hover{color:#244c48}
body :is(button,a,summary):focus-visible{outline:2px solid #52776d;outline-offset:3px}
.skip-link{background:#244c48;color:#fff}
.btn{border-radius:10px;box-shadow:none;font-weight:550;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.btn:not(.secondary):not(.soft){background:#244c48;border-color:#244c48;color:#fff}
.btn:not(.secondary):not(.soft):hover{background:#173c38;border-color:#173c38;box-shadow:0 3px 9px #173c3810}
body .btn.secondary{color:#36564b;background:#fff;border-color:#dce4dd}
body .btn.secondary:hover{color:#244c48;background:#f6f8f5;border-color:#c9d4cb}
body .btn.soft{background:#eff4ef;color:#244c48;border-color:transparent}
body .btn.soft:hover{background:#e7efe8;color:#173c38}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:disabled,.btn:disabled:hover,.btn:disabled:active{box-shadow:none;transform:none}
.link-btn,.auth-switch button{color:#365e51;transition:color var(--motion-fast) ease}
.link-btn:hover,.auth-switch button:hover{color:#173c38}
.pill{border-radius:7px;color:#657166;border-color:#e2e8e0;background:#fff}
.skeleton{background:linear-gradient(100deg,#eff3ef 20%,#f9faf7 45%,#eff3ef 70%);background-size:200% 100%;border-radius:12px}
.confetti i{background:#62aa98;width:5px;height:8px}
.confetti i:nth-child(3n){background:#e29967}
.confetti i:nth-child(3n+1){background:#edc360}
.confetti i:nth-child(4n){background:#244c48}
.confetti i:nth-child(n+17){display:none}

/* Original illustrations retain their soft colors and hand-drawn detail. */
:is(.topic-tile img,.page-illustration,.balance-art,.topic-image,.hub-image,.generation-result>img,.mascot,.hub-fallback,.palace-art,.topic-illustration>svg){filter:none}

/* A quiet welcome with a single, stable writing surface. */
.generation-home{max-width:800px;gap:16px}
.workspace-title strong{color:#657068;font-weight:500;font-size:12px;letter-spacing:.035em}
.workspace-actions{gap:8px}
.workspace-actions button{min-height:34px;padding:8px 11px;color:#7b857f;border-radius:8px;transition:color var(--motion-fast) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease}
.workspace-actions button:hover{background:#f5f7f3;color:#365b4c}
.workspace-actions button:active{transform:translateY(1px)}
.workspace-actions .icon{width:15px;height:15px;flex-shrink:0;stroke-width:1.7}
.workspace-actions .history-toggle{background:#fafbf8;border-color:#e7ebe4}
.workspace-actions .history-toggle[aria-expanded=true]{background:#eff4ee;border-color:#d5e0d1;color:#2f5648}
.generation-stage{background:#fff;border-radius:0;padding:22px 20px 26px;margin-bottom:-16px}
.generation-welcome{gap:20px}
.studio-emblem{width:128px;height:94px}
.generation-welcome h1{color:#25352f;font-size:38px;line-height:1.45;letter-spacing:.01em;font-weight:600}
.generation-composer{background:#fff;border-radius:0;padding:0 20px 18px}
.generation-composer:before,.generation-composer:focus-within:before{inset:0 20px 18px;background:#fff;border-color:#d9e1d7;border-radius:10px;box-shadow:none;transition:none}
.generation-composer textarea{color:#28392f;line-height:1.85;font-size:15px;padding:19px 20px 0}
.generation-composer textarea::placeholder{color:#909991}
.generation-composer textarea:focus-visible{outline:none}
.composer-bottom{padding:10px 20px 17px}
.composer-level{background:#f7f9f5;border-color:#e5eae1;color:#6a7667;border-radius:7px}
.composer-level select{color:#486047}
.composer-cost{color:#89918b}
.generation-send{min-height:40px;border-radius:9px;background:#244c48;border-color:#244c48;box-shadow:none;font-weight:500;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.generation-send:hover{background:#173c38;border-color:#173c38;box-shadow:0 3px 9px #173c3810}
.generation-send .icon{transition:transform var(--motion-fast) ease}
.generation-send:hover .icon{transform:translateX(2px)}
.generation-send:active{transform:translateY(1px);box-shadow:none}
.generation-send:disabled,.is-generating .generation-send:disabled{background:#98aaa0;border-color:#98aaa0;color:#fff;box-shadow:none;transform:none}
.generation-send:disabled .icon{transform:none}
.composer-error{color:#9d4e40;border-top-color:#f0e3dd}
.generation-composer:has(.composer-error:not([hidden])):before{border-color:#c89782}
.suggestion-row{gap:12px}
.generation-home .topic-suggestion{background:#fff;border-color:#e8ece5;border-radius:12px;min-height:80px;padding:13px 15px;gap:12px;box-shadow:none;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease}
.generation-home .topic-suggestion:hover{background:#fcfdfb;border-color:#cedacf;box-shadow:0 5px 15px #20302b06;transform:translateY(-2px)}
.generation-home .topic-suggestion:active{transform:translateY(0);box-shadow:none}
.generation-home .suggestion-image{width:48px;height:48px;object-fit:contain;border-radius:0;filter:none;transition:transform var(--motion-fast) ease}
.generation-home .topic-suggestion:hover .suggestion-image{transform:translateY(-1px)}
.generation-home .topic-suggestion strong{color:#52614f;font-weight:500;font-size:13px}
.workspace-footnote,.workspace-footnote p{color:#8a9486}
.reference-preview{color:#718367;transition:color var(--motion-fast) ease}
.reference-preview:hover{color:#244c48}

/* Generated work and records use readable, restrained status colors. */
.has-conversation .generation-stage{background:transparent;padding:0}
.has-conversation .generation-composer,.has-conversation .generation-composer:focus-within{background:#fff;border-color:#d9e1d7;border-radius:10px;box-shadow:none;outline:0;transition:none}
.generation-thread{padding-top:12px;padding-bottom:18px}
.message-avatar.assistant{background:#f1f6f0;border-color:#e1e9df;color:#365e49;border-radius:9px}
.message-avatar.user{background:#f0f3ed;color:#65755d}
.conversation-prompt>div{background:#f7f9f3;border-color:#e5eade;border-radius:14px 3px 14px 14px}
.conversation-prompt p{color:#43533d}
.message-label{color:#3d5140}
.message-label small{color:#8b9489}
.assistant-badge{background:#fafbf7;border-color:#e8ecdf;color:#86917c}
.response-copy,.generation-status{color:#75806e}
.response-copy{line-height:1.9}
.generation-steps{gap:7px;margin-top:17px;margin-bottom:15px}
.generation-steps>span{background:#fafbf7;border-color:#e7ebdf;color:#91998a;border-radius:7px}
.generation-steps b{border-color:#dde3d5;color:#91998a}
.generation-steps>span.active{background:#f0f6f0;border-color:#cfdfd3;color:#3e6658}
.generation-steps>span.active b{background:#507860;border-color:#507860}
.generation-steps>span.done{background:#f8faf5;border-color:#e2e9df;color:#78917f}
.generation-result{background:#fff;border-color:#e0e7da;border-radius:12px;box-shadow:0 4px 15px #2a3f2504;margin-top:18px}
.generation-result>img{background:#f6f8f0}
.result-copy{padding:20px 24px;gap:8px}
.result-copy h2{color:#31452e;font-weight:550;font-size:20px;line-height:1.5;letter-spacing:0}
.result-copy>span,.result-copy p,.result-usage{color:#8b9386}
.result-copy .btn{min-height:36px;font-size:11px;gap:12px}
.generation-error{background:#fffaf6;border-color:#f0e2d7;color:#a16c4d;border-radius:10px}
.retry-generation,.retry-history{background:#f7f9f0;border-color:#e0e8d5;color:#65815a;border-radius:8px;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease}
.retry-generation:hover,.retry-history:hover{background:#eff4e7;border-color:#cdddbb;color:#436738}
.retry-generation:active,.retry-history:active{transform:translateY(1px)}
.loading-dot{background:#5c7e50;box-shadow:0 0 0 4px #edf3e6;animation-name:refined-breathe}
.generation-history{background:#fff;border-color:#e2e8db;border-radius:14px;box-shadow:0 18px 48px #2337250d,0 3px 12px #23372504;width:344px}
.history-head{padding:20px;border-bottom-color:#edf0e8}
.history-head strong{color:#374d31;font-weight:550;font-size:14px;letter-spacing:.01em}
.history-head small,.history-item>span{color:#91998a}
.close-history{background:#fafbf7;border-color:#e7ebdf;color:#859279;border-radius:8px;width:30px;height:30px;transition:background var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease}
.close-history:hover{background:#f0f5e9;color:#527342}
.close-history:active{transform:translateY(1px)}
.generation-history-list{padding:12px;gap:8px}
.history-item{background:#fff;border-color:#ebefe3;border-radius:9px;padding:14px;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease}
.history-item strong{color:#506347;font-weight:500;font-size:12px}
.history-item:hover{background:#fafcf7;border-color:#d4e0c7}
.history-item:active{transform:translateY(1px)}
.history-item[aria-pressed=true]{background:#f5f9ee;border-color:#d2dfc3}
.history-status,.history-status.done,.history-status.running,.history-status.queued{color:#6b8650;background:#f1f6e7;border-radius:4px}
.history-status.failed{color:#a78356;background:#faf2e6}
.history-empty>.icon{color:#b1bd9f}
.history-empty strong{color:#708163}
.history-empty p{color:#909c85}

@keyframes refined-breathe{0%,100%{opacity:.5;box-shadow:0 0 0 3px #edf3e6}50%{opacity:1;box-shadow:0 0 0 5px #edf3e6}}
@media(max-width:1050px){.generation-home{max-width:760px}.generation-home .topic-suggestion{gap:10px;padding-left:13px;padding-right:13px}}
@media(max-width:800px){.generation-home{gap:12px}.generation-stage{margin-bottom:-12px}.generation-welcome h1{font-size:33px}.generation-home .topic-suggestion{min-height:76px}}
@media(max-width:600px){
 .brand{gap:9px}
 .brand-symbol,.brand-image{width:40px;height:40px}
 .brand-name strong{font-size:21px}
 .brand-name small{font-size:9.5px}
 .generation-home{gap:10px}
 .workspace-title strong{font-size:11px}
 .workspace-actions{gap:4px}
 .workspace-actions button{min-height:31px;padding:7px 8px;font-size:10px;gap:5px}
 .workspace-actions .icon{width:13px;height:13px}
 .generation-welcome{gap:15px}
 .generation-welcome h1{font-size:29px;font-weight:600;line-height:1.45}
 .studio-emblem{width:112px;height:82px}
 .generation-stage{padding:16px 0 23px;margin-bottom:-10px}
 .generation-composer{padding:0 0 16px}
 .generation-composer:before,.generation-composer:focus-within:before{inset:0 0 16px;border-radius:10px}
 .generation-composer textarea{font-size:13px;padding:15px 15px 0;height:69px;min-height:69px}
 .composer-bottom{padding:8px 15px 14px;gap:9px}
 .generation-send{min-height:36px;min-width:106px;padding:8px 12px;font-size:11px;gap:9px}
 .suggestion-row{gap:9px}
 .generation-home .topic-suggestion{min-height:69px;padding:11px 12px;gap:10px;border-radius:10px}
 .generation-home .suggestion-image{width:43px;height:43px}
 .generation-home .topic-suggestion strong{font-size:12px}
 .workspace-footnote p,.reference-preview{font-size:10px}
 .has-conversation .generation-composer{padding:13px 15px 12px}
 .has-conversation .generation-composer textarea{padding:0;height:51px;min-height:51px}
 .result-copy{padding:13px 15px;gap:5px}
 .result-copy h2{font-size:15px;line-height:1.6}
 .result-copy .btn{min-height:34px;font-size:10px;gap:8px}
 .generation-result>img{width:94px;min-height:156px}
 .generation-steps{gap:5px;margin-top:13px;margin-bottom:12px}
 .generation-history{border-radius:12px}
 .history-head{padding:17px}
}
@media(max-width:374px){
 .brand-symbol,.brand-image{width:38px;height:38px}
 .brand-name strong{font-size:20px}
 .brand-name small{font-size:9px}
 .generation-welcome h1{font-size:26px}
 .generation-home .topic-suggestion{padding:9px 10px;gap:8px;min-height:62px}
 .generation-home .suggestion-image{width:37px;height:37px}
 .composer-bottom{padding-left:12px;padding-right:12px}
 .generation-send{min-width:98px;padding-left:10px;padding-right:10px;gap:7px}
 .generation-composer textarea{padding-left:12px;padding-right:12px}
}
@media(min-width:801px) and (max-height:780px){
 .generation-home{gap:12px}
 .generation-stage{margin-bottom:-12px;padding-top:17px;padding-bottom:22px}
 .generation-welcome{gap:14px}
 .studio-emblem{width:120px;height:86px}
 .generation-welcome h1{font-size:34px}
 .generation-composer{padding-bottom:18px}
 .generation-composer:before,.generation-composer:focus-within:before{bottom:18px}
 .generation-composer textarea{height:67px;min-height:67px;padding-top:16px}
 .composer-bottom{padding-top:8px;padding-bottom:14px}
 .generation-home .topic-suggestion{min-height:76px}
}
@media(min-width:801px) and (max-height:660px){
 .generation-home{gap:9px}
 .generation-stage{margin-bottom:-9px;padding-top:12px;padding-bottom:17px}
 .generation-welcome{gap:8px}
 .studio-emblem{width:106px;height:70px}
 .generation-welcome h1{font-size:29px;line-height:1.35}
 .generation-composer textarea{height:56px;min-height:56px;padding-top:12px}
 .composer-bottom{padding-top:6px;padding-bottom:11px}
 .generation-home .topic-suggestion{min-height:65px;padding-top:8px;padding-bottom:8px}
 .generation-home .suggestion-image{width:42px;height:42px}
}
@media(max-width:800px) and (max-height:760px){
 .generation-home{gap:8px}
 .generation-stage{margin-bottom:-8px;padding-top:14px;padding-bottom:18px}
 .generation-welcome{gap:11px}
 .studio-emblem{width:106px;height:78px}
 .generation-welcome h1{font-size:27px}
 .generation-composer{padding-bottom:15px}
 .generation-composer:before,.generation-composer:focus-within:before{bottom:15px}
 .generation-composer textarea{height:61px;min-height:61px;padding-top:13px}
 .composer-bottom{padding-top:7px;padding-bottom:12px}
 .generation-home .topic-suggestion{min-height:60px;padding-top:8px;padding-bottom:8px}
 .generation-home .suggestion-image{width:40px;height:40px}
 .has-conversation .generation-composer textarea{height:46px;min-height:46px;padding:0}
}
@media(max-width:800px) and (max-height:660px){
 .generation-home{gap:7px}
 .generation-stage{margin-bottom:-7px;padding-top:12px;padding-bottom:15px}
 .generation-welcome{gap:8px}
 .studio-emblem{width:94px;height:64px}
 .generation-welcome h1{font-size:24px;line-height:1.4}
 .generation-composer{padding-bottom:13px}
 .generation-composer:before,.generation-composer:focus-within:before{bottom:13px}
 .generation-composer textarea{height:53px;min-height:53px;padding-top:11px;font-size:12px}
 .composer-bottom{padding-top:5px;padding-bottom:10px}
 .generation-send{min-height:34px}
 .generation-home .topic-suggestion{min-height:51px;padding:7px 10px;gap:9px}
 .generation-home .suggestion-image{width:35px;height:35px}
 .generation-home .topic-suggestion strong{font-size:12px}
 .generation-home:has(.composer-error:not([hidden])) .studio-emblem{display:none}
 .has-conversation .generation-composer textarea{height:43px;min-height:43px;padding:0}
}
@media(max-height:520px){
 .generation-stage{margin-top:16px}
 .generation-home{gap:9px}
 .generation-history{max-height:380px}
}
.reduce-motion .generation-home *,.reduce-motion .generation-home *:before,.reduce-motion .generation-home *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reduce-motion .generation-home .topic-suggestion:hover,.reduce-motion .generation-home .topic-suggestion:hover .suggestion-image,.reduce-motion .generation-send:hover .icon{transform:none}
@media(prefers-reduced-motion:reduce){
 .brand,.btn,.personal-entry,.breadcrumb>a,.footer button,.workspace-actions button,.generation-send,.generation-send .icon,.generation-home .topic-suggestion,.generation-home .suggestion-image,.reference-preview,.retry-generation,.retry-history,.close-history,.history-item{transition:none}
 .loading-dot,.generation-history{animation:none}
 .generation-home .topic-suggestion:hover,.generation-home .topic-suggestion:hover .suggestion-image,.generation-send:hover .icon{transform:none}
 .generation-thread{scroll-behavior:auto}
}