/* Tool kit · 2026-11-05. One visual language for every tool page: what it does, input → output, three coloured steps
 * and the same cues inside each workspace. Universal colours, used for meaning only:
 * blue = start here / add · violet = customize · green = result / download / copy · amber = check carefully · red = error.
 * Engines, data-* hooks and copy keys are untouched; this file only adds presentation. Every motion honours reduced motion. */
:root{
 --tk-in:oklch(77% .12 245);--tk-tune:oklch(76% .13 300);--tk-out:oklch(81% .15 155);--tk-warn:oklch(83% .14 75);--tk-bad:var(--color-error);
 --tk-ink:oklch(17% .03 250);--tk-card:oklch(20.5% .03 246 / .72);--tk-line:oklch(40% .035 238 / .55);
}
:root[data-theme=light]{
 --tk-in:oklch(52% .17 252);--tk-tune:oklch(50% .18 300);--tk-out:oklch(50% .13 155);--tk-warn:oklch(58% .15 62);
 --tk-ink:oklch(99% .005 210);--tk-card:oklch(99.5% .004 210 / .9);--tk-line:oklch(84% .02 230);
}
.tk-tone-in{--tone:var(--tk-in)}.tk-tone-tune{--tone:var(--tk-tune)}.tk-tone-out{--tone:var(--tk-out)}.tk-tone-warn{--tone:var(--tk-warn)}
.tk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tk{min-width:0;color:var(--color-ink)}
.tk .tk-ico{width:20px;height:20px;flex:none;stroke-width:1.8}

/* Switcher: every published tool, one row that scrolls on small screens. */
.tk-switch{display:flex;align-items:center;gap:16px;padding-block:14px;border-bottom:1px solid var(--color-rule);min-width:0}
.tk-switch-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 6px;border-radius:var(--radius-pill);color:var(--color-ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;flex:none}
.tk-switch-all:hover{background:var(--color-hover)}
.tk-back{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--color-rule)}.tk-back .tk-ico{transform:scaleX(-1);width:16px;height:16px}
/* Pills never shrink (iOS Safari squeezed the active one below its label); the row snaps pill by pill, tool-kit.js centres
 * the current pill on load and sets data-fade so only the sides that hide more pills fade out. */
.tk-switch-rail{--tk-fade:32px;display:flex;align-items:center;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--tk-fade);scrollbar-width:none;min-width:0;padding:4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--tk-fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--tk-fade)),transparent)}
.tk-switch-rail[data-fade=none]{-webkit-mask-image:none;mask-image:none}
.tk-switch-rail[data-fade=start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade));mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade))}
.tk-switch-rail[data-fade=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent)}
.tk-switch-rail::-webkit-scrollbar{display:none}
.tk-switch-rail a{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:13px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.tk-switch-rail a:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}
@media (hover:hover){.tk-switch-rail a:hover{background:var(--color-hover);color:var(--color-ink)}}
.tk-switch-rail svg{width:18px;height:18px;flex:none}
.tk-switch-rail [aria-current]{background:var(--color-accent-soft);color:var(--color-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--color-accent-line)}
.tk-switch-rail [aria-current] svg{color:var(--color-accent)}

