body[data-tone-page=observe],body[data-tone-page=guide]{--tone-bg:#11131e;--tone-ink:#eeedf6;--tone-muted:#b8bdce;--tone-line:#38394b;background:var(--tone-bg);color:var(--tone-ink)}
body[data-tone-page=observe] .tone-header,body[data-tone-page=guide] .tone-header{background:#171628;color:#eeedf6}body[data-tone-page=observe] .tone-demo,body[data-tone-page=guide] .tone-demo{background:#252137;color:#d4cce5;border-color:#413852}.tone-mobile-brand>span{color:inherit}body[data-tone-page=observe] .tone-languages button,body[data-tone-page=guide] .tone-languages button{color:#c5bfd8}body[data-tone-page=observe] .tone-languages [aria-pressed=true],body[data-tone-page=guide] .tone-languages [aria-pressed=true]{background:#b7a5f224;color:white}
.obs-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}.obs-heading h1{font-size:clamp(26px,2.5vw,36px);line-height:1.3;margin:6px 0 12px;letter-spacing:-.02em}.obs-heading p{color:var(--tone-muted);max-width:76ch;margin:0}.obs-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#c8b5f4}.obs-pill{display:inline-block;border:1px solid #65547d;color:#d9c7fa;border-radius:6px;padding:4px 9px;font-size:12px;white-space:nowrap;background:#30263f}.obs-notice{padding:14px 18px;border:1px solid #5d4c73;background:#282237;border-radius:10px;color:#dbd1ed;font-size:14px;margin:18px 0 24px}.obs-review-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;margin-bottom:20px;color:var(--tone-muted)}.obs-review-controls button,.obs-tabs button,.obs-button{font:inherit;padding:9px 13px;background:#1d1f30;border:1px solid #4a4560;color:#ddd7eb;border-radius:7px;text-decoration:none;line-height:1.4}.obs-review-controls button[aria-pressed=true],.obs-tabs button[aria-pressed=true]{background:#3c3157;border-color:#a98bd7;color:white}.obs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--tone-line)}.obs-tabs a{font-size:14px;text-decoration:none;padding:8px 12px;color:#d3c2f2;border:1px solid #474055;border-radius:7px}.obs-section{margin:0 0 24px;scroll-margin-top:20px}.obs-section-head{display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}.obs-section h2{font-size:22px;margin:0}.obs-section h3{font-size:17px;margin:0 0 12px}.obs-section p{color:var(--tone-muted)}.obs-card{background:#1b1d2c;border:1px solid #37394e;border-radius:12px;padding:22px;min-width:0}.obs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.obs-rail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.obs-rail{background:#222234;border:1px solid #434054;border-radius:9px;padding:16px}.obs-rail strong{font-size:24px;color:#f0e8ff;display:block;margin:5px 0}.obs-rail small{font-size:13px;color:#bfb9ce}.obs-dl{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:0}.obs-dl>div{min-width:0}.obs-dl dt{color:var(--tone-muted);font-size:13px;margin-bottom:5px}.obs-dl dd{margin:0;overflow-wrap:anywhere}.obs-total{font-size:14px;color:#d6c0ff}.obs-total b{font-size:30px;margin-left:8px;color:#f1eaff}.obs-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:end}.obs-filters label{display:grid;gap:6px;font-size:13px;color:#bfc0d0;min-width:0}.obs-filters input,.obs-filters select{background:#121421;border:1px solid #57516a;border-radius:6px;color:#efedf6;padding:9px 10px;font:14px/1.4 Arial,'Yu Gothic UI',Meiryo,sans-serif;min-width:0;max-width:100%}.obs-table-wrap{overflow:auto;border:1px solid #3e3d51;border-radius:9px;margin-top:16px}.obs-table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}.obs-table th{font-size:12px;font-weight:600;color:#bbb3d1;background:#222133;white-space:nowrap}.obs-table th,.obs-table td{padding:13px 15px;border-bottom:1px solid #383747;vertical-align:top;line-height:1.6}.obs-table tr:last-child td{border-bottom:0}.obs-table code{font-size:12px}.obs-table details{min-width:130px}.obs-table td:first-child{color:#eee8fa}.obs-table summary{cursor:pointer;color:#d6bfff}.obs-table pre{max-width:48ch;max-height:340px;overflow:auto;margin:10px 0 0;padding:14px;background:#11121e;border-radius:6px;white-space:pre-wrap;word-break:break-word}.obs-caption{font-size:13px;color:#ada9c0;margin:12px 0 0}.obs-status{padding:30px 22px;background:#212033;border:1px dashed #686079;border-radius:10px;color:#d4c8e7;line-height:1.8}.obs-status strong{display:block;font-size:18px;margin-bottom:6px}.obs-state-error{border-color:#b78487;background:#30232f}.obs-state-empty{border-color:#696d85}.obs-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}.obs-flow article{border:1px solid #4a415e;border-radius:10px;padding:18px;background:#232033}.obs-flow small{display:block;color:#bda4eb;font-size:12px;margin-bottom:9px}.obs-flow b{font-size:17px}.obs-flow p{font-size:14px;margin:8px 0 0}.obs-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.obs-link-grid>a{padding:20px;border:1px solid #4a435b;border-radius:10px;background:#232031;color:#e0d2f8;text-decoration:none;font-size:16px}.obs-link-grid small{display:block;color:#b9b2c9;font-size:13px;margin-top:7px}.obs-source{font-size:14px}.obs-source>summary{font-size:16px;color:#d5bdf7;cursor:pointer}.obs-source>div{padding-top:18px}.obs-source h2{font-size:21px;margin:22px 0 14px}.obs-source h3{font-size:17px;margin:20px 0 12px}.obs-source code,.obs-source pre{font:13px/1.8 Consolas,monospace;overflow-wrap:anywhere}.obs-source pre{white-space:pre-wrap;background:#11131e;border:1px solid #39364a;border-radius:8px;padding:18px;overflow:auto}.obs-source table{width:100%;border-collapse:collapse;display:block;overflow:auto}.obs-source th,.obs-source td{padding:12px;border:1px solid #434052;text-align:left}.obs-source a{color:#d3baff}.obs-source img{max-width:100%}.obs-source button,.obs-source select{display:none}.obs-contract-note{padding:14px 18px;border-left:3px solid #aa8ad4;background:#272036;color:#ddd0ee;font-size:14px;margin-top:18px}.obs-log-controls{margin-bottom:16px}.obs-log-list{display:grid;gap:12px}.obs-log{padding:18px;border:1px solid #3e3b52;border-radius:8px;background:#242132}.obs-log header{display:flex;gap:12px;justify-content:space-between;align-items:start;flex-wrap:wrap;font-size:13px;color:#c6b0e8}.obs-log p{font-size:14px;margin:8px 0 0;overflow-wrap:anywhere}.obs-log time{color:#b4b5c9}.obs-log code{font-size:12px}.obs-doclinks{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.obs-doclinks a{color:#d5bdf7}.obs-empty-inline{padding:20px;color:#c5bcd5}.obs-review-controls button:focus-visible,.obs-tabs button:focus-visible,.obs-button:focus-visible{outline:3px solid #c8b0fa;outline-offset:3px}.obs-button:hover,.obs-tabs a:hover,.obs-link-grid>a:hover{background:#30283f;border-color:#9c7ccc}
@media(max-width:1100px){.obs-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.obs-grid{grid-template-columns:1fr}}
@media(max-width:600px){.obs-heading{display:block}.obs-heading h1{font-size:26px}.obs-heading .obs-pill{margin-top:14px}.obs-card{padding:18px}.obs-section h2{font-size:20px}.obs-rail-grid{grid-template-columns:1fr}.obs-rail{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 12px}.obs-rail small{grid-column:1/-1}.obs-rail strong{font-size:24px;margin:0}.obs-flow,.obs-link-grid{grid-template-columns:1fr}.obs-filters{gap:12px}.obs-filters label{flex:1;min-width:110px}.obs-filters input{width:100%}.obs-table-wrap{max-width:100%}.obs-table{min-width:600px}.obs-review-controls{gap:8px}.obs-review-controls>span{width:100%}.obs-review-controls button{padding:8px 10px}.obs-tabs button,.obs-tabs a{font-size:14px}.obs-dl{grid-template-columns:1fr}.obs-source{font-size:14px}.obs-source pre{font-size:12px;padding:12px}.obs-log{padding:15px}.obs-log header{display:grid;gap:6px}}
.obs-source code[data-source-block]{display:block;white-space:pre-wrap;overflow-wrap:anywhere;background:#11131e;border:1px solid #39364a;border-radius:8px;padding:16px;margin:8px 0 18px}

/* Keep the existing observation heading typography after moving it into the shell. */
.tone-header>.obs-heading{font-family:'Segoe UI','Yu Gothic UI',Meiryo,sans-serif}