:root{--bg:#f4f6f8;--card:#fff;--ink:#12202c;--mut:#5b6b78;--line:#dde3e8;--acc:#0b6e78;--accI:#fff;--wa:#128c4a;--waI:#fff;--r:14px}
@media(prefers-color-scheme:dark){:root{--bg:#0f161c;--card:#17212a;--ink:#e8eef2;--mut:#93a4b1;--line:#26333d;--acc:#4fc3cf;--accI:#06222a;--wa:#3ad07a;--waI:#05210f}}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Manrope,system-ui,sans-serif;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}
.w{max-width:1040px;margin:0 auto;padding:0 20px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0}
.logo{font:700 20px Sora,sans-serif;text-decoration:none;letter-spacing:-.02em}
.logo i{display:inline-block;width:10px;height:10px;background:var(--acc);border-radius:50%;margin-right:8px}
.hero{padding:44px 0 36px;max-width:680px}
h1{font:700 clamp(32px,6vw,52px)/1.08 Sora,sans-serif;letter-spacing:-.03em;margin:0 0 14px}
.hero p{color:var(--mut);font-size:18px;margin:0}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--acc);color:var(--accI);font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn.wa{background:var(--wa);color:var(--waI)}
.btn.o{background:none;color:var(--ink);border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;padding-bottom:40px}
.tip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tip .im{aspect-ratio:16/9;background:linear-gradient(135deg,var(--acc),var(--line));object-fit:cover;width:100%;display:block}
.tip .b{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{font-size:13px;color:var(--acc);font-weight:700}
.tip h2{font:700 20px/1.25 Sora,sans-serif;margin:0;letter-spacing:-.01em}
.tip p{margin:0;color:var(--mut);font-size:15px}
.act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.big{grid-column:1/-1}
.tip:target{outline:2px solid var(--acc)}
.sh{margin-top:4px}
.sh summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--mut);list-style:none;padding:4px 0}
.sh summary::-webkit-details-marker{display:none}
.sh[open] summary{color:var(--ink)}
.sh .m{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 2px}
.sh .m a,.sh .m button{font:700 13px Manrope,sans-serif;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);text-decoration:none;cursor:pointer}
@media(min-width:760px){.big{flex-direction:row}.big .im{width:52%;aspect-ratio:auto;min-height:260px}.big h2{font-size:28px}.big .b{padding:28px;justify-content:center}}
.ad{grid-column:1/-1;border:1px dashed var(--line);border-radius:var(--r);padding:10px;text-align:center;font-size:12px;color:var(--mut)}
.ad img{max-width:100%;border-radius:8px;display:block;margin:6px auto 0}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--mut);font-size:14px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* editor */
#ed{position:fixed;inset:0 0 0 auto;width:min(440px,100%);background:var(--card);border-left:1px solid var(--line);z-index:50;overflow:auto;padding:16px 16px 80px;display:none}
#ed.on{display:block}
#ed h3{font:700 16px Sora,sans-serif;margin:22px 0 8px}
#ed label{display:block;font-size:13px;color:var(--mut);margin:8px 0}
#ed input,#ed textarea{width:100%;font:inherit;font-size:15px;padding:9px 10px;margin-top:3px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
#ed textarea{min-height:70px}
#ed .it{border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0}
#ed .row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
#bar{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);display:none;gap:8px;flex-wrap:wrap;z-index:60;justify-content:flex-end}
#bar.on{display:flex}
.al{display:inline-block;margin-top:10px;font-size:13px;color:var(--mut)}
#bOpen{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.2)}