/* Hero: plain promise, what it does, input → output, three trust signals, one way to start. */
.tk-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(28px,5vw,72px);padding-block:clamp(32px,5vw,64px) clamp(28px,4vw,48px)}
.tk-hero:before{content:'';position:absolute;inset:-40px -10vw auto;height:460px;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 78% 40%,oklch(83% .13 188 / .12),transparent 70%),radial-gradient(40% 50% at 10% 10%,oklch(77% .12 245 / .08),transparent 70%)}
.tk-hero-copy{min-width:0}
.tk-name{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:6px 14px 6px 6px;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--tk-card);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--color-muted);max-width:100%}
.tk-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-name-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent);flex:none}.tk-name-icon svg{width:17px;height:17px}
.tk .tk-hero h1{font:600 clamp(2.25rem,4.6vw,4.1rem)/1.04 var(--font-display);letter-spacing:-.05em;max-width:15ch;margin:0;text-wrap:balance;overflow-wrap:break-word}
.tk-what{margin:22px 0 0;max-width:58ch;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.62;color:var(--color-muted)}
.tk-what strong{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:6px;background:var(--color-accent-soft);color:var(--color-ink);font-size:.78em;font-weight:650;letter-spacing:.05em;text-transform:uppercase;vertical-align:.12em}
.tk-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;padding:12px 14px;border:1px solid var(--color-rule);border-radius:18px;background:var(--tk-card);max-width:max-content}
.tk-flow-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tone)}
.tk-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:9px;border:1px solid color-mix(in oklch,var(--tk-in) 45%,transparent);background:color-mix(in oklch,var(--tk-in) 12%,transparent);font:600 13px/1 var(--font-mono);letter-spacing:.01em;color:var(--color-ink)}
.tk-chip-out{border-color:color-mix(in oklch,var(--tk-out) 55%,transparent);background:color-mix(in oklch,var(--tk-out) 18%,transparent)}
.tk-flow-arrow{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--color-ink);color:var(--color-paper);margin-inline:4px}.tk-flow-arrow .tk-ico{width:18px;height:18px}
.tk-trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:22px 0 0;padding:0}
.tk-trust li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--color-ink)}
.tk-trust .tk-ico{color:var(--tk-out)}
.tk-trust-private{padding:6px 12px 6px 8px;border-radius:var(--radius-pill);background:color-mix(in oklch,var(--tk-out) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tk-out) 40%,transparent)}
.tk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.tk-go,.tk-how{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px 0 18px;border-radius:var(--radius-pill);font-weight:650;font-size:15.5px;text-decoration:none;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-short),background var(--dur-short)}
.tk-go{background:var(--tk-in);color:var(--tk-ink);box-shadow:0 14px 34px -14px color-mix(in oklch,var(--tk-in) 80%,transparent),inset 0 1px 0 oklch(100% 0 0 / .35)}
.tk-go:hover{transform:translateY(-2px)}.tk-go:active{transform:translateY(0)}
.tk-go .tk-ico{width:22px;height:22px;stroke-width:2.2}
.tk-how{color:var(--color-ink);border:1px solid var(--color-rule-strong);background:var(--tk-card)}.tk-how:hover{background:var(--color-hover)}
.tk-lang{margin-top:16px;display:inline-flex;padding:8px 14px;border-radius:12px;background:var(--color-info-soft);font-size:13.5px;color:var(--color-ink)}
.tk-hero-art{position:relative;margin:0;min-width:0}
.tk-art-glow{position:absolute;inset:8% 6% -4%;border-radius:40px;background:radial-gradient(closest-side,oklch(83% .13 188 / .32),transparent);filter:blur(30px);z-index:0}
.tk-art-frame{position:relative;z-index:1;display:block;aspect-ratio:3/2;border-radius:28px;overflow:clip;background:var(--color-well);box-shadow:inset 0 0 0 1px var(--color-rule),0 40px 90px -40px oklch(5% .02 250 / .9),0 0 0 8px oklch(95% .01 215 / .03);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);transition:transform var(--dur-long) var(--ease-out)}
.tk-hero-art:hover .tk-art-frame{transform:none}
.tk-art-frame img{width:100%;height:100%;display:block;object-fit:cover}
:root[data-theme=light] .tk-art-frame{box-shadow:inset 0 0 0 1px var(--color-rule),0 40px 80px -44px oklch(40% .05 240 / .45)}

