/* Tool demos (ported from the previous site). Colour tokens are HSL triplets used as hsl(var(--x)). */
#tcdemo{--background:40 25% 98%;--foreground:27 14% 10%;--card:0 0% 100%;--border:38 17% 88%;--muted-foreground:33 7% 39%;--muted:36 20% 94%;--secondary:38 22% 95%;--accent:38 52% 34%;--ink:27 14% 10%;--stone:33 8% 60%;--radius:14px;--hover-shadow:0 40px 90px -30px rgba(0,0,0,.5);font-family:var(--font);color:hsl(var(--foreground))}
#tcdemo .modal{border-radius:24px!important}
#tcdemo .mhead h3{font-weight:800!important;letter-spacing:-.02em}

#tcdemo .notice{margin-top:28px;display:flex;gap:11px;align-items:flex-start;background:hsl(var(--secondary));border-left:2px solid hsl(var(--accent));padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;max-width:680px}
#tcdemo .notice svg{flex:none;margin-top:4px}
#tcdemo .notice p{font-size:13.5px;color:hsl(var(--muted-foreground));line-height:1.6}
#tcdemo .btn{font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;background:hsl(var(--ink));color:hsl(var(--background));border:none;padding:10px 16px;border-radius:var(--radius);transition:.18s;align-self:flex-start}
#tcdemo{position:fixed;inset:0;background:rgba(20,17,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:150;display:none;padding:28px 16px;overflow-y:auto}
#tcdemo.on{display:block}
#tcdemo .modal{background:hsl(var(--background));max-width:1020px;margin:0 auto;border-radius:var(--radius);box-shadow:var(--hover-shadow);overflow:hidden}
#tcdemo .mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 26px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));position:sticky;top:0;z-index:5}
#tcdemo .mhead h3{font-family:var(--font);font-size:25px;font-weight:400;margin-bottom:3px;line-height:1.25}
#tcdemo .mhead p{font-size:13px;color:hsl(var(--muted-foreground))}
#tcdemo .x{background:none;border:1px solid hsl(var(--border));border-radius:var(--radius);width:34px;height:34px;flex:none;cursor:pointer;color:hsl(var(--muted-foreground));display:grid;place-items:center;transition:.18s}
#tcdemo .x:hover{border-color:hsl(var(--accent));color:hsl(var(--accent))}
#tcdemo .mbody{padding:26px}
#tcdemo .sampleflag{font-size:12.5px;color:hsl(var(--muted-foreground));background:hsl(var(--secondary));border-left:2px solid hsl(var(--accent));padding:11px 15px;border-radius:0 var(--radius) var(--radius) 0;margin-bottom:22px;display:flex;gap:9px;align-items:flex-start;line-height:1.55}
#tcdemo .sampleflag svg{flex:none;margin-top:3px}
#tcdemo .how{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:24px}
#tcdemo .step{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:15px 17px}
#tcdemo .step .num{font-family:var(--font);font-size:15px;color:hsl(var(--accent));border:1px solid hsl(var(--accent)/.4);width:24px;height:24px;border-radius:99px;display:grid;place-items:center;margin-bottom:9px}
#tcdemo .step p{font-size:13px;color:hsl(var(--muted-foreground));line-height:1.55}
#tcdemo .howlabel{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:500;margin-bottom:12px}
#tcdemo .pctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
#tcdemo .chip{font-family:var(--font);font-size:12.5px;font-weight:500;cursor:pointer;background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));padding:7px 14px;border-radius:99px;transition:.16s}
#tcdemo .chip:hover{border-color:hsl(var(--stone))}
#tcdemo .chip.on{background:hsl(var(--ink));color:hsl(var(--background));border-color:hsl(var(--ink))}
#tcdemo .pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-bottom:22px}
#tcdemo .stat{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:15px 17px}
#tcdemo .stat .n{font-family:var(--font);font-size:30px;line-height:1;margin-bottom:5px}
#tcdemo .stat .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:500;line-height:1.4}
#tcdemo .tblwrap{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;background:hsl(var(--card))}
#tcdemo .scroller{overflow-x:auto}
#tcdemo table{width:100%;border-collapse:collapse;font-size:13.5px}
#tcdemo table.wide{min-width:760px}
#tcdemo thead th{text-align:left;padding:12px 16px;background:hsl(var(--secondary));font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));white-space:nowrap}
#tcdemo tbody td{padding:13px 16px;border-bottom:1px solid hsl(var(--border));vertical-align:top}
#tcdemo tbody tr:last-child td{border-bottom:none}
#tcdemo tbody tr{transition:background .15s}
#tcdemo tbody tr:hover{background:hsl(var(--secondary)/.5)}
#tcdemo .co{font-weight:500;color:hsl(var(--foreground));display:block;margin-bottom:2px}
#tcdemo .sub{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.5}
#tcdemo .pill{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:99px;white-space:nowrap;display:inline-block}
#tcdemo .s1{background:hsl(207 24% 90%);color:hsl(214 18% 32%)}
#tcdemo .s2{background:hsl(38 55% 88%);color:hsl(38 62% 28%)}
#tcdemo .s3{background:hsl(150 30% 88%);color:hsl(150 40% 24%)}
#tcdemo .s4{background:hsl(210 34% 89%);color:hsl(210 44% 28%)}
#tcdemo .s5{background:hsl(0 30% 91%);color:hsl(0 40% 36%)}
#tcdemo .s6{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
#tcdemo .due{font-size:12.5px;color:hsl(var(--muted-foreground));white-space:nowrap}
#tcdemo .due.late{color:hsl(0 60% 44%);font-weight:500}
#tcdemo .empty{padding:40px;text-align:center;color:hsl(var(--muted-foreground));font-size:14px}
#tcdemo .doc{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:28px 30px;font-size:14px;line-height:1.75}
#tcdemo .doc h4{font-family:var(--font);font-size:19px;font-weight:400;margin:22px 0 9px}
#tcdemo .doc h4:first-child{margin-top:0}
#tcdemo .doc p{margin-bottom:12px;color:hsl(var(--muted-foreground))}
#tcdemo .doc .k{color:hsl(var(--foreground));font-weight:500}
#tcdemo .doc ul{margin:0 0 12px 18px;color:hsl(var(--muted-foreground))}
#tcdemo .doc li{margin-bottom:6px}
#tcdemo .doc hr{border:none;border-top:1px solid hsl(var(--border));margin:20px 0}
#tcdemo .field{margin-bottom:14px}
#tcdemo .field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:500;margin-bottom:6px}
#tcdemo .field input,#tcdemo .field select{width:100%;font-family:var(--font);font-size:13.5px;font-weight:300;padding:9px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground))}
#tcdemo .field input:focus,#tcdemo .field select:focus{outline:none;border-color:hsl(var(--accent))}
#tcdemo .twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#tcdemo .split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#tcdemo .panel{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:18px}
#tcdemo .panel .ph{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:500;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid hsl(var(--border))}
#tcdemo .raw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;color:hsl(var(--muted-foreground));white-space:pre-wrap}
#tcdemo .kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid hsl(var(--border));font-size:13.5px}
#tcdemo .kv:last-child{border-bottom:none}
#tcdemo .kv .kk{color:hsl(var(--muted-foreground));flex:none}
#tcdemo .kv .vv{text-align:right;font-weight:500}
#tcdemo .flag{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--radius);margin-bottom:10px;font-size:13.5px;line-height:1.6}
#tcdemo .flag .fl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:none;padding:2px 8px;border-radius:99px;margin-top:2px}
#tcdemo .fhigh{background:hsl(0 42% 95%);border:1px solid hsl(0 40% 87%)}
#tcdemo .fhigh .fl{background:hsl(0 55% 45%);color:#fff}
#tcdemo .fmed{background:hsl(38 55% 94%);border:1px solid hsl(38 45% 85%)}
#tcdemo .fmed .fl{background:hsl(38 62% 38%);color:#fff}
#tcdemo .flow{background:hsl(var(--secondary));border:1px solid hsl(var(--border))}
#tcdemo .flow .fl{background:hsl(var(--stone));color:#fff}
#tcdemo .tree{font-size:13.5px;line-height:2}
#tcdemo .tree .fold{cursor:pointer;font-weight:500;display:flex;gap:8px;align-items:center;padding:3px 0;flex-wrap:wrap}
#tcdemo .tree .fold:hover{color:hsl(var(--accent))}
#tcdemo .tree .kids{margin-left:22px;border-left:1px solid hsl(var(--border));padding-left:14px}
#tcdemo .tree .file{color:hsl(var(--muted-foreground));display:flex;gap:8px;align-items:center;padding:2px 0}
#tcdemo .tree .miss{color:hsl(0 55% 45%);font-weight:500}
#tcdemo .bar{height:7px;background:hsl(var(--muted));border-radius:99px;overflow:hidden;margin-top:9px}
#tcdemo .bar i{display:block;height:100%;background:hsl(var(--accent));border-radius:99px;transition:width .5s}
#tcdemo .qbtns{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
#tcdemo .qbtn{text-align:left;font-family:var(--font);font-size:13.5px;font-weight:400;cursor:pointer;background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--foreground));padding:12px 15px;border-radius:var(--radius);transition:.16s;line-height:1.5}
#tcdemo .qbtn:hover{border-color:hsl(var(--accent))}
#tcdemo .qbtn.on{border-color:hsl(var(--accent));background:hsl(var(--secondary))}
#tcdemo .src{font-size:12px;color:hsl(var(--accent));margin-top:5px;display:flex;gap:6px;align-items:flex-start;line-height:1.5}
#tcdemo .src svg{flex:none;margin-top:3px}
#tcdemo .mfoot{margin-top:24px;padding-top:20px;border-top:1px solid hsl(var(--border));display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
#tcdemo .mfoot p{font-size:13px;color:hsl(var(--muted-foreground));max-width:560px;line-height:1.6}
#tcdemo .cta{font-size:13px;font-weight:500;text-decoration:none;background:hsl(var(--accent));color:#fff;padding:10px 18px;border-radius:var(--radius);transition:.18s;white-space:nowrap}
#tcdemo .cta:hover{background:hsl(var(--ink))}
#tcdemo .mbody,#tcdemo .mhead{padding:18px}
#tcdemo .split,#tcdemo .twocol{grid-template-columns:1fr}
#tcdemo table.wide{min-width:620px}

