/* Layout: one column workbench — museum-label surfaces (A) on a cabinet grid (B), research report blocks (C), learning pages (D). No external fonts, no CDN. */
:root{
  --bg:#F4EEE3; --surface:#FBF8F2; --surface-2:#ECE4D5; --ink:#1D1B17; --ink-2:#3A362F; --muted:#5E574B; --line:#D9CFBD; --line-2:#C9BEA9;
  --accent:#2E5E52; --accent-ink:#F4EEE3; --accent-soft:#DCE8E2; --warn:#8A5A12; --warn-soft:#F3E6CC; --danger:#8A3B1E; --danger-soft:#F2DCD2;
  --copper-1:#8F6140; --copper-2:#B98A5E; --silver-1:#A8A192; --silver-2:#CFC9BC; --focus:#1F5FAF;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171512; --surface:#201D19; --surface-2:#2A2621; --ink:#EFE8DC; --ink-2:#D3CABB; --muted:#A99F8F; --line:#3A352E; --line-2:#4A443B;
  --accent:#86BBA9; --accent-ink:#0F1F1A; --accent-soft:#1E302A; --warn:#DDAA5E; --warn-soft:#3A2E1A; --danger:#E3906E; --danger-soft:#3D241A;
  --copper-1:#7A5236; --copper-2:#A57A52; --silver-1:#8E887B; --silver-2:#B3AD9F; --focus:#7FB0F0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171512; --surface:#201D19; --surface-2:#2A2621; --ink:#EFE8DC; --ink-2:#D3CABB; --muted:#A99F8F; --line:#3A352E; --line-2:#4A443B;
  --accent:#86BBA9; --accent-ink:#0F1F1A; --accent-soft:#1E302A; --warn:#DDAA5E; --warn-soft:#3A2E1A; --danger:#E3906E; --danger-soft:#3D241A;
  --copper-1:#7A5236; --copper-2:#A57A52; --silver-1:#8E887B; --silver-2:#B3AD9F; --focus:#7FB0F0; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--accent)}a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,5vw,3.4rem)}h2{font-size:clamp(1.5rem,3vw,2.1rem)}h3{font-size:1.25rem}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1160px;margin:0 auto}
.narrow{max-width:560px;margin:0 auto}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-s{display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}
.label{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:.875rem}
.lede{font-size:1.125rem;color:var(--ink-2);max-width:62ch}
.prose{max-width:66ch}.prose p+p{margin-top:12px}
.prose{overflow-wrap:anywhere;min-width:0}
.num{font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;padding-block:12px}
.brand{font-family:var(--display);font-size:1.5rem;color:var(--ink);text-decoration:none}
.brand small{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);margin-left:8px;text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.banner{padding-block:8px;font-size:.875rem}
.banner-preview{background:var(--warn-soft);color:var(--ink);border-bottom:1px solid var(--warn)}
.banner-error{background:var(--danger-soft);color:var(--ink);border-bottom:1px solid var(--danger)}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{opacity:.92}
.btn-2{background:transparent;color:var(--ink)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--bg)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--accent);padding:0 8px;text-decoration:underline}
.btn-s{min-height:38px;padding:0 14px;font-size:.9rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .flabel{font-weight:600;font-size:.95rem}
.hint{font-size:.85rem;color:var(--muted)}
.err{font-size:.875rem;color:var(--danger);min-height:0}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],input[type=date],select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:2px;min-height:46px;padding:10px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
[aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 1px var(--danger)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;padding:0;margin-bottom:8px}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{width:20px;height:20px;margin-top:3px;flex:none}
.form-status{font-size:.95rem;padding:10px 12px;border-left:3px solid transparent}
.form-status:empty{display:none}
.st-error{background:var(--danger-soft);border-color:var(--danger)}
.st-ok{background:var(--accent-soft);border-color:var(--accent)}
.st-info{background:var(--surface-2);border-color:var(--line-2)}

