/* ===== paper-notebook · 方格笔记本 ===== */
:root{
  --paper:#fbfaf3; --ruled:rgba(120,160,210,.4); --ink:#2f3a4a; --sub:#5f6b7c; --dim:#9aa4b2;
  --red:#e8746a; --blue:#4f7fc4; --hl:#fff2a8; --sticky:#fff6c8;
  --hand:"Bradley Hand","Segoe Print","Comic Sans MS","Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  --sans:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --maxw:860px; --line:32px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#222630; --ruled:rgba(120,160,210,.18); --ink:#e6ebf2; --sub:#a7b1c0; --dim:#6c7686;
    --red:#f0897f; --blue:#8fb4e8; --hl:rgba(255,230,120,.22); --sticky:#3a3a2a;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:var(--line);min-height:100vh;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--hl);color:var(--ink);}
kbd{font-family:var(--mono);font-size:11.5px;border:1px solid var(--dim);border-radius:4px;padding:1px 6px;color:var(--ink);background:var(--paper);}

/* notebook page with ruled lines + margin */
.page{position:relative;max-width:var(--maxw);margin:0 auto;min-height:100vh;background:var(--paper);
  background-image:repeating-linear-gradient(transparent,transparent calc(var(--line) - 1px),var(--ruled) calc(var(--line) - 1px),var(--ruled) var(--line));
  background-position:0 calc(16px + env(safe-area-inset-top));
  padding:calc(20px + env(safe-area-inset-top)) clamp(20px,5vw,40px) calc(40px + env(safe-area-inset-bottom)) clamp(48px,9vw,72px);
  box-shadow:0 0 60px -30px rgba(0,0,0,.4);}
.margin{position:absolute;left:clamp(34px,7vw,54px);top:0;bottom:0;width:2px;background:var(--red);opacity:.6;}
.binding{position:absolute;left:clamp(10px,2.5vw,18px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:30px 0;}
.binding span{width:14px;height:14px;border-radius:50%;border:2px solid var(--dim);background:transparent;}

/* memo strip / announcement */
.memo-strip{position:relative;display:flex;align-items:center;gap:12px;background:var(--sticky);border:1px solid rgba(0,0,0,.08);padding:11px 18px;transform:rotate(-.6deg);box-shadow:2px 4px 10px rgba(0,0,0,.12);}
.tape{position:absolute;left:50%;top:-9px;transform:translateX(-50%) rotate(3deg);width:64px;height:18px;background:rgba(120,160,210,.4);}
.memo-strip p{flex:1;font-family:var(--hand);font-size:13.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.memo-clk{font-family:var(--mono);font-size:12.5px;color:var(--blue);flex:none;}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 0 8px;}
.title-scribble{display:flex;align-items:center;gap:10px;font-family:var(--hand);font-size:clamp(22px,5vw,30px);font-weight:700;}
.doodle{color:var(--red);}
.lamp{font-family:var(--hand);font-size:14px;background:transparent;border:2px dashed var(--blue);color:var(--blue);padding:6px 14px;border-radius:14px;cursor:pointer;transition:.18s;}
.lamp:hover{background:var(--blue);color:var(--paper);border-style:solid;}

/* main */
section{margin-top:clamp(26px,5vw,42px);}

.intro{}
.kicker{font-family:var(--hand);font-size:14px;color:var(--red);margin-bottom:6px;}
.intro h1{font-family:var(--hand);font-weight:700;font-size:clamp(36px,10vw,72px);line-height:1.05;color:var(--ink);word-break:break-word;}
.intro h1::after{content:"";display:block;width:60%;max-width:280px;height:4px;margin-top:6px;background:var(--hl);border-radius:3px;}
.intro-p{margin-top:14px;color:var(--sub);font-size:clamp(15px,2.6vw,17px);line-height:1.8;max-width:62ch;}

/* sticky note / main domain */
.sticky{position:relative;background:var(--sticky);border:1px solid rgba(0,0,0,.08);padding:clamp(24px,5vw,38px);margin-top:36px;transform:rotate(.5deg);box-shadow:3px 6px 18px rgba(0,0,0,.14);}
.pin{position:absolute;left:50%;top:-12px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 3px 6px rgba(0,0,0,.3),inset 0 -2px 3px rgba(0,0,0,.25);}
.st-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.st-key{font-family:var(--hand);font-size:14px;color:var(--sub);}
.st-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--red);font-family:var(--hand);}
.st-live i{width:8px;height:8px;border-radius:999px;background:var(--red);}
.st-domain{font-family:var(--hand);font-weight:700;font-size:clamp(24px,7vw,50px);margin:12px 0 22px;word-break:break-all;color:var(--ink);line-height:1.1;}
.st-act{display:flex;flex-wrap:wrap;gap:14px;}
.stamp{font-family:var(--hand);font-size:16px;font-weight:700;padding:11px 24px;cursor:pointer;border:2px solid var(--ink);border-radius:14px;transition:.16s;}
.stamp-go{background:var(--blue);color:var(--paper);border-color:var(--blue);}
.stamp-go:hover{transform:rotate(-1.5deg) translateY(-2px);}
.stamp-cp{background:transparent;color:var(--ink);}
.stamp-cp:hover{background:var(--ink);color:var(--paper);}
.st-save{font-family:var(--hand);margin-top:20px;font-size:14px;color:var(--sub);cursor:pointer;}
.st-save:hover{color:var(--red);}

