:root{--bg:#f3efe6;--card:#fffdf6;--ink:#543f32;--muted:#8f7864;--line:#d6c8b2;--dash:#cbbda7;--edge:#b9a58d;--field-edge:#bba284;--shade:#d8cdbd;--soft:#f1eee4;--chip-edge:#bbad98;--dot:#ddd4c4;
--pink:#c94c73;--pink-deep:#c94c73;--pink-press:#ab4464;--pink-ink:#b34365;--pink-soft:#f8e4e8;--pink-edge:#deadc0;--orange-ink:#a66436;--gold:#cf9552;--teal:#648c9a;--focus:#4392aa;
--blue:#7fa7b1;--blue-mid:#4f8392;--blue-ink:#3f6c78;--blue-soft:#e8f1ee;--blue-edge:#aac4c7;--amber-ink:#7d5a1e;--amber-soft:#f8ebc8;--amber-edge:#d7bf86;--green:#a8bf93;--green-edge:#819267;--green-ink:#546b41;--green-soft:#e7eddb;
--shadow:3px 6px 0 var(--shade);--r1:7px 13px 9px 5px;--r2:5px 9px 3px 8px;--r3:7px 3px 9px 4px;--r4:4px 8px 5px 7px;--r5:6px 3px 10px 4px;
--noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' fill='%239d815e' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
--crayon:url("/assets/crayon.png");
--hand:"Comic Sans MS","Comic Neue","Chalkboard SE","Segoe Print",cursive;
--font:"Comic Sans MS","Comic Neue","Chalkboard SE","Segoe UI",system-ui,sans-serif;color-scheme:light}
:root:lang(zh-CN){--font:"KaiTi","STKaiti","Kaiti SC","Microsoft YaHei","PingFang SC",sans-serif}
:root:lang(zh-TW){--font:"DFKai-SB","BiauKai","Kaiti TC","KaiTi","Microsoft JhengHei","PingFang TC",sans-serif}
:root:lang(ja){--font:"UD Digi Kyokasho NK-R","UD Digi Kyokasho N-R","YuKyokasho","Klee","Yu Gothic UI","Meiryo",sans-serif}
:root:lang(ko){--font:"Comic Sans MS","Comic Neue","Malgun Gothic","Apple SD Gothic Neo",sans-serif}
:root:lang(th){--font:"Comic Sans MS","Comic Neue","Leelawadee UI","Tahoma",sans-serif}
:root:lang(vi){--font:"Segoe UI","Arial",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0}[hidden]{display:none!important}
body{background:var(--noise),radial-gradient(var(--dot) 1px,transparent 1.2px) 0 0/14px 14px,var(--bg);color:var(--ink);font:16px/1.65 var(--font)}
a{color:var(--pink-ink);text-decoration:underline dashed;text-decoration-color:var(--pink-edge);text-underline-offset:3px}a:hover{text-decoration-style:solid}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:var(--noise),var(--card);border-bottom:2px dashed var(--dash)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:70px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font:700 18px/1.2 var(--hand);letter-spacing:-.4px;text-decoration:none}
.brand .dog{width:66px;height:auto;transform:rotate(-7deg);flex:none}.brand small{display:block;font:13px/1.2 var(--font);letter-spacing:0;color:var(--orange-ink);margin-top:2px}
.brand:hover{text-decoration:none}
nav.links{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav.links a{color:var(--muted);padding:5px 10px;border:1.5px solid transparent;border-radius:var(--r4);font-size:15px;text-decoration:none}
nav.links a:hover,nav.links a.on{background:var(--card);border-color:var(--edge);color:var(--ink);box-shadow:2px 3px 0 var(--shade)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border-radius:var(--r4);border:1.5px solid var(--field-edge);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none!important}
.btn:active:not([disabled]){transform:rotate(-1deg) translateY(1px)}
.btn.primary{background:var(--crayon) center/400px 80px,var(--pink-deep);border-color:transparent;color:#fffaf2;box-shadow:0 3px 0 var(--pink-press);border-radius:var(--r2);transform:rotate(-.6deg)}.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--card);color:var(--ink)}.btn.ghost:hover{color:var(--pink-ink);border-color:var(--pink-edge)}
.btn.soft{background:var(--pink-soft);border:1.5px dashed var(--pink-edge);color:var(--pink-ink)}
.btn.done{background:transparent;border:1.5px dashed var(--line);color:var(--muted);box-shadow:none;cursor:default;pointer-events:none}
.btn[disabled]{opacity:.55;cursor:default}
nav.links .btn{height:38px;padding:0 14px;margin-left:6px;font-size:15px}
.hero{padding:56px 0 28px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.25;margin:0 0 14px;font-weight:700}
.hero h1 em{font-style:normal;color:var(--pink-ink);display:inline-block;transform:rotate(-2deg)}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 22px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.demo{background:var(--noise),var(--card);border:2px solid var(--edge);border-radius:var(--r1);box-shadow:var(--shadow);padding:18px;position:relative}
.screen{position:relative;border-radius:5px 9px 6px 4px;background:#3a3029;aspect-ratio:16/9;display:flex;flex-direction:column;gap:4px;padding:38px 7% 7%;border:2px solid #54453a}
.screen .line{text-align:center;color:#fff;font-weight:700;font-size:15px;text-shadow:0 1px 2px #000;font-family:system-ui,"Segoe UI","Microsoft YaHei",sans-serif}
.screen .orig{margin-top:auto;font-size:12px;opacity:.75;font-weight:500}
.screen .title{color:#ffe14d;font-weight:900;font-size:20px;line-height:1.25;text-shadow:2px 2px 0 #000;font-family:system-ui,"Segoe UI","Microsoft YaHei",sans-serif}
.screen .live{position:absolute;right:10px;top:10px;background:var(--pink);color:#fffaf2;font-size:12px;font-weight:700;border-radius:4px 7px 3px 6px;padding:1px 8px;transform:rotate(3deg)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative}
.chip{font-size:13.5px;font-weight:700;border-radius:var(--r4);padding:2px 10px;background:var(--blue-soft);border:1px dashed var(--blue-edge);color:var(--blue-ink)}
.chip.pink{background:var(--pink-soft);border-color:var(--pink-edge);color:var(--pink-ink)}.chip.amber{background:var(--amber-soft);border-color:var(--amber-edge);color:var(--amber-ink)}.chip.gray{background:var(--soft);border-color:var(--chip-edge);color:var(--muted)}
section{padding:26px 0}
section h2{font-size:28px;margin:0 0 6px;font-weight:700}
section p.sub{color:var(--muted);margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--noise),var(--card);border:2px solid var(--edge);border-radius:var(--r1);box-shadow:var(--shadow);padding:18px 20px}
.grid .card:nth-child(3n+2){border-radius:var(--r5);transform:rotate(.4deg)}.grid .card:nth-child(3n+1){transform:rotate(-.4deg)}
.card h3{margin:8px 0 4px;font-size:19px}.card p{margin:0;color:var(--muted);font-size:15px}
.ico{width:40px;height:40px;border-radius:var(--r4);display:grid;place-items:center;font-weight:700;font-size:19px;border:1.5px dashed currentColor;transform:rotate(-5deg)}
.ico.pink{background:var(--pink-soft);color:var(--pink-ink)}.ico.blue{background:var(--blue-soft);color:var(--blue-ink)}.ico.amber{background:var(--amber-soft);color:var(--amber-ink)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{background:var(--noise),var(--card);border:2px solid var(--edge);border-radius:var(--r1);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:10px}
.plan.pro{border-color:var(--pink);box-shadow:3px 6px 0 var(--pink-edge);transform:rotate(-.5deg)}.plan .badge{align-self:flex-start}
.plan h3{margin:0;font-size:22px}.plan .price{font-size:26px;font-weight:700;font-family:var(--hand)}.plan .price small{font-size:14px;color:var(--muted);font-weight:400;font-family:var(--font)}
.plan ul{margin:0;padding:0 0 0 18px;color:var(--ink);font-size:15px}.plan li{margin:3px 0}.plan li.no{color:var(--muted)}
.plan .foot{margin-top:auto}
.note{border-radius:var(--r5);padding:12px 16px;font-size:15px;background:var(--amber-soft);border:1px dashed var(--amber-edge);color:var(--amber-ink)}
.note.blue{background:var(--blue-soft);border-color:var(--blue-edge);color:var(--blue-ink)}.note.pink{background:var(--pink-soft);border-color:var(--pink-edge);color:var(--pink-ink)}.note.green{background:var(--green-soft);border-color:var(--green-edge);color:var(--green-ink)}
.pending{display:inline-block;font:13px/1.4 var(--hand);border:1px dashed currentColor;padding:0 6px;color:var(--amber-ink);transform:rotate(-3deg)}
table.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--noise),var(--card);border:2px solid var(--edge);border-radius:var(--r1);box-shadow:var(--shadow);overflow:hidden;font-size:15px}
table.compare th,table.compare td{padding:11px 14px;text-align:left;border-bottom:1px dashed var(--dash);vertical-align:top}
table.compare thead th{background:var(--soft);font-size:14px}
table.compare tr:last-child td{border-bottom:0}
.yes{color:var(--green-ink);font-weight:700}.no{color:var(--muted)}
.doc{background:var(--noise),var(--card);border:2px solid var(--edge);border-radius:var(--r1);box-shadow:var(--shadow);padding:26px 30px;margin:26px 0}
.doc h1{font-size:30px;margin:0 0 4px}.doc h2{font-size:21px;margin:26px 0 6px;padding-top:14px;border-top:1px dashed var(--dash)}.doc p,.doc li{color:var(--ink)}
.doc .meta{color:var(--muted);font-size:14px}
.auth{max-width:440px;margin:40px auto}
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.field span{font-size:14px;font-weight:700}
.field input{height:46px;border-radius:var(--r3);border:1.5px solid var(--field-edge);background:#fffef9;padding:0 14px;font:inherit;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(67,146,170,.2)}
.msg{min-height:22px;font-size:14.5px;color:var(--muted)}.msg.error{color:#b0442c}
.meter{height:12px;border:1.5px solid var(--field-edge);border-radius:7px 4px 8px 5px;background:#e4dfd2;overflow:hidden}.meter i{display:block;height:100%;background:var(--crayon) left center/400px 80px,var(--pink)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.switch-row{display:flex;align-items:flex-start;gap:12px;margin-top:12px;cursor:pointer}.switch-row b{display:block;font-size:15px}.switch-row small{display:block;color:var(--muted);font-size:13.5px;line-height:1.55}
input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:42px;height:24px;border:2px solid #b6a995;border-radius:13px 11px 12px 10px;background:#e4dfd2;cursor:pointer;margin:1px 0 0;transition:background .15s,border-color .15s}
input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border:1px solid #b6a995;border-radius:45% 53% 47% 51%;background:#fffdf6;transition:transform .15s}
input[type=checkbox]:checked{background:var(--green);border-color:var(--green-edge)}input[type=checkbox]:checked::after{transform:translateX(18px);border-color:var(--green-edge)}
input[type=checkbox]:disabled{opacity:.55;cursor:default}.switch-row:has(input:disabled){cursor:default}
.badge{font:13px/1.45 var(--hand);border:1px dashed currentColor;padding:0 7px;color:var(--pink-ink);display:inline-block;transform:rotate(-3deg)}
.badge.blue{color:var(--blue-ink)}.badge.gray{color:var(--muted)}
footer.bottom{margin-top:40px;padding:26px 0 40px;border-top:2px dashed var(--dash);color:var(--muted);font-size:14px}
footer.bottom .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer.bottom nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}footer.bottom a{color:var(--muted)}
footer.bottom select{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--field-edge);border-radius:var(--r3);padding:3px 6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.banner{background:var(--amber-soft);border-bottom:1px dashed var(--amber-edge);color:var(--amber-ink);font-size:14px;text-align:center;padding:7px 16px}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:36px}.hero h1{font-size:31px}.grid,.plans{grid-template-columns:1fr}.grid .card,.plan.pro{transform:none}.doc{padding:20px}nav.links a:not(.btn){display:none}.brand small{display:none}table.compare{font-size:13px;table-layout:fixed}table.compare th,table.compare td{padding:9px 7px;overflow-wrap:anywhere;hyphens:auto}}