#tcdemo .mcta{border-top:1px solid hsl(var(--border));background:hsl(var(--secondary)/.5);padding:20px 26px}
#tcdemo .ctabar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
#tcdemo .ctabar p{font-size:13px;color:hsl(var(--muted-foreground));max-width:540px;line-height:1.6;margin:0}
#tcdemo .cta{font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;background:hsl(var(--accent));color:#fff;border:1px solid hsl(var(--accent));padding:10px 18px;border-radius:var(--radius);transition:.18s;white-space:nowrap}
#tcdemo .cta:hover{background:hsl(var(--ink));border-color:hsl(var(--ink))}
#tcdemo .cta.ghost{background:transparent;color:hsl(var(--muted-foreground));border-color:hsl(var(--border))}
#tcdemo .cta.ghost:hover{background:transparent;color:hsl(var(--accent));border-color:hsl(var(--accent))}
#tcdemo .dform{margin-top:18px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:20px}
#tcdemo .dform textarea{width:100%;font-family:inherit;font-size:13.5px;font-weight:300;padding:9px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));resize:vertical}
#tcdemo .dform textarea:focus{outline:none;border-color:hsl(var(--accent))}
#tcdemo .dform button[type=submit]{margin-top:4px}
@media(max-width:700px){#tcdemo .mcta{padding:16px 18px}#tcdemo .ctabar{flex-direction:column;align-items:flex-start}#tcdemo .cta{width:100%;text-align:center}}