/* Steps: three large cards, colour by position. aria-current is the live step; earlier steps get a check. */
.tk-steps{position:relative;margin-bottom:clamp(24px,3vw,40px);padding:clamp(20px,2.6vw,32px);border:1px solid var(--color-rule);border-radius:30px;background:linear-gradient(180deg,var(--color-sheen),transparent 40%),var(--color-surface);box-shadow:inset 0 1px 0 var(--color-rim),var(--shadow-2)}
.tk-steps-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:20px}
.tk .tk-steps-head h2{font:600 clamp(1.35rem,2vw,1.75rem)/1.15 var(--font-display);letter-spacing:-.03em;margin:0}
.tk-steps-head p{color:var(--color-muted);font-size:14px;max-width:62ch}
.tk-step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0;counter-reset:none}
.tk-step{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px 20px 22px;border-radius:22px;background:linear-gradient(160deg,color-mix(in oklch,var(--tone) 13%,transparent),color-mix(in oklch,var(--tone) 4%,transparent) 70%);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tone) 32%,transparent);transition:box-shadow var(--dur-short),transform var(--dur-short) var(--ease-out),opacity var(--dur-short)}
.tk-step:not(:last-child):after{content:'';position:absolute;top:44px;right:-15px;width:12px;height:12px;border-top:2.5px solid var(--color-rule-strong);border-right:2.5px solid var(--color-rule-strong);transform:rotate(45deg);z-index:1}
.tk-step-badge{position:relative;width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:var(--tone);color:var(--tk-ink);box-shadow:0 12px 26px -12px color-mix(in oklch,var(--tone) 85%,transparent),inset 0 1px 0 oklch(100% 0 0 / .4)}
.tk-step-badge .tk-ico{width:28px;height:28px;stroke-width:2}
.tk-step-num{position:absolute;top:-8px;left:-8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--color-paper);color:var(--color-ink);font:700 13px/1 var(--font-display);box-shadow:0 0 0 2px var(--tone)}
.tk-step-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.tk-step-text strong{font:600 1.12rem/1.25 var(--font-display);letter-spacing:-.02em;color:var(--color-ink)}
.tk-step-text>span{font-size:14.5px;line-height:1.55;color:var(--color-muted)}
.tk-step-here{position:absolute;top:16px;right:16px;display:none;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--radius-pill);background:var(--tone);color:var(--tk-ink);font-size:12px;font-weight:700;letter-spacing:.02em}
.tk-step-here:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;animation:tk-blink 1.6s ease-in-out infinite}
.tk-step[aria-current]{box-shadow:inset 0 0 0 2px var(--tone),0 18px 40px -24px color-mix(in oklch,var(--tone) 90%,transparent);transform:translateY(-3px)}
.tk-step[aria-current] .tk-step-here{display:inline-flex}
.tk-step:has(~.tk-step[aria-current]){opacity:.72}
.tk-step:has(~.tk-step[aria-current]) .tk-step-num{background:var(--tone);color:var(--tk-ink);font-size:0}
.tk-step:has(~.tk-step[aria-current]) .tk-step-num:after{content:'';width:11px;height:6px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
.tk-legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px dashed var(--color-rule);font-size:13px;color:var(--color-muted)}
.tk-legend li{display:inline-flex;align-items:center;gap:8px}
.tk-legend li:before{content:'';width:12px;height:12px;border-radius:4px;background:var(--tone);box-shadow:0 0 0 3px color-mix(in oklch,var(--tone) 22%,transparent)}
.tk-anchor{display:block;scroll-margin-top:calc(var(--header-h) + 16px)}

