/* SHAPE-04 chrome — top bar, record rail, Key, peek, tooltips, context menu. Site-wide. */
:root{--rail:46px}
body.has-chrome{padding-left:var(--rail)}
body.has-chrome .site-head{display:none}

/* top bar */
.topbar{position:sticky;top:0;z-index:95;height:62px;display:flex;align-items:center;gap:22px;padding:0 clamp(14px,3vw,40px);background:rgba(244,241,235,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(32,43,40,.13)}
.topbar .brand{flex:none}
.topnav{display:flex;gap:4px;align-items:center;flex:1;min-width:0}
.topnav a,.topnav button{border:0;background:none;padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.72;cursor:pointer;white-space:nowrap}
.topnav a:hover,.topnav button:hover,.topnav .on{opacity:1;color:var(--clay)}
.topnav .kyle{color:var(--teal);opacity:1}
.top-tools{display:flex;align-items:center;gap:8px;flex:none}
.find{position:relative}
.find input{width:190px;border:1px solid #b9c0bd;background:var(--white);padding:7px 10px 7px 26px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.find input:focus{outline:2px solid var(--clay);outline-offset:0;border-color:var(--clay)}
.find::before{content:"⌕";position:absolute;left:9px;top:50%;transform:translateY(-52%);font-size:13px;color:var(--muted)}
.find kbd{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:9px;color:var(--muted);border:1px solid #c9cfcc;padding:0 4px}
.find-list{position:absolute;right:0;top:calc(100% + 4px);width:320px;background:var(--night);border:1px solid #5d6d68;z-index:120;max-height:60vh;overflow:auto;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.find-list[hidden]{display:none}
.find-list button{display:grid;grid-template-columns:42px 1fr;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid #34433f;background:none;color:var(--nightText);padding:8px 10px;cursor:pointer}
.find-list button:hover,.find-list button.hl{background:#2b3a36}
.find-list b{font-family:var(--mono);font-size:10px;color:#e4b08f}
.find-list span{font-size:12px;line-height:1.25}
.find-list small{display:block;font-family:var(--serif);font-style:italic;color:#9da8a4;font-size:11px}
.keybtn{border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;padding:7px 10px;cursor:pointer;letter-spacing:.06em}
.keybtn:hover{background:var(--clay);border-color:var(--clay)}

/* record rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:110;background:var(--night);color:var(--nightText);display:flex;flex-direction:column;transition:width .22s cubic-bezier(.2,.8,.2,1);overflow:hidden;border-right:1px solid #33423d}
.rail.open{width:330px;box-shadow:18px 0 50px rgba(0,0,0,.25)}
.rail-head{height:62px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid #33423d}
.rail-toggle{width:26px;height:26px;flex:none;border:1px solid #5d6d68;background:none;color:#e4b08f;font-family:var(--mono);font-size:12px;cursor:pointer}
.rail-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#c9d4d8;white-space:nowrap;opacity:0;transition:opacity .2s}
.rail.open .rail-title{opacity:1}
.rail-title small{display:block;letter-spacing:0;font-family:var(--serif);font-style:italic;color:#9da8a4;font-size:11px}
.rail-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0;scrollbar-width:thin;scrollbar-color:#56645f var(--night)}
.rail-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;width:330px;border:0;background:none;color:inherit;text-align:left;padding:5px 8px;cursor:pointer;position:relative}
.rail-row:hover,.rail-row.cur{background:#2b3a36}
.rail-row .rid-t{font-family:var(--mono);font-size:9px;font-weight:800;color:#e4b08f;text-align:center}
.rail-row.cur .rid-t{color:#fff;background:var(--clay);padding:1px 0}
.rail-row .rr-main{min-width:0;opacity:0;transition:opacity .15s}
.rail.open .rail-row .rr-main{opacity:1}
.rail-row .rr-main b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-row .rr-main small{display:block;font-family:var(--serif);font-style:italic;font-size:11px;color:#9da8a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-row .rr-b{display:flex;gap:3px;opacity:0;padding-right:6px}
.rail.open .rail-row .rr-b{opacity:1}
.rail-era{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:#6f7f7a;padding:10px 10px 3px;white-space:nowrap}
.rail:not(.open) .rail-era{color:transparent;height:6px;padding:0;border-top:1px solid #33423d;margin:6px 8px}
.rail-foot{flex:none;border-top:1px solid #33423d;padding:8px 10px;font-family:var(--mono);font-size:8px;color:#82918c;white-space:nowrap;opacity:0}
.rail.open .rail-foot{opacity:1}
.bdg{font-family:var(--mono);font-size:7px;letter-spacing:.06em;border:1px solid;padding:1px 4px;border-radius:99px;white-space:nowrap}
.bdg.live{color:#e4b08f;border-color:#a5664a}.bdg.case{color:#85c5a4;border-color:#5f8f77}.bdg.syn{color:#9da8a4;border-color:#56645f}.bdg.real{color:#85c5a4;border-color:#5f8f77}.bdg.prop{color:#dfb064;border-color:#8c6d2c}

/* slide-over panels (peek + key) */
.slide{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:130;background:var(--night);color:var(--nightText);transform:translateX(102%);transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s .25s;display:flex;flex-direction:column;visibility:hidden}
.slide.open{transform:none;visibility:visible;transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.3)}
.slide-head{flex:none;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #4c5b57}
.slide-head b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#e4b08f}
.slide-head button{border:1px solid #697872;background:none;color:#e3e8e5;width:28px;height:28px;cursor:pointer;font-size:15px}
.slide-body{flex:1;overflow:auto;padding:18px 20px 30px}
.slide-body h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin:6px 0 4px}
.slide-body h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#e4b08f;margin:22px 0 8px;text-transform:uppercase}
.slide-body p{color:#c8d0cc;font-size:13.5px;line-height:1.5}
.slide-body .co{font-family:var(--serif);font-style:italic;color:#cdd3d0}
.slide-body .meta{font-family:var(--mono);font-size:10px;color:#9da8a4}
.slide-body .steps div{display:grid;grid-template-columns:76px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #34433f}
.slide-body .steps b{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#9faeaa}
.slide-body .steps span{font-size:12px;color:#e1e6e3}
.slide-body .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.slide-body .links a,.slide-body .links button{border:1px solid #697872;background:none;color:#e3e8e5;font-family:var(--mono);font-size:9.5px;padding:6px 8px;cursor:pointer}
.slide-body .links a:hover,.slide-body .links button:hover{border-color:#e4b08f;color:#e4b08f}
.kyle-slot{border:1px dashed #5d6d68;padding:10px 12px;margin-top:8px;font-family:var(--serif);font-style:italic;color:#9da8a4;font-size:13px}
.key-sec{border-top:1px solid #34433f;padding-top:4px}
.key-row{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:6px 0;font-size:12.5px;color:#d5ded9;align-items:start}
.key-row>span:first-child{font-family:var(--mono);font-size:10px;color:#e1e8e4}
.key-row i.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.slide-body kbd{font-family:var(--mono);font-size:10px;border:1px solid #697872;padding:1px 5px;color:#e3e8e5}
.scrim{position:fixed;inset:0;z-index:105;background:rgba(15,22,20,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}

/* tooltip engine */
.tip:hover::after,.tip:focus::after{display:none!important}
.cw-tip{position:fixed;z-index:200;max-width:280px;background:var(--night);color:var(--nightText);border:1px solid #5d6d68;padding:8px 10px;font-family:var(--sans);font-size:11.5px;line-height:1.42;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.cw-tip.on{opacity:1;transform:none}
.cw-tip b{font-family:var(--mono);font-size:10px;color:#e4b08f;display:block;margin-bottom:2px;letter-spacing:.06em}
.cw-tip em{display:block;font-family:var(--mono);font-style:normal;font-size:9px;color:#82918c;margin-top:5px}
[data-term]{border-bottom:1px dotted currentColor;cursor:help}
[data-rid]{cursor:context-menu}

/* context menu */
.cw-menu{position:fixed;z-index:210;min-width:250px;max-width:320px;background:#16231f;color:#e3e8e5;border:1px solid #607370;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:0;font-family:var(--sans);opacity:0;transform:scale(.97);transform-origin:top left;transition:opacity .1s,transform .1s}
.cw-menu.on{opacity:1;transform:none}
.cw-menu .m-head{padding:10px 12px 9px;border-bottom:1px solid #34433f;background:rgba(255,255,255,.03)}
.cw-menu .m-head b{display:block;font-family:var(--serif);font-size:16px;line-height:1.1;color:#fff}
.cw-menu .m-head span{display:block;font-family:var(--mono);font-size:9px;color:#9caaa5;margin-top:3px}
.cw-menu .m-head i{font-style:normal;font-family:var(--mono);font-size:9px;color:#e4b08f;border:1px solid #a5664a;padding:0 4px;margin-right:6px}
.cw-menu .m-grp{padding:4px 0;border-bottom:1px solid #2c3a36}
.cw-menu .m-grp:last-of-type{border-bottom:0}
.cw-menu button{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;border:0;background:none;color:inherit;text-align:left;padding:7px 12px;font-size:12.5px;cursor:pointer}
.cw-menu button:hover,.cw-menu button:focus{background:#2b3a36;outline:none;color:#fff}
.cw-menu button small{font-family:var(--mono);font-size:9px;color:#82918c}
.cw-menu button:hover small,.cw-menu button:focus small{color:#e4b08f}
.cw-menu .m-foot{padding:7px 12px;font-family:var(--mono);font-size:8.5px;color:#6f7f7a;border-top:1px solid #34433f;letter-spacing:.04em}
.cw-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:220;background:var(--night);color:#fff;border:1px solid #607370;font-family:var(--mono);font-size:11px;padding:8px 12px;opacity:0;transition:opacity .2s}
.cw-toast.on{opacity:1}

/* voice provenance */
.voice{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;padding:3px 7px;border:1px solid;vertical-align:middle}
.voice.kyle{color:var(--teal);border-color:var(--teal);background:rgba(26,104,120,.06)}
.voice.ai{color:var(--muted);border-color:#b9c0bd}
.voice.kyle.dark{color:#7fb9c4;border-color:#4e8a96;background:rgba(127,185,196,.08)}
.voice.ai.dark{color:#9da8a4;border-color:#56645f}
.case-kyle{background:var(--paper);padding:clamp(60px,8vw,110px) clamp(20px,6vw,100px);border-top:1px solid var(--rule)}
.case-kyle h2{font-family:var(--serif);font-size:clamp(40px,5vw,68px);line-height:.98;letter-spacing:-.04em;margin:16px 0 10px}
.case-kyle h2 em{color:var(--teal);font-weight:400}
.case-kyle .intro{font-family:var(--serif);font-size:18px;color:var(--muted);max-width:760px}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:1px solid var(--ink);margin-top:30px}
.quote{padding:26px 26px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote blockquote{font-family:var(--serif);font-size:23px;line-height:1.28;margin:12px 0 14px;letter-spacing:-.01em}
.quote blockquote::before{content:"“";color:var(--teal)}.quote blockquote::after{content:"”";color:var(--teal)}
.quote .src{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em}
.quote.slot blockquote{color:#a7a59d;font-style:italic;font-size:18px}
.quote.slot blockquote::before,.quote.slot blockquote::after{content:""}

@media(max-width:1050px){.topnav a:not(.kyle),.topnav button{display:none}.find input{width:140px}}
@media(max-width:720px){.topnav{display:none}:root{--rail:0px}.rail{width:0;border:0}.rail.open{width:min(330px,88vw)}.rail-mobile{display:inline-flex!important}.find kbd{display:none}.find input{width:110px}.topbar{gap:10px}.topbar .brand span{display:none}}
.rail-mobile{display:none;border:1px solid var(--ink);background:none;font-family:var(--mono);font-size:10px;font-weight:800;padding:6px 8px;cursor:pointer}