/* note sections */
.note-h{font-family:var(--hand);font-weight:700;font-size:clamp(22px,5vw,32px);margin-bottom:16px;}
.hl{background:linear-gradient(transparent 55%,var(--hl) 55%);padding:0 6px;}

/* checklist / backups */
.checklist{list-style:none;}
.check{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--ruled);}
.ck-box{width:22px;height:22px;border:2px solid var(--blue);border-radius:5px;display:grid;place-items:center;color:var(--blue);font-size:13px;flex:none;}
.ck-n{font-family:var(--hand);color:var(--red);font-size:16px;}
.ck-h{flex:1;font-size:clamp(14px,3.4vw,17px);word-break:break-all;}
.ck-ok{font-family:var(--hand);font-size:13px;color:var(--blue);}
.ck-cp{font-family:var(--hand);font-size:13px;background:transparent;border:2px dashed var(--dim);color:var(--ink);padding:5px 13px;border-radius:12px;cursor:pointer;transition:.16s;}
.ck-cp:hover{border-color:var(--red);color:var(--red);border-style:solid;}

/* todo / notice */
.todo{list-style:none;display:grid;gap:10px;}
.todo li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.7;}
.todo .box{width:22px;height:22px;border:2px solid var(--red);border-radius:5px;display:grid;place-items:center;color:var(--red);font-size:13px;flex:none;margin-top:4px;}
.todo b{color:var(--ink);}
.scrawl{font-family:var(--hand);margin-top:16px;font-size:15px;color:var(--sub);border:2px dashed var(--red);border-radius:12px;padding:12px 18px;}
.scrawl strong{color:var(--red);}

/* cards / contact */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{background:var(--sticky);border:1px solid rgba(0,0,0,.08);padding:20px;cursor:pointer;transition:.18s;box-shadow:2px 4px 10px rgba(0,0,0,.1);}
.card:nth-child(2){transform:rotate(-1deg);}
.card:nth-child(3){transform:rotate(1deg);}
.card:hover{transform:translateY(-3px) rotate(0);}
.card-k{font-family:var(--hand);font-size:13px;color:var(--sub);display:block;margin-bottom:5px;}
.card-v{font-family:var(--hand);font-size:clamp(16px,3.6vw,20px);word-break:break-all;display:block;}
.card-cp{font-family:var(--hand);font-size:13px;color:var(--red);}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(34px,6vw,52px);padding-top:18px;border-top:2px solid var(--ruled);}
.foot-id{font-family:var(--hand);display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;}
.foot nav a{font-family:var(--hand);color:var(--sub);font-size:14px;transition:.16s;}
.foot nav a:hover{color:var(--red);}
.foot small{font-family:var(--mono);color:var(--dim);font-size:12px;width:100%;}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px) rotate(-1deg);z-index:60;opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--hand);font-size:15px;background:var(--sticky);border:2px solid var(--ink);padding:11px 22px;color:var(--ink);box-shadow:3px 5px 14px rgba(0,0,0,.2);transition:.26s cubic-bezier(.2,.8,.2,1);}
.toast span[aria-hidden]{color:var(--red);}
.toast.on{opacity:1;transform:translate(-50%,0) rotate(-1deg);pointer-events:auto;}

/* reveal */
.show{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);}
.show.seen{opacity:1;transform:none;}

@media (max-width:760px){.cards{grid-template-columns:1fr;}.binding{display:none;}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .show{opacity:1;transform:none;}
}