/* ndssoft.pro/techno · class companion for the 28 Oct 2569 AI workshop.
   A stack of lab sheets on the brand ground; loads after brand.css and company.css. */
.tn{background:var(--bg);--tabs-h:56px;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.tn ::selection{background:var(--pink-line);color:var(--ink)}
html:has(.tn){scroll-padding-top:calc(var(--header-h) + var(--tabs-h) + 20px);scrollbar-color:var(--line-strong) var(--bg);accent-color:var(--pink)}
.tn a{text-underline-offset:3px;text-decoration-thickness:1px}
.tn input,.tn textarea{caret-color:var(--pink)}

/* Section tabs under the site header */
.tn-tabs{position:sticky;top:var(--header-h);z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.tn-tabs-row{display:flex;align-items:center;gap:6px;min-height:var(--tabs-h)}
.tn-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--ink-2);font-size:15px;text-decoration:none;white-space:nowrap}
.tn-tabs a b{font-weight:600}
.tn-tabs a span{color:var(--ink-3)}
.tn-tabs a:hover{background:var(--pink-soft);color:var(--pink-strong)}
.tn-tabs a[aria-current="true"]{background:var(--ink);color:var(--surface)}
.tn-tabs a[aria-current="true"] span{color:var(--pink-line)}
.tn-now{margin-left:auto;background:var(--pink-soft)!important;color:var(--pink-strong)!important;font-weight:600}
.tn-now[hidden]{display:none}
.tn-now+.tn-count{margin-left:8px}
.tn-count{margin-left:auto;color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tn-count b{color:var(--pink-strong)}
.tn-bar{height:3px;background:var(--line)}
.tn-bar i{display:block;height:100%;background:var(--pink);transform-origin:0 50%;transform:scaleX(0);transition:transform 400ms cubic-bezier(.16,1,.3,1)}

/* Opening */
.tn-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:56px;padding-bottom:40px}
.tn-intro h1{font-size:clamp(34px,4.6vw,54px);line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.tn-intro h1 span{display:block;margin-top:12px;font-size:clamp(19px,2vw,23px);line-height:1.5;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.tn-facts{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 20px}
.tn-facts li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.tn-facts .ico{width:18px;height:18px;color:var(--ink-3)}
.tn-lead{max-width:62ch;color:var(--ink-2);font-size:17px;line-height:1.75}
.tn-prep{padding:24px 26px;border:1.5px dashed var(--pink-line);border-radius:var(--r-lg);background:var(--surface)}
.tn-prep h2{font-size:20px;margin-bottom:6px}

/* Two-column body: sheets + day timetable */
.tn-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;padding-bottom:72px}
.tn-col{min-width:0}
.tn-part{padding-top:40px}
.tn-part-head{max-width:760px;margin-bottom:24px}
.tn-part-head h2{font-size:clamp(25px,3vw,34px);line-height:1.3;text-wrap:balance}
.tn-part-time{display:inline-block;margin:10px 0 12px;padding:2px 12px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.tn-part-head p:last-child{color:var(--ink-2);font-size:17px;line-height:1.75;max-width:68ch}

/* A lab sheet */
.tn-sheet{position:relative;margin-bottom:20px;padding:28px 32px 30px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 1px 2px rgba(23,19,26,.04),0 8px 24px -12px rgba(23,19,26,.10)}
.tn-sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px dashed var(--line-strong)}
.tn-sheet-head h3{flex:1 1 420px;display:flex;align-items:baseline;gap:12px;font-size:clamp(20px,2.2vw,24px);line-height:1.35}
.tn-sheet-head h3 span{flex:none;padding:3px 10px;border-radius:8px;background:var(--pink-soft);color:var(--pink-strong);font-size:14px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.tn-when{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tn-when .ico{width:17px;height:17px}
.tn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.tn-block{margin-bottom:20px}
.tn-block h4{margin-bottom:8px;color:var(--ink-3);font-size:15px;font-weight:700}
.tn-dots li{position:relative;padding-left:18px;margin-bottom:6px;color:var(--ink-2);font-size:16px;line-height:1.65}
.tn-dots li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.tn-cols{columns:2;column-gap:32px}
.tn-cols li{break-inside:avoid}

/* Steps students tick off */
.tn-steps{display:grid;gap:4px}
.tn-steps label{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;margin:0 -10px;border-radius:var(--r-sm);cursor:pointer;font-size:16px;line-height:1.6;transition:background-color var(--t)}
.tn-steps label:hover{background:var(--bg)}
.tn-steps input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:2px 0 0;border:2px solid var(--pink);border-radius:6px;background:var(--surface) center/16px no-repeat;cursor:pointer;transition:background-color var(--t),border-color var(--t)}
.tn-steps input:checked{background-color:var(--pink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tn-steps input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.tn-steps input:checked+span{color:var(--ink-3)}
.tn-steps a{color:var(--pink-strong);font-weight:500}

/* Completion mark beside the time: the one authored motion on the page */
.tn-sheet.is-done .tn-when::after{content:"ทำครบแล้ว";margin-left:6px;padding-left:22px;color:var(--pink-strong);font-weight:700;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23a3346a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50%/18px no-repeat;animation:tn-done 380ms cubic-bezier(.16,1,.3,1)}
@keyframes tn-done{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* Prompt and command boxes */
.tn-prompt{position:relative;min-width:0;max-width:100%;margin:4px 0 16px;padding:16px 18px 18px;border-radius:var(--r);background:var(--ink);color:#f7e9f0}
.tn-prompt figcaption{margin:0 104px 8px 0;color:var(--pink-line);font-size:14px;font-weight:600}
.tn-prompt pre,.tn-prompt code{margin:0;font:inherit;font-size:15.5px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.tn-cmd pre,.tn-cmd code{font-family:var(--mono);font-size:14.5px;line-height:1.7;white-space:pre;overflow-wrap:normal}
.tn-cmd pre{overflow-x:auto;padding-bottom:4px;scrollbar-color:var(--ink-2) var(--ink)}
.tn-prompt ::selection{background:var(--pink);color:#fff}
.tn-copy{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--t)}
.tn-copy .ico{width:16px;height:16px}
.tn-copy:hover{background:var(--pink-strong)}
.tn-copy:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tn-copy.is-copied{background:var(--ok)}

/* Prompt formula table */
.tn-table{width:100%;margin:0 0 20px;border-collapse:collapse;font-size:15.5px}
.tn-table caption{text-align:left;margin-bottom:8px;color:var(--ink-3);font-size:15px;font-weight:700}
.tn-table th,.tn-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55}
.tn-table thead th{color:var(--ink-3);font-size:14px;font-weight:600;border-bottom:1.5px solid var(--line-strong)}
.tn-table tbody th{color:var(--ink);font-weight:700;white-space:nowrap}
.tn-table td:last-child{color:var(--ink-2)}

/* Breaks between sheets */
.tn-break{display:flex;align-items:center;gap:10px;margin:8px 0 28px;color:var(--ink-3);font-size:15px;font-variant-numeric:tabular-nums}
.tn-break::before,.tn-break::after{content:"";flex:1;border-top:1.5px dashed var(--line-strong)}
.tn-break .ico{width:17px;height:17px}

/* Day timetable */
.tn-day{position:sticky;top:calc(var(--header-h) + var(--tabs-h) + 20px);margin-top:40px}
.tn-day-box{padding:18px 16px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.tn-day-box summary{padding:0 6px 10px;color:var(--ink-3);font-size:15px;font-weight:700;list-style:none;cursor:pointer}
.tn-day-box summary::-webkit-details-marker{display:none}
.tn-day ol{display:grid;gap:2px}
.tn-day a{display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:8px;align-items:center;min-height:40px;padding:6px 8px;border-radius:var(--r-sm);color:var(--ink-2);font-size:15px;text-decoration:none;line-height:1.35}
.tn-day a b{color:var(--ink-3);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.tn-day a .ico{width:18px;height:18px;color:var(--pink);opacity:0;transform:scale(.6);transition:opacity var(--t),transform var(--t)}
.tn-day a:hover{background:var(--bg);color:var(--ink)}
.tn-day a.is-here{background:var(--bg);color:var(--ink);font-weight:600}
.tn-day a.is-done{color:var(--ink-3)}
.tn-day a.is-done .ico{opacity:1;transform:none}
.tn-day a.is-now{background:var(--pink-soft);color:var(--pink-strong);font-weight:600}
.tn-day a.is-now b{color:var(--pink-strong)}
.tn-day-gap{padding:6px 8px 6px 64px;color:var(--ink-3);font-size:14px}
.tn-reset{width:100%;min-height:40px;margin-top:10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-3);font-size:14px;cursor:pointer}
.tn-reset:hover{border-color:var(--pink-line);color:var(--pink-strong)}

/* Skills */
.tn-install{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-bottom:16px;padding:24px 28px;border-radius:var(--r-lg);background:var(--pink-soft)}
.tn-install h3{font-size:18px;margin-bottom:10px}
.tn-num{counter-reset:n;display:grid;gap:8px}
.tn-num li{counter-increment:n;position:relative;padding-left:34px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.tn-num li::before{content:counter(n);position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.tn-filter{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 16px}
.tn-filter button{min-height:44px;padding:0 18px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:15px;font-weight:500;cursor:pointer;transition:background-color var(--t),border-color var(--t),color var(--t)}
.tn-filter button:hover{border-color:var(--pink-line);color:var(--pink-strong)}
.tn-filter button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.tn-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tn-skill{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface)}
.tn-skill[hidden]{display:none}
.tn-skill h3{font-size:20px;font-weight:600}
.tn-skill-by{margin:2px 0 10px;color:var(--ink-3);font-size:14px}
.tn-skill>p:not(.tn-skill-by){color:var(--ink-2);font-size:15.5px;line-height:1.65}
.tn-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.tn-tags li{padding:2px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink-2);font-size:13px}
.tn-dl{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:15px;font-weight:600;text-decoration:none}
.tn-dl small{color:var(--pink-line);font-weight:500;font-size:13px}
.tn-dl:hover{background:var(--pink-strong)}
.tn-dl .ico{width:18px;height:18px}
.tn-dl-out{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong)}
.tn-dl-out:hover{background:var(--pink-soft);color:var(--pink-strong);border-color:var(--pink-line)}
.tn-mini{width:100%;max-width:100%;min-width:0;margin:12px 0 0}
.tn-mini pre{font-size:13px}
.tn-all{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:20px;padding:22px 26px;border:1.5px dashed var(--pink-line);border-radius:var(--r-lg);background:var(--surface)}
.tn-all p{max-width:52ch;color:var(--ink-2)}
.tn-all p b{display:block;color:var(--ink);font-size:18px}
.tn-all .btn small{font-weight:500}

/* FAQ */
.tn-faq h2{font-size:clamp(25px,3vw,34px);margin-bottom:16px}
.tn-faq details{border-top:1px solid var(--line)}
.tn-faq details:last-child{border-bottom:1px solid var(--line)}
.tn-faq summary{display:flex;justify-content:space-between;gap:16px;padding:16px 4px;font-size:17px;font-weight:600;cursor:pointer;list-style:none}
.tn-faq summary::-webkit-details-marker{display:none}
.tn-faq summary .ico,.tn-day-box summary .ico{color:var(--ink-3);transition:transform var(--t)}
.tn-faq details[open] summary .ico,.tn-day-box[open] summary .ico{transform:rotate(45deg)}
.tn-day-box summary .ico{display:none}
.tn-faq details p{max-width:68ch;padding:0 4px 18px;color:var(--ink-2);line-height:1.75}

@media (max-width:1023px){
 .tn-intro{grid-template-columns:1fr;gap:28px;padding-top:40px}
 .tn-layout{grid-template-columns:1fr;gap:0}
 .tn-day{position:static;order:-1;margin-top:8px}
 .tn-day-box{padding:4px 12px}
 .tn-day-box summary{padding:12px 6px;display:flex;justify-content:space-between}
 .tn-day-box summary{align-items:center}
 .tn-day-box summary .ico{display:block}
 .tn-day-box[open]{padding-bottom:12px}
}
@media (max-width:767px){
 .tn .site-header{position:relative}
 .tn-tabs{top:0}
 html:has(.tn){scroll-padding-top:calc(var(--tabs-h) + 16px)}
 .tn-tabs-row{gap:2px;overflow-x:auto;scrollbar-width:none}
 .tn-tabs-row::-webkit-scrollbar{display:none}
 .tn-tabs a{padding:8px 12px;font-size:14px}
 .tn-tabs a span{display:none}
 .tn-count{font-size:13px}
 .tn-sheet{padding:22px 18px 22px;border-radius:var(--r)}
 .tn-sheet-head h3{gap:10px}
 .tn-grid,.tn-install,.tn-skills{grid-template-columns:minmax(0,1fr)}
 .tn-grid{gap:0}
 .tn-cols{columns:1}
 .tn-install{padding:20px}
 .tn-prompt{padding:16px 14px 16px}
 .tn-prompt figcaption{min-height:30px}
 .tn-table thead{display:none}
 .tn-table tbody tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
 .tn-table tbody th,.tn-table tbody td{display:block;padding:0;border:0}
 .tn-table tbody th{margin-bottom:2px}
 .tn-table tbody td:nth-child(2){color:var(--ink)}
 .tn-all .btn{width:100%}
}