@font-face{font-family:Inter;src:url(assets/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(assets/inter-600.woff2) format("woff2");font-weight:600 900;font-display:swap}
body{color:hsl(var(--foreground));background:hsl(var(--background));line-height:1.5}
button,input,select,textarea{font:inherit}
button{border-radius:6px;padding:8px 16px;min-height:36px;background:hsl(var(--card));border-color:hsl(var(--border));font-weight:500;transition:background-color 150ms ease-out}
button:hover{background:hsl(var(--accent));border-color:hsl(var(--border))}
button:active{background:hsl(var(--muted))}
button:disabled{opacity:.5;pointer-events:none}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}
.primary,.send{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:transparent}
.primary:hover,.send:hover{background:hsl(var(--primary) / .85)}
.primary:active,.send:active{background:hsl(var(--primary) / .75)}
header{height:76px;padding:0 24px;gap:20px;background:hsl(var(--sidebar));border:0}
.brand{color:hsl(var(--foreground));font-weight:700}
.header-right{gap:16px}
header>strong{font-weight:500}
.avatar{width:40px;height:40px;background:hsl(var(--foreground) / .08)}
.app{height:calc(100dvh - 76px)}
.rail{background:hsl(var(--sidebar));padding:24px 0;gap:16px}
.rail button{display:grid;place-items:center;width:44px;height:44px;color:hsl(var(--muted-foreground))}
.rail button.selected{background:hsl(var(--foreground) / .08);color:hsl(var(--foreground))}
.sidebar{background:hsl(var(--sidebar-panel));border:0;padding:24px 16px}
.sidebar .new{background:transparent;color:hsl(var(--foreground));border:1px solid hsl(var(--border));border-radius:6px;padding:12px 16px}
.sidebar .new:hover{background:hsl(var(--accent))}
.workspace-label,.eyebrow,.detail-top{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.workspace-label{margin:32px 8px 8px}
.side-link{padding:12px 8px;color:hsl(var(--muted-foreground))}
.side-link.active{background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-weight:500}
.side-link span{background:hsl(var(--foreground) / .1)}
.viewbar{height:64px;padding:16px 24px;border-color:hsl(var(--border) / .5)}
#content{padding:32px max(24px,calc((100% - 940px)/2)) 24px}
.welcome h1,.response h1,.detail h2,.mode-heading h1{font-size:24px;font-weight:600;letter-spacing:-.025em}
.welcome p,.response>p{font-size:14px;color:hsl(var(--muted-foreground))}
.section-title{margin:24px 0 16px}
.section-title h2,.card h2{font-size:18px;font-weight:600}
.quick,.card,.attention,.plan-summary,#mode-chooser{border-radius:8px;box-shadow:none}
.quick{padding:16px;min-height:112px}
.quick strong,.row strong,.attention strong{font-size:14px;font-weight:500}
.quick small,.source,.tag,.metrics span,.row small,.contact-facts small,.timeline-item small,.guide-kicker{font-size:12px}
.quick .symbol{margin-bottom:12px;color:hsl(var(--muted-foreground))}
.attention{padding:20px;gap:16px;margin-bottom:12px}
.attention .badge-icon{padding:12px;border-radius:8px;background:hsl(var(--foreground) / .05);color:hsl(var(--muted-foreground))}
.card{padding:24px;margin:24px 0;background:hsl(var(--card))}
.card p,.card li,.detail p{font-size:14px;color:hsl(var(--muted-foreground))}
.card h3{font-size:14px;font-weight:500}
.source,.tag,.metrics span{border:0;background:hsl(var(--foreground) / .05);color:hsl(var(--muted-foreground));border-radius:999px;padding:4px 8px;font-weight:500}
.tag.green{background:hsl(var(--success) / .1);color:hsl(var(--success-foreground))}
.tag.amber{background:hsl(var(--warning) / .1);color:hsl(var(--warning-foreground))}
.row{padding:16px 0;border-color:hsl(var(--border) / .5);gap:16px}
.row button,.actions button,.actions.compact button{font-size:12px;min-height:36px}
.initial{background:hsl(var(--foreground) / .05);color:hsl(var(--muted-foreground));width:36px;height:36px}
.note{background:hsl(var(--accent) / .5);border:0;border-radius:8px;padding:12px 16px;color:hsl(var(--muted-foreground))}
.detail{background:hsl(var(--popover));padding:24px;box-shadow:-4px 0 20px hsl(var(--foreground) / .08);top:76px}
.detail .card{padding:16px}
.detail .actions{gap:8px}
.field{font-size:14px;font-weight:500;margin:16px 0}
.field input,.field select,.field textarea,.role-control select,.contact-toolbar input,.contact-toolbar select,.timeline-heading select{background:hsl(var(--popover));color:hsl(var(--foreground));border:1px solid hsl(var(--border));border-radius:6px;padding:8px 12px;margin-top:8px;min-height:36px}
.field textarea{font-weight:400}
.contact-facts{gap:24px;margin:24px 0}
.contact-facts strong{font-size:14px;font-weight:500}
.contact-tabs{background:hsl(var(--muted) / .4);border:1px solid hsl(var(--border) / .4);border-radius:999px;padding:4px;gap:4px;width:fit-content}
.contact-tabs button{border:0;background:transparent;padding:8px 12px;border-radius:999px}
.contact-tabs .tab-active{background:hsl(var(--primary) / .1);color:hsl(var(--primary))}
.composer-wrap{background:hsl(var(--background));padding:12px 24px 16px}
form{border-radius:8px;padding:16px;background:hsl(var(--card));box-shadow:none}
textarea{color:hsl(var(--foreground))}
textarea::placeholder{color:hsl(var(--muted-foreground))}
.send{display:grid;place-items:center;width:36px;height:36px}
.user-message{border-radius:8px;background:hsl(var(--muted) / .6);padding:12px 20px}
.assistant-label{color:hsl(var(--muted-foreground));font-weight:500}
#mode-chooser{padding:32px;background:hsl(var(--popover));color:hsl(var(--foreground));border-color:hsl(var(--border));box-shadow:0 20px 40px hsl(var(--foreground) / .16)}
#mode-chooser::backdrop{background:hsl(var(--hint) / .5);backdrop-filter:blur(4px)}
.guide-option{padding:16px;border-radius:8px;gap:12px}
.guide-option strong{font-weight:500}
.guide-option small,.mode-heading p,.mode-footer p{color:hsl(var(--muted-foreground))}
.guide-number{background:hsl(var(--foreground) / .05);color:hsl(var(--muted-foreground));padding:4px 8px}
.guide-option>span:last-child{color:hsl(var(--muted-foreground))}
#guide-launcher{background:transparent;color:hsl(var(--foreground));border-color:hsl(var(--border));font-size:12px}
#guide-dock{background:hsl(var(--popover));color:hsl(var(--foreground));border-top:1px solid hsl(var(--border));padding:16px 24px;box-shadow:0 -4px 24px hsl(var(--foreground) / .08)}
.guide-kicker{font-weight:500;color:hsl(var(--accent-foreground))}
.guide-instructions h2,#guide-dock h2{font-weight:600}
.guide-instructions small{color:hsl(var(--muted-foreground))}
/* Keep the blue guide outline requested for this concept; it is attention, not action hierarchy. */
.guide-target{outline:3px solid hsl(217 91% 60%)!important;outline-offset:4px!important;box-shadow:0 0 0 7px hsl(217 91% 60% / .15)!important}
.dark .guide-target{outline-color:hsl(213 94% 68%)!important}
.guided-active .app{height:calc(100dvh - 224px)}
#toast{background:hsl(var(--hint));color:hsl(var(--hint-foreground));border-radius:8px}
.ui-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0;stroke-width:1.75}
.symbol .ui-icon,.badge-icon .ui-icon,.rail .ui-icon{width:20px;height:20px}
.theme-toggle{display:grid;place-items:center;padding:8px;width:36px;height:36px;background:transparent;border:0}
#coord-error{color:hsl(var(--destructive-foreground))}
@media(max-width:800px){header{padding:0 16px;gap:8px}.header-right{gap:8px}.brand{font-size:24px}#content{padding:24px 16px}.quick{padding:16px}.guide-options{grid-template-columns:1fr}#mode-chooser{padding:24px}.guided-active .app{height:calc(100dvh - 266px)}#guide-dock{padding:12px 16px}.contact-facts{grid-template-columns:1fr}.role-control{flex-wrap:wrap}.mode-heading h1{font-size:24px}button{min-height:44px}.theme-toggle{min-height:44px}.header-right .avatar{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.guide-option{background:hsl(var(--popover))}.guide-option:hover{background:hsl(var(--accent))}

.brand{display:flex;align-items:center;flex-shrink:0}.brand img{display:block;width:160px;height:auto}.dark .brand img{filter:invert(1)}@media(max-width:600px){.brand img{width:132px}}