/* surfaces */
.panel{background:var(--surface);border:1px solid var(--line);padding:clamp(16px,3vw,28px)}
.panel-2{background:var(--surface-2);padding:clamp(16px,3vw,28px)}
.section{padding-block:clamp(32px,6vw,64px)}
.rule{border-top:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:3px 10px;border:1px solid currentColor;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.t-ok{color:var(--accent)}.t-warn{color:var(--warn)}.t-danger{color:var(--danger)}.t-muted{color:var(--muted)}.t-ink{color:var(--ink)}
.kv{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.kv>div{padding:10px 0;border-bottom:1px solid var(--line)}
.kv>div:nth-child(odd){color:var(--muted);padding-right:12px}
.kv>div{min-width:0;overflow-wrap:anywhere}
@media (max-width:620px){
 .kv{grid-template-columns:minmax(0,1fr)}
 .kv>div:nth-child(odd){padding:10px 0 0;border-bottom:0;font-size:.85rem}
 .kv>div:nth-child(even){padding-top:2px}
}
.unknown{color:var(--muted);font-style:italic}
.empty{border:1px dashed var(--line-2);padding:clamp(20px,4vw,40px);text-align:left}
.toast-wrap{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);padding:12px 16px;max-width:520px;width:100%;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.err-t{background:var(--danger);color:var(--bg)}
.loading{padding-block:48px;color:var(--muted)}
.progress{height:6px;background:var(--surface-2);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);width:0}

/* coins */
.coin{aspect-ratio:1/1;border-radius:50%;max-width:100%;background:var(--copper-2);box-shadow:inset 0 0 0 6px var(--copper-1),inset 0 0 0 9px var(--copper-2),inset 0 0 0 10px var(--copper-1)}
.coin.silver{background:var(--silver-2);box-shadow:inset 0 0 0 6px var(--silver-1),inset 0 0 0 9px var(--silver-2),inset 0 0 0 10px var(--silver-1)}
.coin.empty-c{background:transparent;box-shadow:none;border:2px dashed var(--line-2)}
.thumb{width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;background:var(--surface-2);padding:clamp(18px,3vw,32px)}
.tray figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.tag{font-family:var(--mono);font-size:.72rem;background:var(--surface);padding:2px 6px;color:var(--ink-2)}

/* cabinet */
.cab{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cab-side{flex:1 1 220px;max-width:280px;min-width:0}
.cab-main{flex:999 1 560px;min-width:0}
@media (max-width:820px){.cab-side{max-width:none}}
.coll-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.coll-list li{border-bottom:1px solid var(--line)}
.coll-btn{display:flex;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:12px 4px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.coll-btn[aria-pressed="true"]{font-weight:700;color:var(--accent)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.item-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);padding:14px;min-width:0}
.item-card .t{font-family:var(--display);font-size:1.15rem;line-height:1.2;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.item-card .t:hover{text-decoration:underline}
.item-card .sel{margin-left:auto}
.photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:480px){.photo-pair{grid-template-columns:minmax(0,1fr)}}
.slot{background:var(--surface-2);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.slot .frame{aspect-ratio:1/1;max-width:100%;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot .frame img{width:100%;height:100%;object-fit:contain}
.file-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--ink);cursor:pointer;font-weight:600;background:var(--surface)}
.file-label:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details.tips{background:var(--surface-2);padding:12px 16px}
details.tips summary{cursor:pointer;font-weight:600}

/* reviews / report */
.steps{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{flex:1 1 140px;padding:12px 12px 12px 0;border-bottom:3px solid var(--line);font-size:.9rem;color:var(--muted)}
.steps li.done{border-bottom-color:var(--accent);color:var(--ink)}
.steps li.cur{border-bottom-color:var(--ink);color:var(--ink);font-weight:700}
.report-item{border-top:2px solid var(--ink);padding-top:16px}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.answers>div{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);min-width:0}
@media (max-width:620px){.answers{grid-template-columns:minmax(0,1fr)}}
.limits{border:1px solid var(--warn);background:var(--warn-soft);padding:16px}
.scroll-x{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-weight:600;background:var(--surface-2)}
.op-open{display:flex;align-items:center;min-height:44px;min-width:44px;font-family:var(--mono);font-size:.875rem;white-space:nowrap;text-underline-offset:3px}
.choice{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:12px;min-width:0}
.choice input{width:20px;height:20px;flex:none}
.choice.off{opacity:.55}
.confirm{border:2px solid var(--danger);background:var(--danger-soft);padding:16px}
.op-item{border:1px solid var(--line);background:var(--surface);padding:16px}
.evidence-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:var(--surface-2);padding:12px}
@media (max-width:620px){.evidence-row{grid-template-columns:minmax(0,1fr)}}
.foot{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:.875rem}

/* Literal style attributes from the Claude original, unchanged. */
#root .claude-style-1{width:70%}
#root .claude-style-2{font-family:var(--display);font-size:2.2rem;line-height:1}
#root .claude-style-3{align-items:center;gap:clamp(24px,5vw,64px)}
#root .claude-style-4{width:86%}
#root .claude-style-5{padding-left:20px;margin:0}
#root .claude-style-6{font-size:clamp(1.8rem,4vw,2.4rem)}
#root .claude-style-7{font-size:clamp(1.8rem,4vw,2.6rem)}
#root .claude-style-8{width:80%}
#root .claude-style-9{min-width:0;flex:1}
#root .claude-style-10{gap:8px}
#root .claude-style-11{align-items:flex-start}
#root .claude-style-12{min-width:0}
#root .claude-style-13{font-size:clamp(1.8rem,4vw,2.8rem);overflow-wrap:anywhere}
#root .claude-style-14{align-items:start}
#root .claude-style-15{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
#root .claude-style-16{margin:0;padding-left:18px}
#root .claude-style-17{margin:10px 0 0;padding-left:18px}
#root .claude-style-18{max-width:820px}
#root .claude-style-19{text-decoration:none;color:inherit;justify-content:space-between;flex-wrap:wrap}
#root .claude-style-20{font-size:2rem}
#root .claude-style-21{width:48px;height:48px}
#root .claude-style-22{overflow-wrap:anywhere}
#root .claude-style-23{max-width:860px}
#root .claude-style-24{margin-top:12px}
#root .claude-style-25{max-width:none}
#root .claude-style-26{color:var(--warn)}
#root .claude-style-27{margin:0;padding-left:20px}
#root .claude-style-28{align-items:start;gap:clamp(24px,4vw,48px)}
#root .claude-style-29{margin-top:8px}
#root .claude-style-30{max-width:280px}
#root .claude-style-31{font-size:clamp(1.6rem,3.6vw,2.4rem)}
#root .claude-style-32{flex:0 1 260px}
#root .claude-style-33{padding:8px}
#root .claude-style-34{flex:1 1 300px;min-width:0}
#root .claude-style-35{align-self:end}
#root .claude-style-36{align-items:end}

/* Keep the authored solid button contrast inside header navigation. */
.nav a.btn{color:var(--bg)}

/* Literal styles from the Claude UX additions. */
#root .claude-addon-style-1{background:var(--surface-2);border-bottom:1px solid var(--line)}
#root .claude-addon-style-2{border-style:dashed}
#root .claude-addon-style-3{padding-top:24px}
#root .claude-addon-style-4{list-style:none;margin:0;padding:0}
.catalog-lookup .catalog-candidates{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.catalog-lookup .catalog-candidates>li{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.catalog-lookup a{overflow-wrap:anywhere}
.catalog-lookup[data-state="provider_not_configured"] [data-catalog-button]{display:none}

/* Licensed-reference example — Claude-authored layout. */
.sample-notice{border-color:var(--accent)}
.sample-fig{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.sample-frame{aspect-ratio:1/1;max-width:100%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sample-frame img{width:100%;height:100%;object-fit:contain}
.sample-fig figcaption{overflow-wrap:anywhere}
.sample-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.sample-dl{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:0;margin:0;border-top:1px solid var(--line)}
.sample-dl dt,.sample-dl dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.sample-dl dt{color:var(--muted);padding-right:12px}
.sample-next{margin:0;padding-left:20px}
.sample-sources ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
@media (max-width:620px){
  .sample-dl{grid-template-columns:minmax(0,1fr)}
  .sample-dl dt{padding:8px 0 0;border-bottom:0;font-size:.85rem}
  .sample-dl dd{padding-top:2px}
}