@font-face{font-family:Inter;src:url('fonts/Inter.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('fonts/Lora.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Cinzel;src:url('fonts/Cinzel.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url('fonts/IMFellEnglish.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

html{font-size:calc(16px * var(--text-scale))}
body{font-family:var(--font-body)}
h1,h2,h3,.brand{color:var(--title);font-family:var(--font-title)}
a{color:var(--link)}
.brand{color:var(--title)}
.nav-link,button,label,legend,summary,.eyebrow,.breadcrumb,.private-label,.account-link,.button{font-family:var(--font-menu)}
.brand small{font-family:var(--font-menu)}
input,textarea,.note-text{font-family:var(--font-body);color:var(--text)}
select{font-family:var(--font-menu)}
.icon,.brand-mark,.composer-label>.icon,.note-details summary>.icon,.aside-title>.icon,.next-step>.icon,.next-step-callout>.icon{color:var(--icon)}
.button .icon,.nav-link .icon,.flash .icon,.text-button .icon,.icon-button .icon{color:inherit}
::selection{background:var(--selected);color:var(--selected-text)}
:focus-visible{outline-color:var(--focus)}
input:focus,select:focus,textarea:focus{border-color:var(--focus)}
.topbar{background:var(--topbar);flex-wrap:wrap}
.workspace{background:none}
.aside-panel,.tip-panel{background:var(--panel)}
.global-search{min-width:100px;flex:1}
.nav-link.active,.choice:has(input:checked){background:var(--selected);color:var(--selected-text);border-color:var(--line)}
.nav-link:hover,.button:hover,.icon-button:hover{background:var(--hover);color:var(--hover-text);border-color:var(--line)}
.button{background:var(--secondary);color:var(--secondary-text);border-color:var(--line)}
.button.primary{background:var(--button);color:var(--button-text);border-color:var(--button)}
.button.primary:hover,.button.ghost:hover{background:var(--hover);color:var(--hover-text);border-color:var(--line)}
.button.ghost{background:transparent;color:var(--link)}
.skip-link{background:var(--button);color:var(--button-text)}
.text-button,.source-line a,.origin-notice a,.filter-reset{color:var(--link)}
.text-button:hover,a:hover,summary:hover{color:var(--hover-text)}
.composer-label h2,.aside-title h2{font-family:var(--font-menu);color:var(--title)}
.composer>textarea,.global-search{background:var(--field)}
.badge,.chip,.count{background:var(--selected);color:var(--selected-text);border-color:var(--line)}
.flash{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-line)}
.flash.success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-line)}
.form-error,.flash.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-line)}
.flash.warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-line)}
.note-card,.task-card,.person-card,.character-card{padding-top:calc(20px * var(--space));padding-bottom:calc(16px * var(--space));margin-bottom:calc(16px * var(--space))}
.composer-label{padding-top:calc(20px * var(--space))}
.composer-footer{padding-top:calc(14px * var(--space));padding-bottom:calc(14px * var(--space))}
.stack-form,.details-body{gap:calc(18px * var(--space))}
.appearance-toggle-slot{position:relative;flex-shrink:0}
#appearance-toggle .button{min-height:44px;min-width:44px}
#appearance-status{position:absolute;right:0;top:100%;z-index:12;max-width:260px;width:max-content;font-size:.75rem;background:var(--panel);color:var(--text);border-radius:5px;box-shadow:0 3px 15px color-mix(in srgb,var(--shadow) 20%,transparent)}
#appearance-status:not(:empty){padding:8px 12px;border:1px solid var(--line)}
.appearance-form{padding:22px;min-width:0;background:var(--panel);color:var(--text)}
.appearance-tabs{display:flex;gap:6px;margin-bottom:20px}
.appearance-tabs button{flex:1;padding:12px 8px;min-height:44px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:5px;font-size:.8rem}
.appearance-tabs button[aria-selected=true]{background:var(--selected);color:var(--selected-text);border-color:var(--focus)}
.preset-controls{margin-bottom:20px}
.preset-controls .actions{margin:10px 0}
.appearance-group{border-top:1px solid var(--line);padding:10px 0}
.appearance-group summary{padding:8px 0;color:var(--title)}
.appearance-group .form-grid{padding:12px 0;grid-template-columns:1fr}
.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:12px 0}
.color-control{min-width:0}
.color-control>div{display:flex;gap:6px;margin-top:7px}
.color-control input[type=color]{width:44px;min-width:44px;height:44px;padding:4px;cursor:pointer}
.color-control input[data-color]{min-width:0;font-family:var(--font-menu);font-size:.8rem;padding:8px}
.appearance-save{position:sticky;bottom:0;z-index:2;padding:16px 0 8px;margin-top:18px;background:var(--panel);border-top:1px solid var(--line)}
#appearance-save-status{flex-basis:100%;font-size:.8rem;color:var(--muted)}
#contrast-warning{margin-top:16px}
@media(max-width:1190px){.toggle-label{display:none}}
@media(max-width:740px){.topbar{gap:8px}.private-label{display:none}.appearance-form{padding:16px}.appearance-tabs{flex-wrap:wrap}.appearance-tabs button{flex-basis:130px}}
@media(max-width:400px){.color-grid{grid-template-columns:1fr}.topbar{padding-left:12px}.global-search{min-width:80px}.appearance-tabs button{flex-basis:100%}}