.architecture-studio { --studio-blue: #718da3; --studio-deep: #304a5e; --studio-pale: #dce6ed; --studio-line: color-mix(in srgb, var(--studio-blue) 38%, var(--rule)); }
.studio-utility { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 0; padding:11px 14px; border:1px solid var(--studio-line); background:color-mix(in srgb, var(--studio-pale) 58%, var(--paper)); font:500 10px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.studio-utility nav { display:flex; flex-wrap:wrap; gap:14px; }
.studio-utility a { color:var(--ink-soft); text-decoration:none; }
.studio-utility a:hover, .studio-utility a[aria-current="page"] { color:var(--ink); }
.studio-lede { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:clamp(30px,6vw,90px); align-items:end; padding:clamp(70px,10vw,130px) 0 58px; }
.studio-lede h1 { max-width:13ch; margin:12px 0 0; font-size:clamp(50px,8vw,110px); line-height:.88; letter-spacing:-.065em; }
.studio-lede h1 em { color:var(--studio-blue); font-style:normal; }
.studio-lede-copy { padding-bottom:8px; }
.studio-lede-copy p { margin:0 0 22px; color:var(--ink-soft); font-size:clamp(16px,2vw,20px); line-height:1.6; }
.studio-safety { margin:0 0 36px; padding:16px 18px; border-left:3px solid var(--studio-blue); background:var(--panel); color:var(--ink-soft); font-size:12px; line-height:1.65; }
.studio-safety strong { color:var(--ink); }
.studio-section { margin:50px 0 0; padding-top:36px; border-top:1px solid var(--rule); }
.studio-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.studio-section-head h2 { max-width:18ch; margin:8px 0 0; font-size:clamp(32px,5vw,64px); line-height:1; letter-spacing:-.045em; }
.studio-section-head > p { max-width:52ch; margin:0; color:var(--ink-soft); line-height:1.6; }
.studio-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:22px; padding:16px; border:1px solid var(--rule); background:var(--panel); }
.studio-filters label, .builder-question, .builder-field { display:grid; gap:7px; color:var(--ink-soft); font:550 9px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.studio-filters input, .studio-filters select, .builder-question select, .builder-field input, .builder-field select { width:100%; min-width:0; min-height:44px; padding:9px 11px; border:1px solid var(--rule); border-radius:0; background:var(--paper); color:var(--ink); font:13px/1.4 var(--display); }
.architecture-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.architecture-card { position:relative; display:grid; gap:18px; min-width:0; padding:clamp(24px,4vw,38px); border:1px solid var(--rule); background:var(--panel); }
.architecture-card:hover { border-color:var(--studio-blue); }
.architecture-card header { display:grid; gap:9px; }
.architecture-card h3 { margin:0; font-size:clamp(25px,3vw,38px); line-height:1.02; letter-spacing:-.04em; }
.architecture-card p { margin:0; color:var(--ink-soft); line-height:1.55; }
.architecture-meta, .architecture-tags, .legend, .card-actions, .studio-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.architecture-meta span, .architecture-tags span, .legend span, .semantic-pill { padding:6px 8px; border:1px solid var(--rule); color:var(--ink-soft); font:500 9px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.card-actions { margin-top:auto; }
.studio-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 14px; border:1px solid var(--studio-deep); border-radius:0; background:var(--studio-deep); color:#fff; cursor:pointer; font:600 10px/1 var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.studio-button.secondary { background:transparent; color:var(--studio-deep); border-color:var(--rule); }
.studio-button:hover, .studio-button:focus-visible { border-color:var(--studio-blue); outline:2px solid color-mix(in srgb,var(--studio-blue) 35%,transparent); outline-offset:2px; }
.compare-check { display:flex; gap:7px; align-items:center; color:var(--ink-soft); font:500 10px/1.4 var(--mono); }
.compare-panel { margin:22px 0; padding:22px; border:1px solid var(--studio-line); background:color-mix(in srgb,var(--studio-pale) 40%,var(--panel)); }
.compare-panel[hidden] { display:none; }
.compare-table-wrap { overflow:auto; }
.compare-table { width:100%; min-width:760px; border-collapse:collapse; background:var(--panel); }
.compare-table th, .compare-table td { padding:13px; border:1px solid var(--rule); text-align:left; vertical-align:top; font-size:12px; line-height:1.5; }
.compare-table th { color:var(--studio-deep); font:600 10px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.architecture-detail { margin-top:28px; scroll-margin-top:110px; }
.architecture-detail[hidden] { display:none; }
.detail-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:36px; padding:clamp(28px,5vw,54px); background:var(--studio-deep); color:#f6f9fb; }
.detail-hero h2 { margin:8px 0 12px; font-size:clamp(34px,5vw,70px); line-height:.95; letter-spacing:-.05em; }
.detail-hero p { margin:0; color:#c8d6df; line-height:1.6; }
.detail-hero .eyebrow { color:#b7ccda; }
.detail-anchor { align-self:end; padding:18px; border:1px solid rgba(255,255,255,.24); }
.detail-anchor span, .detail-anchor strong { display:block; }
.detail-anchor span { color:#a9bfcd; font:500 9px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.detail-anchor strong { margin-top:8px; font-size:20px; }
.detail-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--rule); }
.view-toggle { display:flex; gap:4px; }
.view-toggle button { padding:8px 11px; border:1px solid var(--rule); background:transparent; color:var(--ink-soft); cursor:pointer; font:550 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.view-toggle button[aria-pressed="true"] { background:var(--studio-pale); color:var(--studio-deep); border-color:var(--studio-blue); }
.architecture-canvas { display:grid; gap:14px; padding:24px 0; }
.architecture-canvas.diagram { grid-template-columns:repeat(3,minmax(0,1fr)); }
.architecture-canvas.list { grid-template-columns:1fr; }
.band-card { min-width:0; padding:20px; border:1px solid var(--rule); background:var(--panel); }
.band-card.control { background:color-mix(in srgb,var(--studio-pale) 45%,var(--panel)); }
.band-card.human { background:color-mix(in srgb,#d8cdb5 24%,var(--panel)); }
.band-card header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.band-card h3 { margin:0; font-size:17px; line-height:1.2; }
.band-card header span { color:var(--studio-blue); font:550 8px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.component-list { display:grid; gap:9px; }
.component-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:12px; align-items:center; min-width:0; padding:10px; border:1px solid var(--rule); background:var(--paper); text-align:left; }
button.component-card { width:100%; color:inherit; cursor:pointer; }
.component-card:hover, .component-card:focus-visible { border-color:var(--studio-blue); outline:none; }
.product-mark { width:54px; height:42px; display:flex; align-items:center; justify-content:center; padding:4px; overflow:hidden; border:1px solid var(--rule); background:#fff; color:#273946; font:700 8px/1.1 var(--mono); text-align:center; }
.product-mark img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.component-copy { min-width:0; }
.component-copy strong, .component-copy small { display:block; }
.component-copy strong { font-size:13px; overflow-wrap:anywhere; }
.component-copy small { margin-top:3px; color:var(--ink-soft); font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
.semantic-symbol { color:var(--studio-blue); font:700 15px/1 var(--mono); }
.flow-lane { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; margin:10px 0 26px; border:1px solid var(--rule); background:var(--rule); }
.flow-lane div { min-width:0; padding:16px; background:var(--panel); }
.flow-lane span { display:block; color:var(--studio-blue); font:600 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.flow-lane p { margin:6px 0 0; color:var(--ink-soft); font-size:11px; line-height:1.45; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.detail-panel { padding:22px; border:1px solid var(--rule); background:var(--panel); }
.detail-panel.wide { grid-column:1/-1; }
.detail-panel h3 { margin:0 0 12px; font-size:20px; }
.detail-panel ul { margin:0; padding-left:18px; }
.detail-panel li { margin:8px 0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.fde-lane { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.fde-lane article { padding:16px; border-top:3px solid var(--studio-blue); background:color-mix(in srgb,var(--studio-pale) 36%,var(--panel)); }
.fde-lane span { color:var(--studio-blue); font:600 9px/1 var(--mono); }
.fde-lane p { margin:8px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.5; }
.builder-start { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px; border:1px solid var(--studio-line); background:var(--panel); }
.builder-shell { display:grid; grid-template-columns:minmax(270px,.34fr) minmax(0,.66fr); gap:22px; align-items:start; }
.builder-sidebar { position:sticky; top:22px; display:grid; gap:16px; }
.builder-panel { padding:18px; border:1px solid var(--rule); background:var(--panel); }
.builder-panel h2, .builder-panel h3 { margin:0 0 12px; }
.builder-notice { padding:12px; background:var(--studio-pale); color:var(--studio-deep); font-size:11px; line-height:1.55; }
.builder-band-list, .product-palette { display:grid; gap:8px; max-height:380px; overflow:auto; }
.builder-band-list label, .palette-item { display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start; padding:9px; border:1px solid var(--rule); color:var(--ink-soft); font-size:11px; line-height:1.4; text-transform:none; letter-spacing:0; }
.palette-item { grid-template-columns:1fr auto; }
.palette-item button { border:1px solid var(--rule); background:transparent; color:var(--studio-deep); cursor:pointer; }
.builder-component { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; align-items:center; min-width:0; padding:10px; border:1px solid var(--rule); background:var(--paper); }
.builder-component select { grid-column:2; width:100%; min-width:0; min-height:36px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); font-size:11px; }
.builder-component button { width:34px; height:34px; border:1px solid var(--rule); background:transparent; color:var(--ink-soft); cursor:pointer; }
.builder-component-actions { display:flex; grid-column:2; gap:6px; }
.local-draft { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid #d7c7a2; background:color-mix(in srgb,#f4e7c8 66%,var(--panel)); color:#6b5127; font-size:11px; }
.local-draft div { display:flex; flex-wrap:wrap; gap:8px; }
.empty-state { padding:30px; border:1px dashed var(--rule); color:var(--ink-soft); text-align:center; }
.studio-dialog { width:min(92vw,760px); max-height:86vh; overflow:auto; padding:0; border:1px solid var(--rule); border-radius:0; background:var(--paper); color:var(--ink); }
.studio-dialog::backdrop { background:rgba(13,25,33,.72); }
.studio-dialog article { padding:clamp(24px,5vw,42px); }
.studio-dialog header { display:flex; justify-content:space-between; gap:20px; }
.studio-dialog h2 { margin:6px 0 0; font-size:34px; }
.studio-dialog-close { width:38px; height:38px; border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer; font-size:22px; }
.product-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.product-detail-grid div { padding:14px; border:1px solid var(--rule); }
.product-detail-grid dt { color:var(--studio-blue); font:600 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.product-detail-grid dd { margin:6px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.55; }
.product-sources { margin-top:18px; }
.product-sources a { display:block; margin:8px 0; color:var(--studio-deep); font-size:12px; overflow-wrap:anywhere; }
.status-line { color:var(--ink-soft); font:500 10px/1.5 var(--mono); }
.status-line[role="status"] { min-height:18px; }

@media (max-width:1000px) {
  .studio-lede { grid-template-columns:1fr; }
  .studio-lede h1 { max-width:16ch; }
  .studio-filters, .builder-start { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .architecture-canvas.diagram { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-lane, .fde-lane { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-shell { grid-template-columns:1fr; }
  .builder-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .studio-lede { padding-top:64px; }
  .studio-lede h1 { font-size:52px; }
  .studio-section-head { align-items:start; flex-direction:column; }
  .studio-filters, .builder-start, .architecture-grid, .architecture-canvas.diagram, .detail-grid, .product-detail-grid { grid-template-columns:1fr; }
  .detail-hero { grid-template-columns:1fr; }
  .detail-panel.wide { grid-column:auto; }
  .component-card { grid-template-columns:48px minmax(0,1fr) auto; }
  .builder-sidebar { grid-template-columns:1fr; }
  .builder-component { grid-template-columns:48px minmax(0,1fr); }
  .flow-lane, .fde-lane { grid-template-columns:1fr; }
  .studio-actions .studio-button { flex:1; }
}
@media print {
  @page { size:landscape; margin:12mm; }
  .site-header, .practice-nav, .studio-utility, .studio-lede, .studio-safety, .studio-filters, .architecture-grid, .compare-panel, .detail-toolbar, .builder-sidebar, .builder-start, .local-draft, .site-footer, .studio-dialog { display:none !important; }
  .wrap { width:100%; max-width:none; padding:0; }
  .studio-section { margin:0; padding:0; border:0; }
  .studio-section-head { display:none; }
  .architecture-detail, .architecture-detail[hidden] { display:block !important; margin:0; }
  .detail-hero { break-after:avoid; }
  .architecture-canvas.diagram { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .band-card, .detail-panel { break-inside:avoid; }
  a { text-decoration:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }