@import url('/static/fonts.css');
@font-face{font-family:Lora;src:url('/static/vendor/lora-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}

:root{color-scheme:light;--bg:#f7f2e8;--panel:#fffdf7;--panel2:#efe5d4;--line:#ded1ba;--text:#39281f;--muted:#776555;--accent:#a73529;--bronze:#89612f;--orange:#956222;--danger:#a32c24;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:14px}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.65}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button{color:inherit;background:transparent;border:0}
button:disabled{opacity:.5;cursor:wait}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
input,textarea,select{width:100%;background:#fffdf8;border:1px solid #d6c5aa;border-radius:10px;color:var(--text);padding:11px 13px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #a735290c}
textarea{resize:vertical;min-height:110px;line-height:1.75}
label{display:block;font-size:12px;font-weight:600;color:#604b3b;margin:14px 0 6px}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.25;letter-spacing:-.045em}
h1{font-size:34px}
h2{font-size:25px}
h3{font-size:17px}
small,.muted{color:var(--muted)}
.subtle{font-size:12px;color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:700;color:var(--accent)}
.btn{border-radius:10px;padding:10px 16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.6;transition:background .18s,transform .18s}
.btn:hover{background:#eee2ce;transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#fff9eb;box-shadow:0 3px 0 #613d2033}
.btn.primary:hover{background:#89291f}
.btn.secondary{background:#f3e9d8;border:1px solid #d9c6a7}
.btn.danger{color:var(--danger);border:1px solid #d9a399}
.btn.small{padding:6px 10px;font-size:12px}
.btn.full{width:100%}
.icon{width:19px;height:19px;vertical-align:middle;flex-shrink:0}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;color:var(--muted)}
.icon-btn:hover{background:var(--panel2);color:var(--text)}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap8{gap:8px}
.stack>*+*{margin-top:16px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:#a7352912;color:var(--accent);white-space:nowrap}
.badge.bronze{background:#89612f16;color:var(--bronze)}
.badge.orange{background:#95622215;color:var(--orange)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 9px #a7352944}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:26px;letter-spacing:-2px}
.brand img{width:35px;height:35px}
.brand span:last-child{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:1px;margin-left:3px}
.layout{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}
.sidebar{border-right:1px solid var(--line);position:sticky;top:0;height:100vh;padding:27px 19px 18px;display:flex;flex-direction:column;background:#30241f}
.sidebar .brand{padding-left:8px;margin-bottom:37px}
.nav-group{margin:24px 12px 9px;color:#ba9c75;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 13px;color:#ddc9a9;border-radius:9px;margin:3px 0;font-size:12px;transition:.2s}
.nav-link:hover{background:#48352a;color:var(--text)}
.nav-link.active{background:#a7352912;color:var(--accent)}
.nav-mark{width:9px;height:9px;border:1px solid currentColor;border-radius:3px}
.sidebar-bottom{margin-top:auto}
.invite-teaser{padding:18px 15px;background:linear-gradient(135deg,#493529,#38271f);border:1px solid #735235;border-radius:14px;margin-bottom:18px}
.invite-teaser p{font-size:11px;color:#d1b991;margin:9px 0}
.invite-teaser .icon{color:var(--accent);width:24px;height:24px}
.user-mini{padding:14px 5px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;min-width:0}
.user-mini strong{font-size:12px}
.user-mini small{display:block;font-size:10px}
.avatar{flex-shrink:0;display:inline-grid;place-items:center;width:37px;height:37px;border-radius:13px;background:#f3e3bd;color:#765019;font-size:13px;font-weight:700;border:1px solid #ffffff14;overflow:hidden;transition:transform .2s}
.avatar.v1{background:#eed6cb;color:#8f392c}
.avatar.v2{background:#e6d6c2;color:#684932}
.avatar.v3{background:#ede5d7;color:#625244}
.avatar:hover{transform:rotate(-6deg) scale(1.05)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.large{width:70px;height:70px;font-size:24px;border-radius:24px}
.workspace{min-width:0}
.topbar{height:79px;position:sticky;top:0;z-index:10;background:#f7f2e8ee;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 37px;gap:20px}
.breadcrumbs{font-size:11px;color:#7d6851;display:flex;gap:10px;align-items:center}
.breadcrumbs b{color:var(--text);font-weight:500}
.search{position:relative;width:290px}
.search input{padding:8px 35px;font-size:11px;background:#fffbf2;border-color:#ddcfb8}
.search>.icon{position:absolute;top:10px;left:10px;width:15px;color:var(--muted)}
.top-actions{display:flex;gap:16px;align-items:center}
.mobile-menu{display:none}
.page{max-width:1540px;margin:0 auto;padding:29px 37px 60px}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 247px;gap:28px}
.hero{min-height:237px;overflow:hidden;border-radius:19px;border:1px solid #d6bd91;background:radial-gradient(ellipse at 88% 50%,#c89d5450,transparent 60%),#f0e3cb;position:relative;padding:29px 30px;margin-bottom:28px;display:flex;align-items:center}
.hero-content{z-index:1;max-width:56%}
.hero h1{font-size:32px;font-weight:600;margin:10px 0 12px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{font-size:12px;line-height:1.85;color:#71583f;max-width:330px;margin-bottom:20px}
.hero-art{position:absolute;width:47%;height:110%;right:-12px;top:-9%;object-fit:contain;animation:float 7s ease-in-out infinite;pointer-events:none}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 17px}
.section-head h2{font-size:19px;margin:0;letter-spacing:-.04em}
.section-head .subtle{font-size:10px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:5px}
.tab{padding:10px 0 13px;color:var(--muted);border-bottom:2px solid transparent;font-size:12px}
.tab.active{border-color:var(--accent);color:var(--text)}
.topic-row{display:flex;gap:16px;padding:23px 3px;border-bottom:1px solid #e0d3bf;transition:background .2s}
.topic-row:hover{background:#ae7b2610}
.topic-symbol{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:14px;background:#a7352910;color:var(--accent)}
.topic-symbol.build{background:#89612f14;color:var(--bronze)}
.topic-symbol.share{background:#95622214;color:var(--orange)}
.topic-symbol.random{background:#87715214;color:#796346}
.topic-info{min-width:0;flex:1}
.topic-info h3{font-size:15px;letter-spacing:-.025em;font-weight:600;margin:6px 0 9px;line-height:1.55;overflow-wrap:anywhere}
.topic-meta{display:flex;gap:7px;align-items:center;font-size:10px;color:var(--muted);flex-wrap:wrap}
.topic-meta .avatar{width:21px;height:21px;border-radius:7px;font-size:8px}
.topic-numbers{font-size:11px;color:var(--muted);min-width:39px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.topic-numbers .icon{width:16px}
.right-column{padding-top:1px}
.panel{border:1px solid var(--line);border-radius:15px;background:#fffdf7;padding:21px;margin-bottom:20px}
.panel h3{font-size:13px;letter-spacing:0;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:11px;color:var(--muted)}
.stat strong{color:var(--text);font-size:13px}
.manifesto{background:#4a2d24;border-color:#674632;position:relative;overflow:hidden}
.manifesto .glyph{font-size:55px;line-height:1.2;color:var(--bronze);margin-bottom:12px}
.manifesto h3{font-size:18px;color:#f8e8c7;line-height:1.5}
.manifesto p{font-size:11px;color:#d6bc94;line-height:1.9}
.tiny-footer{color:#887260;font-size:10px;line-height:2.3;padding:0 9px}
.empty{text-align:center;padding:48px 22px;border:1px dashed #cbb89b;border-radius:15px;margin-top:20px}
.empty .empty-icon{color:var(--accent);margin-bottom:15px}
.empty h3{font-size:18px}
.empty p{color:var(--muted);font-size:13px;max-width:410px;margin:0 auto 20px}
.empty .icon{height:34px;width:34px}
.load-more{display:block;margin:23px auto}
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-story{background:radial-gradient(ellipse at 50% 60%,#c3965632,transparent 60%),#f0e4ce;position:relative;padding:45px 10%;display:flex;flex-direction:column;border-right:1px solid #dac29a;overflow:hidden}
.auth-story .brand{align-self:flex-start}
.auth-story h1{font-size:clamp(38px,4vw,63px);font-weight:500;line-height:1.3;margin:70px 0 20px;max-width:600px}
.auth-story h1 span{color:var(--accent)}
.auth-story p{color:#796042;max-width:410px;font-size:14px}
.auth-story .art{width:100%;max-height:320px;object-fit:contain;animation:float 8s infinite ease-in-out}
.auth-note{font-size:11px;color:#816341;letter-spacing:.04em;margin-top:auto}
.auth-main{display:grid;place-items:center;padding:40px}
.auth-card{width:100%;max-width:370px}
.auth-card .eyebrow{margin-bottom:16px}
.auth-card h2{font-size:29px;font-weight:500;margin-bottom:12px}
.auth-card>p{font-size:12px;color:var(--muted);margin-bottom:26px}
.auth-card form>.btn{margin:22px 0 15px}
.auth-switch{text-align:center;font-size:12px;color:var(--muted)}
.text-link{color:var(--accent);padding:0}
.notice{padding:12px 15px;border:1px solid #ddc9a8;border-radius:10px;font-size:11px;color:#725b42;background:#a7352908;margin-top:20px}
.error{background:#a735290d;color:var(--danger);border:1px solid #d8afa2;padding:12px;border-radius:10px;font-size:12px;margin:14px 0}
.thread{max-width:990px;margin:auto}
.back{font-size:11px;color:var(--muted);display:inline-flex;gap:8px;align-items:center;margin-bottom:24px}
.thread-heading{margin-bottom:29px}
.thread-heading h1{font-size:32px;font-weight:600;margin:14px 0 15px;overflow-wrap:anywhere}
.thread-heading .topic-meta{font-size:11px}
.thread-divider{display:flex;align-items:center;gap:13px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:20px 0}
.thread-divider:after{content:'';height:1px;background:var(--line);flex:1}
.comment{padding:24px 0 26px;border-bottom:1px solid var(--line);scroll-margin-top:100px;min-width:0}
.comment-header{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.comment-header .author{font-weight:600;font-size:13px}
.comment-header time{font-size:10px;color:var(--muted)}
.comment-header .comment-tools{margin-left:auto}
.comment:target,.comment.target{background:#a7352905;box-shadow:-3px 0 var(--accent);padding-left:16px;padding-right:10px;border-radius:5px}
.comment-body{font-size:14px;line-height:1.9;overflow-wrap:anywhere;min-width:0}
.comment-body.collapsed{max-height:680px;overflow:hidden;position:relative}
.comment-body.collapsed:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:100px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.comment-body p{margin-bottom:16px}
.comment-body h1,.comment-body h2,.comment-body h3{font-size:20px;margin:20px 0 12px;line-height:1.5}
.comment-body ul,.comment-body ol{padding-left:25px}
.comment-body blockquote{margin:18px 0;padding:13px 20px;border-left:3px solid var(--bronze);background:#89612f07;color:#72563b;border-radius:0 9px 9px 0}
.comment-body a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.comment-body img{max-width:100%}
.comment-body code{font-family:'JetBrains Mono',monospace;font-size:12px}
.comment-body :not(pre)>code{background:#f0e2cc;padding:3px 5px;border-radius:4px;color:#804422}
.code-block{min-width:0;margin:20px 0;border:1px solid #5e4636;border-radius:13px;overflow:hidden;background:#30241e;line-height:1.7}
.code-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #594234;padding:8px 14px;font-size:10px;color:#d1b99a}
.code-block pre{margin:0;max-height:480px;overflow:auto;padding:18px 20px;max-width:100%;tab-size:2}
.code-block pre code{white-space:pre;display:block;background:none!important;padding:0!important}
.media-frame{margin:20px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#eee5d5}
.media-frame img{display:block;max-height:550px;width:auto;max-width:100%;margin:auto;object-fit:contain;cursor:zoom-in}
.media-frame video{display:block;width:100%;max-height:550px;background:#251b16}
.media-frame figcaption{font-size:11px;padding:9px 15px;color:var(--muted);background:var(--panel)}
.media-placeholder{width:100%;padding:45px 15px;color:var(--bronze)}
.reply-ref{display:block;text-align:left;color:#785735;font-size:11px;padding:10px 15px;background:#a7352906;border-left:2px solid #bd9556;border-radius:0 7px 7px 0;margin-bottom:18px;width:100%}
.comment-footer{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.reaction{border:1px solid var(--line);background:#fffaf0;padding:4px 9px;border-radius:8px;font-size:12px;transition:.2s}
.reaction:hover{transform:translateY(-3px);background:#f2e1c6}
.reaction.mine{border-color:#b57644;background:#a7352915}
.reaction.popped{animation:pop .3s}
.reaction-picker{display:flex;gap:6px}
.reply-btn{color:var(--muted);font-size:11px;padding:5px 9px}
.reply-btn:hover{color:var(--accent)}
.composer-callout{display:flex;align-items:center;gap:14px;position:sticky;bottom:18px;padding:15px 18px;margin-top:30px;background:#fffbf1f5;border:1px solid #cdb386;border-radius:15px;box-shadow:0 10px 40px #0005;z-index:9}
.composer-callout>button:first-of-type{text-align:left;flex:1;color:#735638}
.new-comments{position:sticky;top:89px;z-index:11;display:block;margin:0 auto;background:var(--accent);color:#fff9eb;padding:9px 20px;box-shadow:0 5px 25px #0006;border-radius:30px;font-weight:600;font-size:12px}
.realtime{font-size:10px;color:#82643e;display:flex;align-items:center;gap:7px}
.account{max-width:830px;margin:auto}
.account h1{font-size:30px}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.account-grid .panel{margin:0}
.invite-code{font-family:monospace;font-size:12px;word-break:break-all;color:var(--accent);padding:14px;background:#faf0db;border:1px dashed #bf9458;border-radius:9px;margin:12px 0}
.member-row{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:center;min-width:0}
.member-row>div:nth-child(2){flex:1;min-width:0}
.member-row strong{font-size:13px}
.member-row small{display:block;font-size:11px;overflow-wrap:anywhere}
.audit{font-size:11px;border-bottom:1px solid var(--line);padding:12px 0}
.audit code{color:var(--bronze)}
.audit small{display:block;margin-top:5px}
.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
.page-title h1{margin:0}
dialog{color:var(--text);background:#fffcf5;border:1px solid #d2b990;border-radius:19px;padding:0;max-height:92dvh;width:min(900px,94vw);max-width:94vw;box-shadow:0 30px 150px #000b}
dialog::backdrop{background:#21140ebb;backdrop-filter:blur(7px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fffcf5f7;z-index:5}
.modal-head h2{font-size:19px;margin:0}
.modal-body{padding:22px 25px}
.modal-foot{padding:16px 25px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fffcf5f7;display:flex;justify-content:space-between;gap:15px;align-items:center}
.compose-metadata{display:grid;grid-template-columns:1fr 175px;gap:14px}
.compose-metadata label{margin-top:0}
.block-editor{border:1px solid #dbc6a6;border-radius:12px;margin:16px 0;background:#fffdf8;overflow:hidden}
.block-head{display:flex;align-items:center;gap:6px;background:#f2e5cd;border-bottom:1px solid #e0ccac;padding:6px 12px;font-size:11px;color:#735637}
.block-head .block-label{flex:1}
.block-head select{width:135px;padding:3px 8px;font-size:11px}
.block-head .icon-btn{width:26px;height:26px}
.block-editor textarea{border:0;border-radius:0;background:none;box-shadow:none;min-height:130px;padding:16px;font-size:13px}
.block-editor.code textarea{font-family:'JetBrains Mono',monospace;white-space:pre;overflow:auto}
.block-media{padding:12px}
.block-media img,.block-media video{max-height:230px;max-width:100%;display:block;margin:0 auto 12px}
.block-add{display:flex;gap:8px;justify-content:center;padding:17px;border:1px dashed #c7a77c;border-radius:11px;flex-wrap:wrap}
.block-add button{color:#805c35;font-size:12px;display:flex;gap:7px;align-items:center;padding:5px 7px;border-radius:6px}
.block-add button:hover{background:#efe0c5;color:var(--accent)}
.compose-preview{padding:10px;min-height:180px}
.compose-help{font-size:10px;color:#887050;margin:14px 0 0}
.compose-footer-note{font-size:10px;color:var(--muted)}
.lightbox{display:block;max-width:100%;max-height:80vh;object-fit:contain;margin:auto}
.boot{height:100vh;display:grid;align-content:center;justify-items:center;gap:12px;color:var(--muted)}
#toasts{position:fixed;bottom:25px;right:25px;z-index:100;display:grid;gap:8px;max-width:calc(100vw - 50px)}
.toast{background:#f3e2bd;color:#63451e;box-shadow:0 7px 25px #0006;padding:12px 20px;border-radius:11px;font-size:12px;animation:enter .2s}
.toast.bad{background:#f4d6cd;color:#86291f}
.spinner{width:18px;height:18px;border:2px solid #b8a17e;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
.hidden{display:none!important}
.required-note{font-size:11px;color:var(--muted)}
.divider{border:0;border-top:1px solid var(--line);margin:25px 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.nowrap{white-space:nowrap}
.checkline{display:flex;align-items:center;gap:10px;font-size:12px}
.animated-badge{animation:glow 4s ease-in-out infinite}

/* Giang ho: ivory paper, walnut ink, antique gold and vermilion. */
:root{--gold:#b38a48;--ink:#30241f;--paper:#fffdf7;--display:Lora,Georgia,serif}

body{background-image:radial-gradient(ellipse at 100% 0,#c9a9740d,transparent 55%)}

h1,h2,h3{letter-spacing:-.025em}

.hero h1,.auth-story h1,.auth-card h2,.section-head h2,.thread-heading h1,.account h1,.page-title h1,.manifesto h3,.empty h3{font-family:var(--display);font-weight:600;letter-spacing:-.04em}

.btn{border-radius:7px}

.btn.primary{box-shadow:0 3px 9px #6a291c15,inset 0 1px 0 #ffffff26}

.btn.primary:hover{box-shadow:0 5px 15px #6a291c25}

.badge{border-radius:4px;font-weight:600}

.dot{background:#b1843c;box-shadow:0 0 0 3px #b1843c13}

.brand{letter-spacing:-1.5px}

.brand img{width:39px;height:39px}

.sidebar{color:#f6e7cc;border-right:1px solid #6b4b31;background:radial-gradient(ellipse at 0 100%,#6d442c45,transparent 60%),#30241f}

.sidebar .brand span:last-child{color:#c0a584}

.sidebar .nav-link:hover{color:#fff5df}

.sidebar .nav-link.active{background:#d5ac6620;color:#f0cb8a;box-shadow:inset 2px 0 #bd8f4d}

.sidebar .text-link,.sidebar .invite-teaser .icon{color:#edc47e}

.sidebar .user-mini{border-color:#654a36}

.sidebar .user-mini small,.sidebar .icon-btn{color:#c8ae8b}

.sidebar .icon-btn:hover{background:#523b2c;color:#fff0d1}

.sidebar .invite-teaser{border-radius:8px;position:relative}

.sidebar .invite-teaser:after{content:'';position:absolute;right:10px;top:10px;width:15px;height:15px;border-top:1px solid #b48a53;border-right:1px solid #b48a53;pointer-events:none}

.avatar{border-radius:50%;border:1px solid #a77d4230;box-shadow:0 0 0 3px #b7955d0a}

.avatar.large{border-radius:50%}

.topbar{background:#f7f2e8f2}

.search input{border-radius:7px}

.hero{border-radius:12px;min-height:290px;background:radial-gradient(ellipse at 95% 40%,#fff7df80,transparent 60%),linear-gradient(110deg,#f3e7d0,#eddbb9);box-shadow:inset 0 0 0 5px #fff9ee55}

.hero:after{content:'';position:absolute;inset:11px;border:1px solid #a47b3c35;border-radius:4px;pointer-events:none}

.hero-content{max-width:58%}

.hero h1{font-size:36px;line-height:1.4;margin:12px 0}

.hero p{max-width:320px}

.hero-art{width:57%;height:105%;right:-45px;top:5%;opacity:.94;animation:landscape-in 1.2s ease-out both;object-position:center bottom}

.hero .eyebrow{color:#866332;font-size:9px;letter-spacing:.16em}

.section-head h2{font-size:22px}

.topic-symbol{border:1px solid #b58b4820;border-radius:10px}

.topic-row{padding:23px 7px}

.topic-meta .avatar{border-radius:50%}

.panel{border-radius:10px;background:linear-gradient(130deg,#fffdf8,#fcf8ef);box-shadow:0 3px 12px #674a2410}

.manifesto{background:radial-gradient(circle at 95% 0,#a7763430,transparent 50%),#482e24;border:1px solid #755135}

.manifesto:after{content:'';position:absolute;right:-35px;top:20px;border:1px solid #d1a35c25;border-radius:50%;width:125px;height:125px;box-shadow:0 0 0 9px #d1a35c08,0 0 0 20px #d1a35c08;pointer-events:none}

.manifesto .glyph{color:#e3b972}

.manifesto .badge{color:#f0c680;background:#d1a35c18}

.manifesto h3{font-size:23px;line-height:1.6}

.manifesto .glyph .icon{width:40px;height:40px}

.auth-story{background:radial-gradient(ellipse at 30% 25%,#fffaf0a0,transparent 65%),linear-gradient(160deg,#efe0c3,#f5ead8 50%,#ddc59b);padding:40px 9% 30px}

.auth-story:after{content:'';position:absolute;inset:18px;border:1px solid #ae82434a;pointer-events:none}

.auth-story h1{font-size:clamp(37px,3.6vw,56px);line-height:1.4;margin:65px 0 18px;position:relative;z-index:1}

.auth-story p{position:relative;z-index:1;font-size:13px;line-height:1.9;max-width:390px}

.auth-story .art{width:calc(100% + 100px);margin:-25px -50px -5px;min-height:240px;max-height:340px;animation:landscape-in 1.2s ease-out both}

.auth-note{font-size:9px;letter-spacing:.19em;padding-top:20px}

.auth-main{background:radial-gradient(ellipse at 90% 90%,#d8ba7a14,transparent 65%),#fffcf5;position:relative}

.auth-card:before{content:'';display:block;width:48px;height:48px;background:url('/static/seal.svg') center/contain no-repeat;margin-bottom:26px;transform:rotate(-5deg)}

.auth-card .eyebrow{color:#8d6936;font-size:9px;letter-spacing:.15em}

.auth-card h2{font-size:32px;line-height:1.5}

.auth-card form>.btn{padding:12px 16px}

.notice{background:#f3e8d3;color:#725b42;line-height:1.85}

.notice .icon{width:16px;margin-right:3px}

.thread-heading h1{line-height:1.5}

.comment-body blockquote{border-left-color:#b38748;background:#b387480c}

.code-block{background:#30241e;color:#f0dfc2;border-color:#634934;box-shadow:0 3px 14px #30241e0c}

.code-toolbar{background:#3c2c22;color:#d6bb8d;border-color:#624934}

.code-toolbar .btn:hover{background:#634630;color:#fff4df}

.code-block ::selection{background:#886137;color:#fff7e8}

.comment-body pre code{color:#f1dec2}

.composer-callout{box-shadow:0 7px 25px #52361815;border-radius:10px}

.new-comments{box-shadow:0 5px 20px #7c2f2625}

.media-frame{border-radius:10px}

.reply-ref{color:#775632;background:#b1843c0d}

.reaction.mine{background:#a7352910;border-color:#bf6b4c}

.toast{box-shadow:0 7px 25px #4a301d20;border:1px solid #c19d58}

dialog{border-radius:12px;box-shadow:0 25px 110px #30241e55}

.block-head{color:#72532f}

.block-editor{border-radius:8px}

.block-add{background:#f7ecd830}

.invite-code{color:#933328}

@keyframes landscape-in{from{opacity:0;transform:translateY(10px)}
to{opacity:.94;transform:translateY(0)}
}

@keyframes float{50%{transform:translateY(-9px) rotate(2deg)}
}
@keyframes enter{from{opacity:0;transform:translateY(8px)}
}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes pop{50%{transform:scale(1.3)}
}
@keyframes glow{50%{box-shadow:0 0 18px #a7352915}
}

.reduced-motion *, .reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media(min-width:1550px){.hero{min-height:270px}
.hero h1{font-size:39px}
.hero-art{width:46%;right:0}
.home-grid{grid-template-columns:minmax(0,1fr) 280px}
}

@media(max-width:1180px){.layout{grid-template-columns:200px minmax(0,1fr)}
.sidebar{padding:25px 12px 15px}
.page{padding:25px}
.topbar{padding:0 25px}
.home-grid{grid-template-columns:minmax(0,1fr)}
.right-column{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tiny-footer{display:none}
.hero-content{max-width:55%}
.hero{min-height:250px}
.hero-art{width:48%;top:-6%}
}

@media(max-width:760px){.layout{display:block}
.sidebar{position:fixed;z-index:30;left:0;top:0;width:240px;transform:translateX(-100%);transition:transform .2s;box-shadow:none}
.sidebar.open{transform:translateX(0);box-shadow:10px 0 80px #30241e55}
.mobile-menu{display:inline-grid}
.topbar{height:65px;padding:0 17px;gap:10px}
.breadcrumbs{font-size:10px}
.breadcrumbs>span{display:none}
.search{width:180px}
.search input{font-size:11px}
.top-actions>.realtime{display:none}
.page{padding:20px 17px 90px}
.hero{min-height:226px;padding:24px 22px;border-radius:15px;margin-bottom:25px}
.hero h1{font-size:27px}
.hero-content{max-width:68%}
.hero-art{right:-70px;width:58%;opacity:.65;top:10%}
.hero p{font-size:11px}
.hero .btn{font-size:11px;padding:8px 12px}
.hero .eyebrow{font-size:8px}
.section-head h2{font-size:18px}
.section-head .subtle{display:none}
.topic-row{gap:12px;padding:19px 0}
.topic-symbol{width:37px;height:37px;border-radius:11px}
.topic-info h3{font-size:14px}
.topic-meta{font-size:9px}
.topic-numbers{min-width:26px;font-size:10px}
.right-column{gap:12px}
.panel{padding:18px}
.manifesto h3{font-size:16px}
.auth{display:block}
.auth-story{padding:25px 25px 30px;border-right:0;border-bottom:1px solid var(--line)}
.auth-story h1{font-size:28px;max-width:75%;margin:30px 0 12px}
.auth-story p{font-size:11px;max-width:65%;margin:0}
.auth-story .art{position:absolute;width:170px;right:-29px;top:65px;opacity:.65}
.auth-note{display:none}
.auth-main{padding:35px 25px}
.auth-card h2{font-size:25px}
.thread-heading h1{font-size:27px}
.thread-heading{margin-bottom:20px}
.comment-body{font-size:14px;line-height:1.85}
.comment-body .code-block pre{padding:14px}
.comment-header{gap:9px}
.comment-header .author{font-size:12px}
.comment-header time{font-size:9px}
.comment-tools{display:flex}
.comment-tools .icon-btn{width:28px}
.comment-footer{gap:6px}
.reply-btn{padding:5px 4px}
.reaction-picker{gap:3px}
.reaction-picker .reaction{padding:3px 6px}
.account-grid{grid-template-columns:1fr}
.page-title{align-items:start}
.page-title h1{font-size:26px}
.compose-metadata{grid-template-columns:1fr}
.modal-head{padding:15px}
.modal-body{padding:15px}
.modal-foot{padding:14px 15px}
.compose-footer-note{display:none}
.block-add{gap:4px;padding:12px 5px}
.block-add button{font-size:11px}
.composer-callout{bottom:12px;padding:12px;gap:9px}
.composer-callout .btn{font-size:11px;padding:8px 10px}
.composer-callout>button:first-of-type{font-size:11px}
.new-comments{top:74px}
.member-row{gap:8px}
.member-row .btn{font-size:10px}
.tabs{gap:20px}
.comment-body.collapsed{max-height:600px}
}

@media(max-width:390px){.search{width:145px}
.hero h1{font-size:24px}
.hero-content{max-width:80%}
.hero-art{opacity:.35}
.right-column{grid-template-columns:1fr}
.top-actions{gap:8px}
.account .panel{padding:14px}
}


.manifesto .glyph .icon{width:48px;height:48px;stroke-width:1.1}


/* Keep the landscape behind the copy on small screens. */
@media(min-width:1550px){.hero{min-height:310px}
.hero-art{width:57%;right:-30px}
}

@media(max-width:1180px){.hero-art{width:55%;right:-15px;top:3%}
.hero{min-height:280px}
.hero h1{font-size:34px}
}

@media(max-width:760px){.hero{min-height:270px;padding:25px 22px}
.hero h1{font-size:28px;line-height:1.5}
.hero-content{max-width:82%}
.hero p{max-width:245px}
.hero-art{width:63%;right:-68px;top:11%;opacity:.32;animation:none}
.hero .eyebrow{font-size:8px}
.hero:after{inset:8px}
.auth-story{padding:25px 27px 30px;min-height:284px}
.auth-story:after{inset:10px}
.auth-story h1{font-size:29px;max-width:90%;margin:27px 0 11px}
.auth-story p{max-width:71%;font-size:11px;line-height:1.9}
.auth-story .art{width:220px;min-height:0;height:220px;max-height:none;right:-58px;top:55px;margin:0;opacity:.3;animation:none}
.auth-main{padding:32px 25px 40px}
.auth-card:before{display:none}
.auth-card h2{font-size:27px}
.auth-card .eyebrow{font-size:8px}
.manifesto h3{font-size:20px}
.thread-heading h1{font-size:26px}
.topic-row{padding-left:0;padding-right:0}
.section-head h2{font-size:21px}
.avatar{border-radius:50%}
}

@media(max-width:390px){.hero h1{font-size:26px}
.hero-content{max-width:92%}
.hero-art{opacity:.24}
.auth-story h1{font-size:27px}
.auth-story p{max-width:80%}
}
