/* Winnetrie Tech Lab: self-contained tool hub and utility workspaces. */
.tl-body .tl-shell{background:radial-gradient(ellipse at 48% 0%,#192c46 0%,#0a1220 53%,#070e19 100%)}
.tl-body .tl-container{max-width:1360px}
.tl-body .tl-container *{box-sizing:border-box}
.tl-body .tl-container button,.tl-body .tl-container input,.tl-body .tl-container select{font-family:inherit}
.tl-body .tl-container a{text-decoration:none}
.tl-body .tl-container button{cursor:pointer}
.tl-body .tl-container button:disabled{opacity:.45;cursor:not-allowed}
.tl-body .tl-container :is(button,input,select,a):focus-visible{outline:2px solid #75e3ef;outline-offset:3px}
.tl-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:32px}
.tl-hub .tl-hero{padding:clamp(26px,5vw,55px);background:linear-gradient(120deg,#152a43,#11192f 73%,#172944);overflow:hidden}
.tl-hub .tl-hero h1{font-weight:850}
.tl-hub .tl-hero .tl-text-link{margin-top:14px}
.tl-hero-badge{border:1px solid #4d7591;border-radius:22px;padding:25px 20px;text-align:center;background:linear-gradient(140deg,#173750,#0e2134);box-shadow:0 14px 35px #0003}
.tl-hero-badge>*{display:block}.tl-hero-badge span,.tl-hero-badge small{color:#92b5c9;letter-spacing:2px;font-size:10px;font-weight:800}.tl-hero-badge b{color:#8ae3e8;font-size:74px;line-height:1.1;letter-spacing:-4px}
.tl-hub-section{margin-top:36px}.tl-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.tl-kicker,.tl-panel-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:850;color:#70d6e3}.tl-section-head h2{font-size:25px;margin:6px 0 0}
.tl-card-grid{display:grid;gap:17px}.tl-card-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-card-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tl-tool-card{display:flex;flex-direction:column;min-height:267px;padding:25px;border-radius:16px;border:1px solid #2d4760;background:linear-gradient(145deg,#101f33,#101827);color:#edf7ff!important;transition:transform .17s,border-color .17s,box-shadow .17s;position:relative;overflow:hidden}
.tl-tool-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#4dc7d4,#8182db);opacity:.78}
.tl-tool-card:hover{transform:translateY(-3px);border-color:#5a99bd;box-shadow:0 20px 40px #0005}.tl-tool-card.featured{min-height:250px;background:linear-gradient(135deg,#132a3e,#141a32)}
.tl-card-icon{width:55px;height:55px;display:flex;align-items:center;justify-content:center;border:1px solid #365b72;border-radius:14px;background:#183147;color:#83e8ee;font-size:30px;font-weight:900;margin-bottom:15px}
.tl-card-icon.binary-icon{font:900 15px/1 monospace;letter-spacing:-1px}
.tl-card-icon.resistor-icon{gap:0}.tl-card-icon.resistor-icon i{display:block;height:26px;width:6px}.tl-card-icon.resistor-icon i:nth-child(1){background:#ffce68}.tl-card-icon.resistor-icon i:nth-child(2){background:#a34f45}.tl-card-icon.resistor-icon i:nth-child(3){background:#d57432}.tl-card-icon.resistor-icon i:nth-child(4){background:#e0b864}
.tl-tool-card .tl-tag{color:#72a6c0;font-size:10px;font-weight:850;letter-spacing:1.2px}.tl-tool-card h3{font-size:23px;margin:10px 0 10px;line-height:1.2}.tl-tool-card p{font-size:13px;color:#a5bacb;line-height:1.65;margin:0 0 20px;max-width:420px}.tl-card-go{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid #274057;color:#86e3ef;font-weight:800;font-size:12px}.tl-card-go b{font-size:20px}
.tl-shortcut-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tl-shortcut-grid a{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border:1px solid #29435d;border-radius:10px;background:#0f1d30;color:#d5ebfc;font-size:13px;font-weight:750}.tl-shortcut-grid a:hover{background:#18334b;border-color:#5c94a9}.tl-shortcut-grid span{color:#7bddec}
.tl-workhead{margin-bottom:26px}.tl-back{display:inline-flex;margin-bottom:22px;color:#80dbec;font-size:12px;font-weight:800;border:1px solid #365573;border-radius:9px;padding:9px 12px}.tl-back:hover{background:#17334a}.tl-workhead h1{font-size:clamp(32px,4vw,50px);line-height:1.1;letter-spacing:-1.4px;margin:13px 0}.tl-workhead h1 em{font-style:normal;color:#81e4ee}.tl-workhead p{max-width:700px;color:#9db3c9;font-size:14px;line-height:1.7}
.tl-tabs{display:flex;align-items:stretch;gap:8px;padding-bottom:8px;margin:18px 0 20px;overflow-x:auto;scrollbar-width:thin}.tl-tabs button,.tl-tabs a{flex:0 0 auto;appearance:none;white-space:nowrap;border:1px solid #304962;border-radius:10px;background:#101f32;color:#afc8db;padding:12px 17px;font-size:13px;font-weight:800;line-height:1.2}.tl-tabs :is(button,a).active,.tl-tabs :is(button,a):hover{border-color:#65c8db;background:#164258;color:#e8ffff}.tl-tabs :is(button,a).active{box-shadow:inset 0 -2px #74e5ef}
.tl-utility-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:19px;align-items:start}
.tl-tool-panel{background:linear-gradient(145deg,#112238,#0b192a);border:1px solid #2d4863;border-radius:17px;padding:clamp(17px,2.3vw,28px);min-width:0}.tl-tool-panel h2{font-size:23px;margin:11px 0 16px}.tl-tool-panel h3{font-size:15px;margin:0 0 12px}.tl-tool-panel .tl-hint{font-size:12px;color:#a3bad0;line-height:1.65;margin:0 0 18px}
.tl-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.tl-field{display:flex;flex-direction:column;gap:8px;color:#bacfe1;font-size:12px;font-weight:750;margin-bottom:14px}.tl-field input,.tl-field select,.tl-band-inputs select,.tl-component-row :is(input,select){min-width:0;width:100%;padding:12px 13px;background:#071525;color:#edf7ff;border:1px solid #37516b;border-radius:9px;font-size:13px;line-height:1.3}.tl-field input:focus,.tl-field select:focus,.tl-band-inputs select:focus,.tl-component-row :is(input,select):focus{outline:2px solid #5ccee5;outline-offset:1px}.tl-field select option,.tl-component-row select option,.tl-band-inputs select option{background:#0b192b;color:#effaff}
.tl-subhead{border-top:1px solid #2e4560;padding-top:18px;margin:21px 0 12px}.tl-subhead h3{margin:0 0 5px}.tl-subhead p{color:#97afc4;font-size:12px;line-height:1.5;margin:0}
.tl-inline-message{font-size:12px;color:#f4b88b;min-height:16px;margin:12px 0;line-height:1.5}.tl-inline-message:empty{min-height:0;margin:0}.tl-output{border:1px solid #2e6c80;border-radius:13px;background:linear-gradient(130deg,#0d3040,#0b2438);padding:18px;margin:16px 0;display:flex;flex-direction:column;gap:7px;min-width:0}.tl-output>span{font-size:11px;letter-spacing:.3px;color:#9dbed0}.tl-output strong{font-size:clamp(22px,3vw,33px);color:#91f3ed;word-wrap:break-word}.tl-output small{color:#a9c4d3;font-size:12px;line-height:1.6}.tl-mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.tl-mini-stats>div{background:#091726;border:1px solid #253d56;padding:12px;border-radius:10px;min-width:0;display:grid;gap:8px}.tl-mini-stats span{font-size:11px;color:#94afc7}.tl-mini-stats b{font-size:14px;color:#e0f7fd;overflow-wrap:anywhere}.tl-note{font-size:11px;color:#839bb3;line-height:1.7;margin:18px 0 0}
.tl-resistor-stage{border:1px solid #2c4960;background:radial-gradient(circle at 50% 24%,#13293f,#081321 72%);border-radius:13px;overflow:hidden;padding:14px}.tl-resistor-stage svg{display:block;width:100%;height:auto;min-height:180px}.tl-resistor-stage text{font-family:Inter,'Segoe UI',Arial,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.tl-band-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px}.tl-band-selector{background:#0b192a;border:1px solid #2b4661;border-radius:12px;padding:11px;min-width:0}.tl-band-selector>label{display:block;font-size:11px;font-weight:850;color:#acccde;margin-bottom:8px}.tl-band-select-line{display:flex;gap:7px;align-items:center}.tl-band-swatch{width:21px;height:36px;flex:0 0 21px;border:1px solid #748095;border-radius:5px}.tl-band-selector select{min-width:0;font-size:12px;padding:9px 4px}.tl-band-selector small{display:block;min-height:29px;color:#8fa7bd;font-size:11px;line-height:1.4;margin-top:9px}
.tl-band-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-top:14px}.tl-band-legend div{text-align:center;padding:11px 5px;border:1px solid #2b4257;background:#0b1a2c;border-radius:10px;min-width:0}.tl-band-legend b{display:block;font-size:11px;color:#d6e7f4;margin:5px 0}.tl-band-legend span{display:block;font-size:10px;color:#94adc4;overflow-wrap:anywhere}.tl-legend-chip{height:11px;width:32px;margin:auto;border-radius:4px;border:1px solid #768392}
.tl-smd-preview{display:flex;justify-content:center;align-items:center;padding:25px;background:radial-gradient(circle,#24394d,#0a1828);border-radius:12px;min-height:140px}.tl-smd-chip{width:170px;height:95px;border-radius:14px;background:linear-gradient(125deg,#282b2e,#08090c 30%,#1b1e21);border-left:17px solid #c8cbd0;border-right:17px solid #adb6bf;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px #0009}.tl-smd-chip span{font:750 28px/1 monospace;color:#dce1df;letter-spacing:3px}
.tl-base-results{display:grid;gap:9px}.tl-base-results>div{background:#0a192b;border:1px solid #2b4561;border-radius:10px;padding:12px;display:grid;grid-template-columns:100px minmax(0,1fr) 52px;gap:10px;align-items:center}.tl-base-results span{font-size:11px;color:#9fb8cb}.tl-base-results code{color:#deffff;overflow-wrap:anywhere;word-break:break-all;font-size:12px}.tl-base-results button,.tl-buttons button,.tl-add-button{border:1px solid #3b7287;border-radius:8px;color:#a5ebf4;background:#123449;padding:8px 11px;font-size:11px;font-weight:800}.tl-base-results button:hover,.tl-buttons button:hover,.tl-add-button:hover{background:#20506b}.tl-buttons{display:flex;gap:10px;flex-wrap:wrap}.tl-bit-wrap{overflow-x:auto;padding-bottom:4px}.tl-bit-grid{display:grid;grid-template-columns:repeat(8,minmax(34px,1fr));gap:7px;min-width:310px}.tl-bit-cell{background:#0b1d30;border:1px solid #37506b;border-radius:7px;padding:7px 0;text-align:center;min-width:0}.tl-bit-cell small{display:block;color:#8ca9bd;font-size:9px}.tl-bit-cell b{display:block;color:#8ca9bd;font:900 17px/1.6 monospace}.tl-bit-cell.on{background:#17485c;border-color:#5ddbdc}.tl-bit-cell.on b{color:#8cf6e3}.tl-bit-cell.signbit{border-top:2px solid #e5aa7a}
.tl-component-list{display:grid;gap:9px;margin:18px 0}.tl-component-row{display:grid;grid-template-columns:48px minmax(0,1fr) 95px 34px;gap:8px;align-items:center;padding:10px;border:1px solid #2a445e;background:#0b1b2d;border-radius:11px}.tl-component-row .tl-index{color:#77d9e7;font-weight:800;font-size:12px;text-align:center}.tl-component-row input,.tl-component-row select{padding:10px 8px}.tl-component-row button{background:#271d27;border:1px solid #64414d;color:#ffb9c3;border-radius:8px;height:36px;width:34px;font-size:19px}.tl-component-row button:hover:not(:disabled){background:#603142}.tl-add-button{padding:12px 15px;margin:3px 0}.tl-circuit-diagram{overflow-x:auto;border:1px solid #2b4259;border-radius:13px;background:radial-gradient(circle,#142c40,#091725);margin:16px 0;padding:12px}.tl-circuit-diagram svg{display:block;width:100%;max-height:310px;min-width:260px}.tl-circuit-diagram text{fill:#cee8f2;font:12px 'Segoe UI',sans-serif}.tl-circuit-diagram .wire{fill:none;stroke:#80b8d3;stroke-width:3;stroke-linejoin:round}.tl-circuit-diagram .component{fill:#154057;stroke:#89d9e5;stroke-width:2}.tl-circuit-diagram .node{fill:#8de0e9}
.tl-data-table{overflow-x:auto}.tl-data-table table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left;font-size:12px}.tl-data-table th,.tl-data-table td{padding:11px 10px;border-bottom:1px solid #294259}.tl-data-table th{color:#81d6e6;font-weight:850}.tl-data-table td{color:#d1e3ed}.tl-formula{margin-top:17px;padding:17px;border:1px dashed #49718e;border-radius:12px;background:#0a1b2c;color:#c2dcea;font-size:13px;line-height:1.8;overflow-wrap:anywhere}.tl-formula strong{color:#91edf2}.tl-table-title{margin:19px 0 12px}.tl-dual-output{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tl-dual-output .tl-output{margin-top:0}
@media(max-width:1120px){.tl-hero-grid{grid-template-columns:minmax(0,1fr) 150px}.tl-hero-badge b{font-size:58px}.tl-card-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-utility-grid{grid-template-columns:1fr}.tl-workbench{max-width:980px!important}}
@media(max-width:700px){.tl-hero-grid{grid-template-columns:1fr}.tl-hero-badge{display:none}.tl-card-grid-two,.tl-card-grid-three{grid-template-columns:1fr}.tl-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-tool-card{min-height:240px}.tl-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-workhead h1{font-size:34px}.tl-utility-grid{gap:14px}}
@media(max-width:440px){.tl-control-grid,.tl-shortcut-grid,.tl-dual-output{grid-template-columns:1fr}.tl-component-row{grid-template-columns:30px minmax(0,1fr) 73px 29px;gap:5px;padding:7px}.tl-component-row input,.tl-component-row select{font-size:12px;padding:9px 6px}.tl-component-row button{height:32px;width:29px}.tl-tool-panel{padding:16px}.tl-mini-stats{grid-template-columns:1fr}.tl-base-results>div{grid-template-columns:70px minmax(0,1fr) 48px;gap:6px}.tl-band-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
