/* YipLink web app — soft-glass blue */
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#121834; --ink-2:#3a4468; --muted:#555e7c; --faint:#9aa3bd;
  --bg:#eef3fc; --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.92); --line:rgba(190,204,236,.7);
  --blue:#3d7bf5; --blue-deep:#2d63e6; --violet:#8b7cf0; --ok:#157a52; --warn:#8f4f0f;
  --grad:linear-gradient(135deg,#5fb0fb 0%,#6f95f6 50%,#9a7ef0 100%);
  --btn:linear-gradient(180deg,#6aa6ff 0%,#4383f7 52%,#3a72ef 100%);
  --shadow:0 18px 44px -20px rgba(45,75,160,.32), inset 0 1px 0 #fff;
  --f:"Inter","Segoe UI",system-ui,-apple-system,"Noto Sans Thai",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-card:24px; --r-ctl:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
svg{flex:none}
a{color:var(--blue-deep)}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.02em}
kbd{font:500 .82em var(--mono);padding:1px 6px;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:#fff;color:var(--ink-2);white-space:nowrap}
code{font:.88em var(--mono);background:rgba(61,123,245,.09);padding:1px 6px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:10px}
.skip:focus{left:16px}
:focus-visible{outline:3px solid rgba(61,123,245,.55);outline-offset:2px}

.wrap{width:100%;max-width:1220px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75}
.b1{left:-220px;top:-200px;width:820px;height:700px;background:#c5dbff}
.b2{right:-260px;top:160px;width:760px;height:700px;background:#ddd3fd}
.b3{left:30%;bottom:-420px;width:900px;height:640px;background:#cfe8ff}

/* header */
.site-header{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(238,243,252,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.7)}
.header-inner{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-right:auto}
.brand-icon{width:52px;height:52px;border-radius:15px;box-shadow:0 10px 22px -10px rgba(110,120,240,.7)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:800;font-size:24px;letter-spacing:-.03em}
.brand-tag{font-size:13.5px;color:#4554c8;font-weight:500}
.nav{display:flex;gap:28px}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover{color:var(--blue)}
.btn-ghost-blue{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:16px;background:var(--glass-strong);border:1px solid #fff;color:var(--blue-deep);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 8px 22px -12px rgba(45,75,160,.45)}
.btn-ghost-blue svg{width:19px;height:19px}
.btn-ghost-blue:hover{transform:translateY(-1px)}

/* hero */
.hero{text-align:center;padding-top:44px;padding-bottom:26px}
.hero h1{font-size:clamp(32px,5.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.hero-sub{max-width:640px;margin:14px auto 0;color:var(--muted);font-size:clamp(16px,1.9vw,19px);text-wrap:balance}

/* layout */
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.95);border-radius:var(--r-card);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* tool */
.tool{padding:22px 22px 22px}
.section-head{display:flex;align-items:center;gap:10px;margin:0 4px 12px}
.section-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;flex:0 1 auto;min-width:0}
.section-label svg{width:22px;height:22px;color:var(--muted);flex:none}
.section-head .icon-btn{margin-left:auto;flex:none}
.icon-btn{border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:4px;border-radius:50%}
.icon-btn svg{width:22px;height:22px}
.icon-btn:hover{color:var(--blue)}
.help-pop{margin:0 4px 12px;padding:14px 18px;border-radius:16px;background:rgba(61,123,245,.07);border:1px solid rgba(61,123,245,.18);font-size:14.5px;color:var(--ink-2)}
.help-pop ol{margin:0;padding-left:20px;display:grid;gap:4px}
.help-pop p{margin:8px 0 0;color:var(--muted)}

.inputbox{position:relative;background:var(--glass-strong);border:1px solid rgba(200,212,240,.9);border-radius:18px;box-shadow:inset 0 1px 3px rgba(60,90,170,.08);transition:border-color .2s,box-shadow .2s}
.inputbox:focus-within{border-color:#9bbcff;box-shadow:0 0 0 4px rgba(61,123,245,.12),inset 0 1px 3px rgba(60,90,170,.08)}
textarea{display:block;width:100%;min-height:150px;height:160px;max-height:420px;resize:vertical;border:0;outline:0;background:transparent;padding:16px 46px 30px 20px;font:15px/1.75 var(--mono);color:var(--ink)}
textarea::placeholder{color:var(--faint);font-family:var(--f)}
.clear-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--faint);display:grid;place-items:center;cursor:pointer}
.clear-x svg{width:17px;height:17px}
.clear-x:hover{color:var(--ink-2);background:rgba(220,230,248,.9)}
.clear-x[hidden]{display:none}
.char-count{position:absolute;right:16px;bottom:9px;font-size:13px;color:var(--muted);pointer-events:none}

.tool-row{display:flex;gap:12px;margin-top:16px}
.btn-primary{flex:1;height:60px;border-radius:20px;border:1px solid rgba(255,255,255,.55);background:var(--btn);color:#fff;font:700 18.5px var(--f);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;box-shadow:0 14px 28px -12px rgba(61,123,245,.75),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 5px rgba(30,70,190,.25);transition:transform .15s,filter .2s}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{filter:grayscale(.5) brightness(1.1);opacity:.6;cursor:not-allowed}
.btn-primary .spark{width:24px;height:24px}
.btn-primary .arrow{width:22px;height:22px;transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-paste{flex:none;display:flex;align-items:center;gap:8px;padding:0 20px;height:60px;border-radius:20px;border:1px solid #fff;background:var(--glass-strong);color:var(--ink-2);font:600 15px var(--f);cursor:pointer;box-shadow:0 8px 20px -12px rgba(45,75,160,.45)}
.btn-paste svg{width:20px;height:20px}
.btn-paste:hover{color:var(--blue)}
.status{margin:12px 0 0;text-align:center;font-size:14px;color:var(--muted);min-height:22px}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)}

.results{margin-top:18px}
.results-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 4px 12px}
.results-head h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.results-head h2 svg{width:22px;height:22px;color:var(--muted)}
.count{color:var(--muted);font-weight:600}
.btn-ghost{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:12px;border:1px solid #fff;background:rgba(232,238,250,.95);color:var(--muted);font:600 14px var(--f);cursor:pointer}
.btn-ghost svg{width:17px;height:17px}
.results-head .btn-ghost{margin-left:auto}
.btn-ghost:hover{color:var(--ink)}
#clearAll:hover{color:#c43d4f;background:#fdeef0}

.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-height:560px;overflow-y:auto;scrollbar-width:thin}
.link{min-width:0;display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:18px;background:var(--glass-strong);border:1px solid #fff;box-shadow:0 8px 20px -14px rgba(45,75,160,.45);animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(225,233,248,.95);font-weight:600;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.thumb{flex:none;width:128px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#c9d8f6,#a9bfee);display:grid;place-items:center;color:#fff;max-width:100%}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:26px;height:26px}
.info{flex:1;min-width:0}
.title{font-weight:600;font-size:15.5px;line-height:1.35;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.url{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--blue-deep);text-decoration:none}
.url .ic{width:24px;height:24px;flex:none;border-radius:8px;background:rgba(61,123,245,.12);display:grid;place-items:center}
.url .ic svg{width:13px;height:13px}
.url .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url:hover .t,.url:hover .t-short{text-decoration:underline}
.url .t-short{display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.url .t{display:none}.url .t-short{display:block}}
.copy{flex:none;width:48px;height:48px;border-radius:15px;border:1px solid #fff;background:linear-gradient(180deg,#fff,rgba(234,240,252,.95));box-shadow:0 6px 14px -8px rgba(45,75,160,.5);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.copy svg{width:21px;height:21px}
.copy:hover{color:var(--blue)}
.copy.done{color:var(--ok);background:#e8f7f0}

.empty{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:18px;border:1.5px dashed rgba(150,170,220,.6);color:var(--muted);font-size:14.5px}
.empty p{margin:0}
.empty strong{color:var(--ink-2)}
.empty-art{flex:none;display:grid;gap:6px;width:88px}
.empty-art span{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(111,149,246,.35),rgba(154,126,240,.2))}
.empty-art span:nth-child(2){width:80%}.empty-art span:nth-child(3){width:60%}
.empty[hidden]{display:none}

.export{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.export[hidden]{display:none}
select{height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:500 14px var(--f);padding:0 34px 0 12px}
.btn-copyall{width:100%;flex:none;margin-top:14px;height:62px}
.btn-copyall svg{width:22px;height:22px}

/* side */
.side{display:grid;gap:18px}
.features{padding:22px 22px;display:grid;gap:20px}
.feat{display:flex;gap:16px;align-items:flex-start}
.feat-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center}
.feat-ic svg{width:24px;height:24px}
.feat-ic.blue{background:#e2ecff;color:#3d7bf5}.feat-ic.violet{background:#ece6ff;color:#7b62e8}
.feat-ic.green{background:#e0f5ea;color:#22a565}.feat-ic.rose{background:#ffe6ea;color:#e8435c}
.feat h3{font-size:16.5px;font-weight:700;margin-bottom:3px}
.feat p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fact{background:var(--glass);border:1px solid #fff;border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--shadow)}
.fact b{display:block;font-size:19px;letter-spacing:-.02em}
.fact span{font-size:12.5px;color:var(--muted);line-height:1.3;display:block;margin-top:2px}

/* content blocks */
.block{padding-top:84px}
.block-head{max-width:720px;margin-bottom:26px}
.eyebrow{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4554c8}
.block h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:1.15}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step-n{width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:16px;box-shadow:0 10px 20px -10px rgba(110,120,240,.8)}
.step h3,.use h3{font-size:18px;font-weight:700;margin-bottom:6px}
.use p{margin:0;color:var(--muted);font-size:15.5px}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.use{padding:24px}
.faq{display:grid;gap:12px;max-width:860px}
.faq details{padding:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 22px 20px;color:var(--ink-2)}

/* footer */
.site-footer{margin-top:90px;padding-block:30px calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.4)}
.footer-inner{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}
.footer-inner p{margin:0}
.footer-nav{display:flex;gap:18px}
.footer-nav a{color:var(--ink-2);text-decoration:none}
.disclaimer{flex-basis:100%;font-size:12.5px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#121834;color:#fff;padding:12px 20px;border-radius:14px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* responsive */
@media (max-width:1020px){
  .app-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .facts{grid-column:1/-1}
}
/* v2.4.3 (C2): at 320 px the two header rows of the tool card (the label with its ? button, and "Extracted Links" with "Clear All") were wider than the card and could not shrink,
   so the buttons stuck out of it and the page scrolled sideways. They now shrink or wrap; the small gaps below keep 360 px on one line, as before. */
@media (max-width:380px){
  .section-head{gap:4px}
  .results-head{gap:8px}
  .results-head .btn-ghost{padding:0 12px}
}
@media (max-width:760px){
  .nav{display:none}
  .header-inner{gap:12px}
  .btn-ghost-blue{padding:10px 14px}
  .btn-ghost-blue span{display:none}
  .side{grid-template-columns:minmax(0,1fr)}
  .steps,.uses{grid-template-columns:minmax(0,1fr)}
  .tool{padding:16px}
  .thumb{width:96px}
  .n{display:none}
  .link{gap:10px;padding:8px}
  .copy{width:42px;height:42px}
  .btn-primary{font-size:16px;height:56px;gap:10px}
  .btn-primary .arrow{display:none}
  .results-head h2{font-size:17px;white-space:nowrap}
  .results-head h2 svg{display:none}
  .btn-paste span{display:none}
  .btn-paste{padding:0 16px;height:56px}
  .block{padding-top:60px}
}

/* ---------- v2 additions ---------- */
.block-head .lead{margin:12px 0 0;color:var(--muted);font-size:17px;max-width:62ch}
.mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.plain{margin:8px 0 0;padding-left:18px;display:grid;gap:8px;color:var(--ink-2);font-size:15.5px}
.use.ok h3::before,.use.no h3::before{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-right:10px;font-size:14px;vertical-align:2px;color:#fff}
.use.ok h3::before{content:"✓";background:#22a565}
.use.no h3::before{content:"✕";background:#c4566a}
.legal{max-width:760px;padding-top:40px}
.legal h1{font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-.03em}
.legal .updated{color:var(--muted);margin:10px 0 28px}
.legal .card{padding:28px 30px}
.legal h2{font-size:21px;margin:26px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:20px;display:grid;gap:6px}
.todo{background:#fff4e0;border:1px solid #f3cf8e;color:#7a4a00;border-radius:10px;padding:2px 8px;font-weight:600}
@media (max-width:760px){.mobile-grid{grid-template-columns:minmax(0,1fr)}.legal .card{padding:20px}}

/* ---------- v2.1 additions ---------- */
.export{align-items:center}
.export-label{flex-basis:100%;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.export-note{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted)}
.mobile-note{margin:12px 2px 0;padding:12px 14px;border-radius:14px;background:rgba(61,123,245,.08);border:1px solid rgba(61,123,245,.2);font-size:14px;line-height:1.5;color:var(--ink-2)}
.mobile-note[hidden]{display:none}
.mobile-note a{color:#1e4fc8;font-weight:600}
/* v2.1: counter sits on its own background so scrolled text never shows through it */
.char-count{background:#fff;padding:1px 6px;border-radius:8px}

/* ---------- v2.2 additions: hero link, How it works, tutorial video ---------- */
.hero-links{margin:16px 0 0}
.hero-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:99px;background:var(--glass-strong);border:1px solid #fff;color:var(--blue-deep);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 10px 22px -14px rgba(45,75,160,.5)}
.hero-link svg{box-sizing:content-box;width:12px;height:12px;padding:5px 5px 5px 6px;margin-left:-5px;border-radius:50%;background:var(--btn);color:#fff}
.hero-link:hover{text-decoration:underline}

.steps{align-items:stretch;gap:22px;counter-reset:none}
.step{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px}
.step:not(:last-child)::after{content:"";position:absolute;right:-17px;top:42px;width:12px;height:12px;border-top:2.5px solid #a9bcf0;border-right:2.5px solid #a9bcf0;transform:rotate(45deg);border-radius:2px;z-index:2}
.step-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.step-top .step-n{margin:0}
.step-top h3{margin:0;font-size:21px;font-weight:800;line-height:1.2}
.step-text{margin:0;color:var(--muted);font-size:15.5px}

/* step 1 illustration (decorative) */
.step-art{margin-top:auto;padding-top:22px}
.pick{position:relative;display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid rgba(200,212,240,.7);overflow:hidden}
.pick-row{display:flex;gap:12px;align-items:center}
.pick-th{flex:none;width:62px;aspect-ratio:16/9;border-radius:7px;background:linear-gradient(135deg,#c9d8f6,#a9bfee)}
.pick-row:nth-child(2) .pick-th{background:linear-gradient(135deg,#d7ccfb,#b7a8f3)}
.pick-row:nth-child(3) .pick-th{background:linear-gradient(135deg,#bfe9dc,#93d6c0)}
.pick-ln{flex:1;min-width:0;display:grid;gap:6px}
.pick-ln i,.pick-ln b{display:block;height:9px;border-radius:5px;background:#c3cde6}
.pick-ln b{width:46%;height:7px;background:#dde4f3}
.pick-row.sel .pick-ln i{background:#7fa8f7;box-shadow:0 0 0 4px rgba(111,165,255,.38);border-radius:4px}
.pick-row:nth-child(2) .pick-ln i{width:88%}.pick-row:nth-child(3) .pick-ln i{width:72%}.pick-row:nth-child(4) .pick-ln i{width:80%}
.pick-cursor{position:absolute;right:26px;bottom:34px;width:30px;height:30px;filter:drop-shadow(0 6px 8px rgba(18,24,52,.3))}

/* tab switcher */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;margin:2px 0 8px;border-radius:16px;background:rgba(214,225,247,.75);box-shadow:inset 0 1px 2px rgba(60,90,170,.12)}
.seg[hidden]{display:none}
.seg button{border:0;border-radius:12px;padding:8px 8px 7px;background:transparent;color:#4a5474;cursor:pointer;font:700 15px/1.2 var(--f);text-align:center;transition:background .2s,box-shadow .2s,color .2s}
.seg button small{display:block;margin-top:2px;font:500 12px/1.2 var(--f);color:#4f5977}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 8px 16px -10px rgba(45,75,160,.6),0 1px 2px rgba(45,75,160,.12)}
.seg button:focus-visible{outline-offset:1px}
/* three-column layout: keep both panels in one grid cell so the cards never change height when the tab changes */
@media (min-width:1021px){
  .js .panels{display:grid}
  .js .panel{grid-area:1/1}
  .js .panel[hidden]{display:block;visibility:hidden}
}
.panel:focus-visible{outline-offset:4px;border-radius:12px}
.panel + .panel{margin-top:14px}
.js .panel + .panel{margin-top:0}
.panel[hidden]{display:none}
@media (min-width:1021px){.js .panel[hidden]{display:block}}

.keyrows{margin:0}
.keyrows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;border-top:1px solid rgba(190,204,236,.75)}
.keyrows>div:first-child{border-top:0}
.keyrows dt{margin:0;font-size:15px;font-weight:500;color:var(--muted)}
.keyrows dd{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:15px;font-weight:600;color:var(--ink-2);text-align:right}
.keyrows .words{display:block}
.keyrows .plus{color:#8a94b3;font-weight:600;font-size:15px}
.cap{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 11px;border-radius:11px;font:700 15px/1 var(--f);letter-spacing:0;color:#22306b;white-space:nowrap;
  background:linear-gradient(180deg,#f0f4ff 0%,#d3e0ff 100%);border:1px solid #b9cbfa;border-bottom-width:3px;border-bottom-color:#9db7f2;box-shadow:0 6px 10px -6px rgba(45,75,160,.55),inset 0 1px 0 #fff}
.cap.alt{background:linear-gradient(180deg,#fff4ea 0%,#ffdcc0 100%);border-color:#f3c6a1;border-bottom-color:#e8a979;color:#6f3407}
.panel-note{margin:6px 2px 0;padding-top:12px;border-top:1px solid rgba(190,204,236,.75);font-size:14px;line-height:1.5;color:var(--muted)}
.step-foot{margin:auto 0 0;padding-top:16px;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);border-top:1px solid rgba(190,204,236,.75)}
.step-foot svg{width:22px;height:22px;margin-top:2px;color:var(--blue);flex:none}
.step-foot strong{font-weight:700}
.panels + .step-foot{margin-top:18px}

/* tutorial video */
.video{margin:30px auto 0;padding:18px;max-width:980px}
.video-head{padding:2px 6px 14px}
.video-head h3{font-size:19px;font-weight:700;line-height:1.3}
.video-frame{position:relative;border-radius:20px;overflow:hidden;background:#dbe4f7;box-shadow:0 44px 70px -42px rgba(30,50,130,.6),0 0 0 1px rgba(255,255,255,.9),0 0 80px -20px rgba(111,149,246,.45);aspect-ratio:16/9}
.video video{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;background:#dbe4f7}
/* v2.4.2 (A6): on screens wide enough for the player to be big, draw the browser's captions a little smaller so the longest line stays on one line
   and does not cover the phone demo or the key steps. Phones keep the browser default, which is already small. */
@media (min-width:640px){video::cue{font-size:80%}}
/* v2.4.3 (C3): the browser draws its own captions as a square dark bar and CSS cannot round it (border-radius and padding are ignored on ::cue).
   So the page draws the same rounded box that is burned into yiplink-tutorial-captioned.mp4, from the same .vtt track, and hides the browser's copy.
   The track stays the single source: the browser's own CC menu still turns the captions on and off, and nothing is drawn twice.
   Sizes are the MP4's (1920 px wide picture) scaled to the player's width. */
.video-frame{container-type:inline-size}
.video-cap{position:absolute;left:0;right:0;bottom:1.354cqw;display:flex;justify-content:center;padding:0 3.6%;pointer-events:none;z-index:2;transition:bottom .12s ease}
.video-cap[hidden]{display:none}
.video-cap span{max-width:100%;text-align:center;color:#fff;background:rgba(18,24,52,.84);font-weight:600;letter-spacing:-.005em;line-height:1.3;
  font-size:clamp(12px,1.45vw,15px);font-size:max(12px,1.5625cqw);padding:.3em .867em;border-radius:.533em;box-shadow:0 .467em 1em -.6em rgba(10,20,60,.6);text-wrap:balance}
/* while the player's own control bar is on screen (paused, or the pointer or a finger is on the video) the box sits above it, like the browser's captions do */
.video-frame.ui .video-cap{bottom:max(1.354cqw,64px)}
.video-frame.cap-custom video::cue{color:transparent;background:transparent;text-shadow:none;outline:none}
/* The play button is an invisible hit area laid over the "Watch the tutorial" pill that is drawn into the poster image,
   so there is nothing to misalign; hover and focus draw a ring around the pill. */
.video-play{display:none;position:absolute;left:6.25%;top:69.5%;width:24.5%;height:10.4%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:99px;transition:box-shadow .2s}
.js .video-play{display:block}
.video-play[hidden]{display:none!important}
.video-play:hover{box-shadow:0 0 0 4px rgba(61,123,245,.35)}
.video-play:focus-visible{outline:3px solid rgba(61,123,245,.9);outline-offset:6px}
.transcript{margin:8px 6px 0;font-size:14.5px}
.transcript summary{cursor:pointer;font-weight:600;color:var(--blue-deep);padding:6px 0;width:max-content;max-width:100%}
.transcript p{margin:6px 0 4px;color:var(--ink-2);max-width:78ch}

@media (max-width:1020px){
  .steps{gap:18px}
  .step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-14px;margin-left:-6px;transform:rotate(135deg)}
}
@media (max-width:760px){
  .hero-link{font-size:14.5px}
  .step{padding:22px 18px 20px}
  .step-top h3{font-size:19px}
  .video{padding:12px;margin-top:24px}
  .video-head{padding:0 4px 10px}
  .video-head h3{font-size:17px}
  .keyrows dt{font-size:14.5px}
  .cap{min-width:34px;height:34px;padding:0 10px}
}

/* v2.4.0: paste-key hint inside the input box (shows the shortcut for this device; hidden once text is present) */
.paste-hint{position:absolute;left:20px;bottom:8px;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);pointer-events:none}
.paste-hint kbd{font-size:12px;padding:0 6px;line-height:1.55}
.paste-hint .ph-touch{display:none}
html.is-touch .paste-hint .ph-key{display:none}
html.is-touch .paste-hint .ph-touch{display:inline}
textarea:not(:placeholder-shown) ~ .paste-hint{display:none}
/* v2.4.0 point 10: balanced wrapping for the mobile intro */
#mobile .lead{text-wrap:pretty;max-width:60ch}