.sort-app{background:#fff;padding:20px 22px 22px;--card:92px;font-size:13px}
.sort-title{font:700 17px/1.25 'Inter',sans-serif;letter-spacing:-.01em;color:#1a1815}
.sort-ins{margin:6px 0 14px;font-size:13px;color:#3a3530}
.sort-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sort-col{min-width:0;display:flex;flex-direction:column}
.sort-h{margin:0 0 8px;padding:2px 8px;text-align:center;color:#a08b6d;font-size:13px;font-weight:600}
.sort-zone{flex:1;align-content:start;display:grid;grid-template-columns:repeat(auto-fill,var(--card));justify-content:center;gap:8px;padding:10px;min-height:calc(var(--card) + 22px);border:1px dashed #e8ddd0;border-radius:8px;background:transparent}
.sort-card{position:relative;width:var(--card);height:var(--card);padding:4px;background:#fdfbf7;border:1px solid #e8ddd0;border-radius:8px;box-shadow:0 1px 2px rgba(60,40,20,.06);transition:border-color .3s,background-color .3s,box-shadow .25s}
.sort-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:7px}
.sort-gap{width:var(--card);height:var(--card)}
:root:not(.story-live) .sort-gap{display:none}
.sort-ok{position:absolute;inset:-1px;border:2px solid #16a34a;border-radius:8px;background:rgba(22,163,74,.08);pointer-events:none}
.sort-tick{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font:700 11px/20px 'Inter',sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff}
.sort-drag{position:relative;width:var(--card);height:var(--card)}
.sort-drag.is-held .sort-card{box-shadow:0 16px 26px -12px rgba(60,40,20,.45)}

.story-proof.notify{max-width:250px;margin-inline:auto}
.story-proof.notify .story-skeleton{border-radius:38px}

.worn{position:absolute;left:0;top:0;width:164px;height:208px;padding:22px 14px 14px;overflow:hidden;background:linear-gradient(180deg,#f3ede0,#ece4d2);box-shadow:0 12px 22px -12px rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,100% 84%,93% 87%,96% 91%,88% 93%,90% 97%,82% 100%,0 100%)}
.ex{display:flex;flex-direction:column;gap:5px;font:500 9.5px/1.2 Georgia,'Times New Roman',serif;color:#2b2825;white-space:nowrap}
.ex-h{font:700 10.5px/1.2 Georgia,serif;margin-bottom:3px;letter-spacing:.01em}
.ex-faded{opacity:.5;transform:rotate(-1deg)}
.hl{position:absolute;left:12px;top:57px;width:120px;height:11px;background:rgba(255,226,40,.55);transform:rotate(-2deg);border-radius:2px;mix-blend-mode:multiply}
.coffee{position:absolute;left:78px;top:98px;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle,transparent 0 55%,rgba(120,72,30,.28) 58%,rgba(120,72,30,.12) 63%,transparent 66%)}
.fold{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.09) 45%,rgba(255,255,255,.55) 55%,transparent)}
.pg{position:absolute;right:12px;bottom:9px;font:600 10px Georgia,serif;color:#4a4640}
.with-copy .worn{transform:rotate(-4deg)}
.with-copy .files{left:26px;top:62px}
.with-copy .which-one{left:44px;top:232px}
.files{position:absolute;left:0;top:18px;width:190px;height:180px}
.file{position:absolute;display:flex;align-items:center;gap:8px;width:182px;height:40px;padding:0 10px;background:#fff;border:1px solid #d9d4ca;border-radius:6px;box-shadow:0 8px 14px -10px rgba(0,0,0,.45);font:500 11px 'JetBrains Mono',monospace;color:#333;white-space:nowrap}
.file b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:28px;border-radius:3px;background:#d64a3b;color:#fff;font:700 7.5px 'Inter',sans-serif;flex:none}
.f4{left:14px;top:0;transform:rotate(4deg)}
.f3{left:2px;top:38px;transform:rotate(-3deg)}
.f2{left:18px;top:76px;transform:rotate(2deg)}
.f1{left:4px;top:114px;transform:rotate(-2deg)}
.which-one{position:absolute;left:40px;top:196px;font-size:25px;line-height:1;transform:rotate(-7deg);white-space:nowrap}
.which-one .scrawl{left:-4px;top:24px;width:150px;height:12px}
.nb{position:absolute;width:200px;height:150px;background:#fff repeating-linear-gradient(to bottom,transparent 0 17px,#cfe0f0 17px 18px);background-position:0 8px;border-left:2px solid #f2b8b8;box-shadow:0 10px 18px -12px rgba(0,0,0,.4)}
.nb3{left:26px;top:4px;transform:rotate(7deg)}
.nb2{left:14px;top:14px;transform:rotate(-4deg)}
.nb1{left:4px;top:28px;transform:rotate(2deg)}
.nb1 svg{position:absolute;left:12px;top:10px;width:176px;height:130px}
.nb1 svg .ink{fill:none;stroke:#2c3a55;stroke-width:1.5;stroke-linecap:round;opacity:.85}
.nb1 svg .tick{fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pen{position:absolute;left:20px;top:-24px;font-size:24px;line-height:1;color:var(--pen);transform:rotate(-4deg);white-space:nowrap}
.pen .scrawl{left:-4px;top:24px;width:170px;height:12px}

.sheet td.q svg{left:-9px;top:-6px;width:70px;height:28px}
.sheet .which{position:absolute;left:176px;bottom:-34px;font-size:22px;transform:rotate(-8deg)}
.m-total .ring svg{left:-9px;top:-3px;width:66px;height:32px}

.m-scan{left:10px;top:30px;width:200px;height:250px;--r:-5deg}
.m-remind{left:268px;top:24px;--r:5deg}
.m-text{left:238px;top:112px;width:226px;--r:-4deg}
.m-books{left:236px;top:222px;width:220px;height:190px;--r:4deg}
.m-sheet{left:6px;top:330px;--r:-3deg}
.m-total{left:262px;top:462px;width:190px;--r:-4deg}

@media (max-width:860px){
  .story-chapter{padding:20px 0}
  .note{font-size:15px;padding:8px 10px 10px;width:130px}
  .mono{font-size:10px}
  .sheet{width:196px;font-size:8.5px}
  .sheet .t{padding:4px 6px;font-size:8.5px}
  .sheet th,.sheet td{padding:3px 4px}

  .sort-app{padding:14px 14px 16px;--card:70px}
  .sort-cols{gap:8px}
  .sort-zone{padding:6px;gap:6px}
  .sort-card{padding:3px;border-radius:8px}
  .sort-card img{border-radius:5px}

  .nb{width:110px;height:78px;background-size:auto;background-image:repeating-linear-gradient(to bottom,transparent 0 11px,#cfe0f0 11px 12px)}
  .nb3{left:14px;top:2px}
  .nb2{left:8px;top:8px}
  .nb1{left:2px;top:14px}
  .nb1 svg{left:6px;top:5px;width:98px;height:70px}
  .pen{left:-150px;top:34px;font-size:18px}
  .pen .scrawl{top:18px;width:130px}
  .sheet td.q svg{left:-6px;top:-4px;width:50px;height:20px}
  .sheet .which{left:auto;right:-54px;bottom:auto;top:40px;font-size:16px}
  .m-total .ring svg{left:-6px;top:-2px;width:48px;height:24px}

  .m-scan{left:6px;top:4px;width:150px;height:90px}
  .files{top:0;width:150px;height:84px}
  .file{width:128px;height:24px;gap:5px;padding:0 6px;font-size:8px;border-radius:4px}
  .file b{width:14px;height:17px;font-size:5px;border-radius:2px}
  .f4{left:8px;top:0}
  .f3{left:0;top:21px}
  .f2{left:10px;top:42px}
  .f1{left:2px;top:63px}
  .which-one{left:112px;top:88px;font-size:16px}
  .which-one .scrawl{top:15px;width:90px}
  .with-copy .worn{display:none}
  .with-copy .files{left:0;top:0}
  .with-copy .which-one{left:112px;top:88px}
  .m-remind{left:198px;top:8px;width:140px}
  .m-text{left:190px;top:44px;width:150px}
  .m-books{left:216px;top:92px;width:130px;height:96px}
  .m-sheet{left:4px;top:150px}
  .m-total{left:232px;top:176px;width:120px}
}