/* Workspace cues, shared by every tool. */
span.tk-badge.tk-badge{display:inline-grid;place-items:center;width:30px;height:30px;min-width:30px;margin:0 10px 0 0;padding:0;border:0;border-radius:50%;background:var(--tone);color:var(--tk-ink);font:700 14px/1 var(--font-display);letter-spacing:0;vertical-align:middle;box-shadow:0 0 0 4px color-mix(in oklch,var(--tone) 20%,transparent);opacity:1;position:static;transform:none}
span.tk-badge.tk-badge-icon .tk-ico{width:17px;height:17px;stroke-width:2.2}
:is(.tool-page,.spatial) [data-drop]{position:relative;border:2px dashed color-mix(in oklch,var(--tk-in) 70%,transparent)!important;background:radial-gradient(80% 90% at 50% 0%,color-mix(in oklch,var(--tk-in) 14%,transparent),transparent 75%),color-mix(in oklch,var(--tk-in) 5%,transparent)!important;transition:border-color var(--dur-short),background var(--dur-short),box-shadow var(--dur-short)}
:is(.tool-page,.spatial) [data-drop]:hover,:is(.tool-page,.spatial) [data-drop]:focus-within,:is(.tool-page,.spatial) [data-drop].is-dragging,:is(.tool-page,.spatial) [data-drop][data-dragging]{border-color:var(--tk-in)!important;box-shadow:0 0 0 6px color-mix(in oklch,var(--tk-in) 16%,transparent)}
:is(.tool-page,.spatial) [data-drop] :is(.tool-upload-symbol,.raw-lenses)>svg,:is(.tool-page,.spatial) [data-drop]>svg{color:var(--tk-in)}
:is(.tool-page,.spatial) [data-drop] label:is(.button,.converter-choose,.raw-pair-picker),:is(.tool-page,.spatial) [data-drop] .button{background:var(--tk-in);border-color:var(--tk-in);color:var(--tk-ink)}
/* Main action: brand colour with a play glyph; it nudges once there is content to process. */
:is(.tool-page,.spatial) :is([data-convert],[data-generate],[data-run]).button{min-height:56px;padding-inline:26px 30px;font-size:16px;font-weight:650;gap:10px}
:is(.tool-page,.spatial) :is([data-convert],[data-generate],[data-run]).button:before{content:'';width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5v17L21 12Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5v17L21 12Z'/%3E%3C/svg%3E") center/contain no-repeat}
[data-tool-state=loaded] :is([data-convert],[data-generate],[data-run]).button:not(:disabled){animation:tk-nudge 2.6s var(--ease-in-out) infinite}
/* Result actions: green with a download (or copy) glyph. */
:is(.tool-page,.spatial,.signature-studio,.fiscal,.business-studio) :is([data-download],[data-zip],a[download],.optimizer-download):is(.button,a,button){--tone:var(--tk-out);background:var(--tk-out);border-color:var(--tk-out);color:var(--tk-ink);gap:9px}
:is(.tool-page,.spatial,.signature-studio,.fiscal,.business-studio) :is([data-download],[data-zip],a[download],.optimizer-download):is(.button,a,button):before{content:'';width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-4.5-4.5L12 15l4.5-4.5'/%3E%3Cpath d='M4 14v4.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-4.5-4.5L12 15l4.5-4.5'/%3E%3Cpath d='M4 14v4.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V14'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.tool-page,.spatial) :is([data-download],[data-zip]).button-outline{background:color-mix(in oklch,var(--tk-out) 14%,transparent);color:var(--color-ink);border-color:var(--tk-out)}
.signature-studio .button[data-action=copy-rich]{background:var(--tk-out);border-color:var(--tk-out);color:var(--tk-ink)}
/* Status lines: blue info, amber while working, green when done, red on error. */
:is(.tool-page,.spatial) :is(.converter-feedback,.raw-feedback,.pdf-feedback) [data-status],.spatial [data-status]{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:color-mix(in oklch,var(--tk-in) 10%,transparent);box-shadow:inset 3px 0 0 var(--tk-in);font-weight:500}
[data-tool-state=working] [data-status]{background:color-mix(in oklch,var(--tk-warn) 12%,transparent)!important;box-shadow:inset 3px 0 0 var(--tk-warn)!important}
[data-tool-state=working] [data-status]:before{content:'';width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid color-mix(in oklch,var(--tk-warn) 30%,transparent);border-top-color:var(--tk-warn);animation:tk-spin .8s linear infinite}
[data-tool-state=done] [data-status]{background:color-mix(in oklch,var(--tk-out) 13%,transparent)!important;box-shadow:inset 3px 0 0 var(--tk-out)!important}
:is(.tool-page,.spatial) [data-error]:not([hidden]){display:flex;gap:10px;padding:12px 16px;border-radius:14px;background:var(--color-error-soft);box-shadow:inset 3px 0 0 var(--tk-bad);color:var(--color-ink)}
[data-tool-state=done] :is([data-results-section],[data-downloads],.qr-preview){box-shadow:0 0 0 2px color-mix(in oklch,var(--tk-out) 70%,transparent),0 24px 60px -36px color-mix(in oklch,var(--tk-out) 80%,transparent);border-radius:var(--radius-lg)}
.spatial [data-result]:not([hidden]){box-shadow:0 0 0 2px color-mix(in oklch,var(--tk-out) 70%,transparent);border-radius:var(--radius-lg)}
/* «Start here» flag placed by tool-kit.js on the first thing to touch; it leaves once the tool has content. */
.tk-flag-host{position:relative}
.tk-flag{position:absolute;z-index:3;top:-17px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--tk-in);color:var(--tk-ink);font:700 12.5px/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px -10px color-mix(in oklch,var(--tk-in) 90%,transparent);animation:tk-bob 2.2s var(--ease-in-out) infinite}
.tk-flag:after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tk-flag[hidden]{display:none}
.tk-pulse{animation:tk-ring 1.2s var(--ease-out) 2}

/* Outro: everyday uses, tips + caution, honest comparison, related tools. */
.tk-outro{display:grid;gap:clamp(20px,3vw,32px);margin-block:clamp(40px,6vw,72px) clamp(32px,4vw,56px)}
.tk-outro h2{font:600 clamp(1.35rem,2.2vw,1.9rem)/1.15 var(--font-display);letter-spacing:-.03em;margin:0 0 18px}
.tk-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tk-use{padding:24px;border-radius:24px;border:1px solid var(--color-rule);background:linear-gradient(180deg,var(--color-sheen),transparent 50%),var(--color-surface);box-shadow:inset 0 1px 0 var(--color-rim);transition:transform var(--dur-short) var(--ease-out),border-color var(--dur-short)}
.tk-use:hover{transform:translateY(-3px);border-color:var(--color-rule-strong)}
.tk-use-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--color-accent-soft);color:var(--color-accent);margin-bottom:16px}.tk-use-icon .tk-ico{width:24px;height:24px}
.tk-use h3{font:600 1.1rem/1.25 var(--font-display);letter-spacing:-.02em;margin:0 0 8px}
.tk-use p{font-size:14.5px;line-height:1.6;color:var(--color-muted)}
.tk-advice{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.tk-tips,.tk-warn{padding:26px;border-radius:24px}
.tk-tips{background:color-mix(in oklch,var(--tk-out) 8%,var(--color-surface));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tk-out) 30%,transparent)}
.tk-warn{background:color-mix(in oklch,var(--tk-warn) 9%,var(--color-surface));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tk-warn) 38%,transparent)}
.tk-outro .tk-tips h2,.tk-outro .tk-warn h2{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:14px}
.tk-tips h2 .tk-ico{color:var(--tk-out);width:24px;height:24px}.tk-warn h2 .tk-ico{color:var(--tk-warn);width:24px;height:24px}
.tk-tips ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tk-tips li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55}
.tk-tips li .tk-ico{color:var(--tk-out);margin-top:2px}
.tk-warn p{font-size:15px;line-height:1.6}
.tk-why-table{display:grid;border:1px solid var(--color-rule);border-radius:24px;overflow:clip;background:var(--color-surface)}
.tk-why-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.tk-why-row>span{display:flex;align-items:center;gap:10px;padding:16px 20px;min-width:0;font-size:15px;line-height:1.4}
.tk-why-row+.tk-why-row{border-top:1px solid var(--color-rule)}
.tk-why-head>span{padding-block:14px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-muted)}
.tk-why-head .tk-why-here{color:var(--tk-out)}
.tk-why-row [role=rowheader]{font-weight:600}.tk-why-row [role=rowheader] .tk-ico{color:var(--color-muted)}
.tk-why-row .tk-yes{background:color-mix(in oklch,var(--tk-out) 9%,transparent);font-weight:600}.tk-why-row .tk-yes .tk-ico{color:var(--tk-out)}
.tk-why-head .tk-why-here{background:color-mix(in oklch,var(--tk-out) 9%,transparent)}
.tk-why-row .tk-no{color:var(--color-muted)}
.tk-why-row .tk-no:before{content:'';width:18px;height:18px;flex:none;background:var(--tk-bad);opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.tk-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tk-more-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:start;padding:20px;border-radius:22px;border:1px solid var(--color-rule);background:var(--color-surface);text-decoration:none;color:var(--color-ink);transition:border-color var(--dur-short),transform var(--dur-short) var(--ease-out)}
.tk-more-card:hover{border-color:var(--color-accent-line);transform:translateY(-2px)}
.tk-more-icon{grid-row:span 2;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--color-accent-soft);color:var(--color-accent)}.tk-more-icon svg{width:22px;height:22px}
.tk-more-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.tk-more-copy strong{font:600 1rem/1.3 var(--font-display)}.tk-more-copy span{font-size:13.5px;line-height:1.5;color:var(--color-muted)}
.tk-more-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;color:var(--color-accent)}.tk-more-go .tk-ico{width:16px;height:16px}
:root[data-theme=light] .tk-more-go{color:var(--color-ink)}

