*{box-sizing:border-box}
:root{--bg:#f7f8fa;--fg:#20252b;--card:#fff;--ac:#10a37f;--on:#fff;--bd:#e4e8ec;--mut:#66717d;--r:18px;--f:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--h:var(--f);--shadow:0 12px 34px #16212b0d}
body[data-brand=chatgpt]{--bg:#f5faf8;--fg:#18332b;--card:#fff;--ac:#10a37f;--on:#fff;--bd:#dcebe5;--mut:#60776e;--r:18px}
body[data-brand=claude]{--bg:#fbf5ef;--fg:#38291f;--card:#fffdfa;--ac:#c96e4f;--on:#fff;--bd:#ead9ca;--mut:#816b5a;--r:24px;--f:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--h:Georgia,serif}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--f);transition:background .2s}
a{color:inherit;text-underline-offset:3px}h1,h2,h3{font-family:var(--h);line-height:1.17;letter-spacing:-.025em;margin:.2em 0 .55em}h1{font-size:clamp(2rem,5vw,3.35rem);max-width:850px}h2{font-size:clamp(1.4rem,3vw,2rem)}p{margin:.5rem 0 1rem}.top{position:sticky;top:0;z-index:5;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.85rem max(1rem,calc((100% - 1120px)/2));border-bottom:1px solid var(--bd);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);flex-wrap:wrap}.logo{font-weight:850;font-size:1.25rem;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.logo:before{content:"✳";color:var(--ac);margin-right:.45rem}nav{display:flex;gap:.35rem;flex-wrap:wrap}nav a{padding:.48rem .78rem;border-radius:99px;text-decoration:none;font-size:.92rem;font-weight:650}nav a:hover,nav a.on{background:var(--card);box-shadow:0 0 0 1px var(--bd)}main{max-width:1120px;margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem) 1rem 5rem}.btn,button{font:700 .96rem var(--f);background:var(--ac);color:var(--on);border:0;border-radius:999px;padding:.78rem 1.2rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;transition:transform .15s,filter .15s}button:hover,.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.alt,button.alt{background:var(--card);color:var(--fg);border:1px solid var(--bd)}button:disabled{opacity:.55;cursor:wait;transform:none}:focus-visible{outline:3px solid var(--ac);outline-offset:3px}.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr))}.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:clamp(1rem,3vw,1.4rem);box-shadow:var(--shadow)}body[data-brand=chatgpt] .card{border-top:3px solid color-mix(in srgb,var(--ac) 65%,white)}body[data-brand=claude] .card{box-shadow:0 10px 30px #6e4b3510}.tag{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;border:1px solid var(--bd);border-radius:99px;padding:.18rem .65rem;margin:0 .25rem .35rem 0;color:var(--mut);background:color-mix(in srgb,var(--card) 80%,var(--bg))}.price{font-weight:850;font-size:1.3rem;letter-spacing:-.03em;color:var(--ac)}.mut{color:var(--mut)}.split{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.hero{position:relative;overflow:hidden;padding:clamp(1.5rem,5vw,3rem);border-radius:28px;min-height:260px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero.g{background:linear-gradient(135deg,#102b23,#071a14);color:#effbf5;border:1px solid #2c7e65;font-family:var(--f)}.hero.c{background:linear-gradient(135deg,#f3e2d1,#fff8ef);color:#3a2a20;border:1px solid #e4b99f;font-family:var(--f)}.hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-55px;top:-55px;border:1px solid currentColor;opacity:.13;box-shadow:0 0 0 24px #ffffff08,0 0 0 48px #ffffff06}.hero h2{font-size:2rem}.hero p{max-width:390px}.hero.g .btn{background:#10a37f;color:#fff}.hero.c .btn{background:#c96e4f;color:#fff}.home-intro{padding:1rem 0 1.4rem}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--ac)}.filters{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0}.filters>*{width:auto;flex:1 1 170px}form{display:grid;gap:.85rem;max-width:520px}label{display:grid;gap:.35rem;font-size:.92rem;font-weight:650}input,select,textarea{font:inherit;padding:.75rem .85rem;border-radius:12px;border:1px solid var(--bd);background:var(--card);color:var(--fg);width:100%;min-height:44px}input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--ac) 45%,transparent);border-color:var(--ac)}.bar{height:8px;background:var(--bd);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);border-radius:99px}.err{color:#b42318;font-size:.92rem}.lesson{display:flex;justify-content:space-between;gap:.5rem;padding:.7rem 0;border-bottom:1px solid var(--bd);text-decoration:none}.lesson:hover{color:var(--ac)}.learn{display:grid;gap:1.2rem;grid-template-columns:minmax(220px,280px) 1fr}.learn aside{font-size:.92rem}.learn article p{white-space:pre-line;line-height:1.8}#modal{position:fixed;inset:0;background:#14201bd9;backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;z-index:9}#modal[hidden],#toast[hidden]{display:none}#modal .card{max-width:560px;width:100%;max-height:90vh;overflow:auto}.opt{display:flex;width:100%;text-align:left;justify-content:flex-start;margin:.45rem 0;padding:1rem 1.1rem;border-radius:14px}.opt:before{content:"↗";color:var(--ac)}#toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:.8rem 1.15rem;border-radius:99px;z-index:10;max-width:calc(100% - 2rem);box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:.7rem;border-bottom:1px solid var(--bd);text-align:left}.tbl{overflow-x:auto}textarea{min-height:320px;font:13px/1.5 ui-monospace,monospace}.notice{border:1px solid var(--bd);border-radius:14px;padding:.9rem 1rem;background:var(--card);color:var(--mut)}.feature-list{padding-left:1.2rem}.feature-list li{margin:.4rem 0}.empty{padding:1.2rem;border:1px dashed var(--bd);border-radius:var(--r);color:var(--mut)}
@media(max-width:700px){.split,.learn{grid-template-columns:1fr}.top{align-items:flex-start}.top nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.2rem}.top nav a{white-space:nowrap;font-size:.86rem}.hero{min-height:220px}main{padding-top:1.3rem}.tbl table{min-width:520px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}