/* Tools: tactile services and a gradual descent into the night palette. */
#tk{isolation:isolate;overflow:visible}.tk__row{min-height:92svh;padding-block:clamp(110px,13vw,190px);border:0!important;--section-ink:#25314c;--surface:#fff5;--line:#fff9;color:var(--section-ink)}
.tk__row:before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:linear-gradient(180deg,#dedbe8,#d7dbea)}
.tk__row[data-tk="1"]:before{background:linear-gradient(#d7dbea,#b1c3d3)}
.tk__row[data-tk="2"]{--section-ink:#f1f0f9;--surface:#ffffff0e;--line:#ffffff45}.tk__row[data-tk="2"]:before{background:linear-gradient(#657d96,#303f5c)}
.tk__row[data-tk="3"]{--section-ink:#f2edf9;--surface:#ffffff09;--line:#ffffff38}.tk__row[data-tk="3"]:before{background:radial-gradient(ellipse at 70% 40%,#3e3b6090,transparent 60%),linear-gradient(#303f5c,#12162c)}
.tk__body,.tk__cap,.tl__say,.tl__title{color:inherit}.tk__cap{opacity:.7}.tk__star{filter:drop-shadow(0 8px 18px #7b639b22)}.tk__trail{color:#b6adc060}
.tl__list{display:flex;flex-wrap:wrap;gap:12px 9px;max-width:none;margin-top:32px}.tl__list li{display:block;padding:0;background:none;border:0;border-radius:0}.tl__list li:before{display:none}
.tool-pill{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:inset 0 1px 1px #fff6,0 4px 10px #111b3110;color:inherit;font:500 13px/1.45 var(--font-body);text-align:left;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,transform .3s}
.tool-pill>svg{width:16px;height:16px;flex:none;opacity:.7}.tool-pill:hover,.tool-pill[aria-expanded=true]{background:#20283e;color:#fff8ef;box-shadow:inset 0 2px 2px #fff5,inset 0 -2px 2px #060f2480,0 0 17px #d2bde16b;transform:translateY(-3px)}.tool-pill:focus-visible{outline:2px solid #ae87c3;outline-offset:4px}
.tool-preview{position:fixed;z-index:7000;width:330px;max-width:calc(100vw - 32px);padding:18px 22px 22px;border:1px solid #fffd;border-radius:28px;background:linear-gradient(135deg,#f0eaf8f5,#ccd6e7fa);box-shadow:inset 0 2px 1px #fff,0 18px 45px #10172b35;color:#1b2440;animation:tool-preview-in .35s cubic-bezier(.16,1,.3,1);font-family:var(--font-body)}.tool-preview[hidden]{display:none}.tool-preview__art{height:185px;display:grid;place-items:center;position:relative;margin-top:8px}.tool-preview__art:before{content:'';position:absolute;inset:20px;border-radius:50%;background:radial-gradient(#fff9,transparent 70%)}.tool-preview__art img{height:190px;width:230px;object-fit:contain;position:relative;filter:drop-shadow(0 8px 10px #26365722);animation:tool-art-in .55s cubic-bezier(.16,1,.3,1)}.tool-preview__motif{position:absolute;bottom:10px;right:0;width:54px;height:54px;padding:12px;border-radius:18px;background:#ffffffb0;box-shadow:inset 0 1px #fff,0 5px 18px #30385418;color:#77678c}.tool-preview__id{font:9px var(--font-mono);letter-spacing:.16em;opacity:.6}.tool-preview h3{font:650 20px/1.35 var(--font-display);margin:12px 0 9px}.tool-preview p{font-size:13px;line-height:1.7;margin:0;color:#505671}.tool-preview__close{position:absolute;right:12px;top:10px;width:30px;height:30px;border:1px solid #a89cb350;border-radius:50%;background:#fff5;color:inherit;cursor:pointer}
@keyframes tool-preview-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes tool-art-in{from{opacity:0;transform:translateY(14px) scale(.86)}to{opacity:1;transform:none}}
.tl__end{position:relative;isolation:isolate;padding-block:110px;color:#ede8f5}.tl__end:before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:#12162c;z-index:-1}.tl__endsay{color:#c8c8db}.tl__end .btn{border-radius:999px;padding:15px 27px;color:#fff8ef;background:linear-gradient(145deg,#61536f,#303447 48%,#172238);border:1px solid #dcd7ee80;box-shadow:inset 0 2px 2px #fff8,inset 0 -3px 2px #0c122780,0 3px 1px #11192b,0 7px 16px #0003;transition:box-shadow .35s,transform .35s}.tl__end .btn:before{content:'✦';margin-right:12px;color:#fff1cb;text-shadow:0 0 8px #dac6ef}.tl__end .btn:hover{transform:translateY(-2px);box-shadow:inset 0 2px 2px #fff8,0 0 24px #ccb1e070}
@media(max-width:899px){.tk__row{min-height:auto;padding-block:90px}.tl__list{gap:9px 7px}.tl__list li{color:inherit;font-size:inherit}.tool-pill{font-size:12px;min-height:44px;padding:10px 13px}.tool-preview{left:16px!important;right:16px;top:auto!important;bottom:20px;width:auto}.tool-preview__art{height:145px}.tool-preview__art img{height:155px}.tk__row[data-tk="2"] .tl__say,.tk__row[data-tk="3"] .tl__say{color:inherit}.tl__end{padding-block:80px}}
@media(prefers-reduced-motion:reduce){.tool-pill,.tl__end .btn{transition:none}.tool-preview,.tool-preview__art img{animation:none}}
.tool-preview{background:linear-gradient(135deg,#f0eaf8,#ccd6e7)}
.header{background:rgba(228,225,235,.94)}
.tk__row[data-tk="1"]:before{background:linear-gradient(#d7dbea,#5a728d)}
.tk__row[data-tk="2"]:before{background:linear-gradient(#5a728d,#303f5c)}
/* V22: one continuous painted surface, including the introduction boundary. */
main{position:relative;isolation:isolate;background:linear-gradient(180deg,#dcd8e4 0%,#d7dbea 30%,#a8b9ce 46%,#526781 59%,#303f5c 77%,#12162c 94%)}
#tk:before{display:none}
.tk__row:before{display:none}
.tk__row[data-tk="1"]{--section-ink:#202d43}
.tk__star,.tk__ghost{width:clamp(112px,13vw,180px);filter:none}
.tool-preview{width:350px;padding:16px 16px 21px;border-radius:25px;max-height:calc(100svh - 100px);overflow:auto}
.tool-preview__art{height:auto;aspect-ratio:3/2;margin-top:12px;overflow:hidden;border-radius:16px;background:#cdc5d2}
.tool-preview__art:before{display:none}.tool-preview__art img{width:100%;height:100%;object-fit:cover;filter:none;animation:tool-art-in .45s ease-out}
.tool-preview h3,.tool-preview p{padding-inline:5px}.tool-preview__close{width:44px;height:44px;right:4px;top:0;border:0;background:transparent}
.tl__end{padding-top:35px;text-align:center}.tl__endhead,.tl__endsay{margin-inline:auto}
@media(max-width:899px){.tk__star,.tk__ghost{width:48px}.tool-preview{width:auto;padding:14px 16px 20px;max-height:70svh}.tool-preview__art{height:auto;max-height:210px;aspect-ratio:3/2}.tool-preview__art img{height:100%;width:100%}}

.tool-pill{-webkit-tap-highlight-color:transparent}
.tool-preview-open .chat{visibility:hidden;pointer-events:none}
.tl__end:before{background:transparent}
/* V24: enlarge the actual illustration, keeping the complete scene visible. */
.tk__cap{visibility:hidden}
.tool-preview{width:min(850px,calc(100vw - 32px));padding:18px 22px 22px}
.tool-preview__art{max-height:calc(100svh - 260px);aspect-ratio:3/2}
.tool-preview__art img{object-fit:contain}
@media(max-width:899px){.tool-preview{width:auto;padding:14px 16px 20px;max-height:85svh}.tool-preview__art{max-height:calc(85svh - 170px)}}
@media(min-width:900px){.tool-preview{width:min(850px,calc((100svh - 260px)*1.5),calc(100vw - 32px))}}
@media(hover:hover){.tool-preview{pointer-events:none}.tool-preview__close{pointer-events:auto}}

/* V28: continuous vertical progression with a soft bottom-left / top-right wash. */
main{background:linear-gradient(32deg,#627e9c00 10%,#b7bed126 42%,#f4e7e521 68%,#f4e7e500 92%),radial-gradient(ellipse at 0% 48%,#829ebb38,transparent 45%),radial-gradient(ellipse at 100% 59%,#aea5c32b,transparent 43%),linear-gradient(180deg,#dcd8e4 0%,#d7dbea 25%,#c5cedd 36%,#a8b9ce 44%,#879db6 52%,#687e99 60%,#4b607e 69%,#303f5c 79%,#1e2943 88%,#12162c 98%)}
.tl__end .btn{position:relative;isolation:isolate;overflow:hidden;background:transparent;border:1px solid #ffffff80;border-radius:999px;box-shadow:none;transform:none;transition:background 350ms,color 350ms,border-color 350ms}.tl__end .btn:before{display:none}.tl__end .btn:after{content:'';position:absolute;inset:-60% auto -60% -55%;width:35%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,#ffffff65,transparent);pointer-events:none}.tl__end .btn:hover,.tl__end .btn:focus-visible{background:#ffffff0b;border-color:#fff;box-shadow:none;transform:none}.tl__end .btn:hover:after,.tl__end .btn:focus-visible:after{animation:tool-cta-sweep 850ms cubic-bezier(.2,.65,.3,1) both}@keyframes tool-cta-sweep{to{left:145%}}
.tool-preview{background:linear-gradient(135deg,#f0eaf855,#cdd8e733);-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);border:1px solid #ffffff80;box-shadow:inset 0 1px 0 #ffffff80,0 14px 40px #10172b25;color:#17213b}.tool-preview__art{background:transparent}.tool-preview p{color:#27334e}
@media(min-width:900px){.tool-preview{width:min(595px,calc((100svh - 260px)*1.05),calc(100vw - 32px));padding:14px 17px 17px}.tool-preview__art{max-height:calc((100svh - 260px)*.7)}.tool-preview h3{font-size:18px;margin-block:10px 7px}.tool-preview p{font-size:12px}.tool-preview__art{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.tl__end .btn:hover:after,.tl__end .btn:focus-visible:after{animation:none;left:40%}}

/* The existing Landing star generator is mounted above the painted background. */
main>.sky--content{position:fixed;color:#fff;opacity:.6;z-index:0;pointer-events:none}main>.tl__intro,main>#tk,main>.tl__end{position:relative;z-index:1}
.tl__end .btn{background:transparent;color:#f5f0fb;overflow:visible;isolation:isolate;transition:background 350ms,color 350ms,box-shadow 500ms,transform 500ms}.tl__end .btn:before{display:block;content:'';position:absolute;inset:-3px;border-radius:inherit;z-index:-1;background:linear-gradient(120deg,#ffffffe6,#b6a3e014 38%,#edd3a6b3 73%,#ffffffd9);filter:blur(6px);opacity:0;transition:opacity 450ms;margin:0;pointer-events:none}.tl__end .btn:hover,.tl__end .btn:focus-visible{background:linear-gradient(155deg,#46465e,#1b243b 65%);color:#f5f0fb;box-shadow:inset 0 2px 2px #ffffff55,inset 0 -3px 2px #13192c,0 5px 0 -2px #22243b,0 12px 26px #44375040;transform:translateY(-2px)}.tl__end .btn:hover:before,.tl__end .btn:focus-visible:before{opacity:1}.tl__end .btn:after{inset:0;border-radius:inherit;width:auto;background:linear-gradient(110deg,transparent 30%,#ffffff4d 49%,transparent 68%);background-size:300% 100%;background-position:100% 0;transform:none;opacity:0}.tl__end .btn:hover:after,.tl__end .btn:focus-visible:after{animation:tool-shop-sweep 850ms ease-out both}@keyframes tool-shop-sweep{0%{opacity:0;background-position:100% 0}25%{opacity:1}100%{opacity:0;background-position:0 0}}@media(prefers-reduced-motion:reduce){.tl__end .btn:hover{transform:none}.tl__end .btn:hover:after{animation:none}}