@keyframes tk-blink{50%{opacity:.25}}
@keyframes tk-spin{to{transform:rotate(360deg)}}
@keyframes tk-bob{50%{transform:translate(-50%,-4px)}}
@keyframes tk-nudge{0%,70%,100%{box-shadow:0 0 0 0 color-mix(in oklch,var(--color-accent) 0%,transparent)}35%{box-shadow:0 0 0 10px color-mix(in oklch,var(--color-accent) 22%,transparent)}}
@keyframes tk-ring{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--tk-in) 60%,transparent)}100%{box-shadow:0 0 0 18px color-mix(in oklch,var(--tk-in) 0%,transparent)}}
/* Tool stylesheets colour every link inside their root (.fiscal a, ...): keep the kit's own link colours. */
.tk a.tk-go{color:var(--tk-ink)}.tk a.tk-how,.tk a.tk-more-card,.tk a.tk-switch-all{color:var(--color-ink)}
@media (prefers-reduced-motion:reduce){.tk *,.tk-flag,.tk-pulse,[data-tool-state] [data-status]:before,[data-tool-state=loaded] .button{animation:none!important;transition:none!important}.tk-art-frame{transform:none}}

@media (max-width:1060px){.tk-hero{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
@media (max-width:860px){
 .tk-hero{grid-template-columns:1fr;gap:28px}.tk-hero-art{max-width:520px;width:100%;margin-inline:auto}.tk-art-frame{transform:none}
 .tk-step-list,.tk-use-grid,.tk-more-grid{grid-template-columns:1fr}
 .tk-step{flex-direction:row;align-items:flex-start;gap:16px}
 .tk-step:not(:last-child):after{top:auto;bottom:-13px;right:auto;left:44px;transform:rotate(135deg)}
 .tk-step-here{position:static;align-self:flex-start;order:3}
 .tk-step[aria-current]{transform:none}
 .tk-advice{grid-template-columns:1fr}
 .tk-why-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .tk-why-row>[role=rowheader]{grid-column:1/-1;padding-bottom:4px}.tk-why-row>span{padding-inline:16px}
 .tk-why-head>[role=columnheader]:first-child{display:none}
}
@media (max-width:560px){
 .tk-switch{flex-direction:column;align-items:stretch;gap:6px;padding-block:10px 12px}.tk-switch-all{align-self:flex-start;margin-left:-6px}
 /* Phones: the row runs edge to edge (it bleeds over the 16 px page gutter) and every tool is a visible chip. */
 .tk-switch-rail{--tk-fade:24px;gap:8px;margin-inline:calc(50% - 50vw);padding:4px calc(50vw - 50%)}
 .tk-switch-rail a{min-height:42px;padding:0 15px;font-size:14px;background:var(--tk-card);box-shadow:inset 0 0 0 1px var(--color-rule)}
 .tk-switch-rail [aria-current]{background:var(--color-accent-soft);box-shadow:inset 0 0 0 1.5px var(--color-accent-line)}
 .tk-what strong{display:table;margin:0 0 10px;vertical-align:0}
 .tk .tk-hero h1{font-size:clamp(2rem,9vw,2.6rem)}
 .tk-flow{max-width:100%}.tk-cta{flex-direction:column;align-items:stretch}.tk-go,.tk-how{justify-content:center}
 .tk-steps{border-radius:24px}.tk-step{padding:18px}.tk-step-badge{width:50px;height:50px;border-radius:16px}
 .tk-step-here{display:none!important}
}
@media print{.tk-switch,.tk-hero-art,.tk-cta,.tk-legend,.tk-more,.tk-flag{display:none!important}}