:root {
  --ink: #1d1a24;
  --paper: #fffdf6;
  --line: rgba(80, 130, 220, .16);
  --margin: rgba(224, 48, 107, .32);
  --pink: #ff5d8f;
  --pink-ink: #e0306b;
  --yellow: #ffd23f;
  --blue: #7cc6fe;
  --pen: #2442c9;
  --mint: #8ce0b5;
  --lilac: #c3a6ff;
  --wob: 14px 5px 12px 6px / 6px 12px 5px 14px;
  --wob2: 5px 14px 6px 12px / 12px 6px 14px 5px;
  --hand: 'Gloria Hallelujah', 'Comic Sans MS', cursive;
  --ui: 'Shantell Sans', 'Comic Sans MS', system-ui, sans-serif;
  --note: 'Caveat', cursive;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.5;
  background: var(--paper); overflow-x: hidden; position: relative;
}
.paper-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 calc(min(6vw, 70px) - 1px), var(--margin) calc(min(6vw, 70px) - 1px) min(6vw, 70px), transparent min(6vw, 70px)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--line) 31px 32px),
    var(--paper);
}
.scatter { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.scatter .sc { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); opacity: .9; }
@media (max-width: 760px) { .scatter .sc { opacity: .35; transform: translate(-50%, -50%) rotate(var(--r)) scale(.7); } }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top { padding: 18px 20px 0; max-width: 1100px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-globe svg { display: block; transition: transform .3s; }
.brand:hover .brand-globe svg { transform: rotate(-14deg); }
.brand-text b { font-family: var(--hand); font-size: 26px; line-height: 1; display: block; }
.brand-text small { font-family: var(--note); font-size: 18px; color: #5a5566; }

/* ---------- hero ---------- */
.view { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; padding: 26px 8px 10px; }
.hero h1 { font-family: var(--hand); font-weight: 400; font-size: clamp(32px, 5.6vw, 58px); line-height: 1.12; margin: 0 0 12px; }
.h-line { display: block; }
.h-line.small { font-family: var(--note); font-size: .5em; color: #5a5566; margin-top: 6px; }
.scribble-under { position: relative; white-space: nowrap; }
.scribble-under::after {
  content: ''; position: absolute; left: -4px; right: -6px; bottom: -2px; height: 14px; z-index: -1;
  background: var(--yellow); border-radius: 40% 60% 50% 45% / 60% 40% 60% 40%; transform: rotate(-1.5deg);
}
.lede { font-size: 18px; max-width: 34em; margin: 0; }
.lede em { font-family: var(--marker); font-style: normal; color: var(--pink-ink); }
.hero-doodle { position: relative; justify-self: center; width: min(340px, 90%); transform: rotate(2deg); }
.hero-doodle svg { width: 100%; height: auto; display: block; border: 3px solid var(--ink); border-radius: var(--wob); background: #fff; box-shadow: 7px 7px 0 var(--ink); }
.hd-cap { position: absolute; bottom: -34px; right: 6px; font-family: var(--note); font-size: 22px; color: var(--pen); transform: rotate(-4deg); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 14px; }
  .hero-doodle { width: 220px; margin: 4px auto 30px; }
  .lede { font-size: 16.5px; }
}

/* ---------- the form sheet ---------- */
.sheet {
  position: relative; background: #fff; border: 3px solid var(--ink); border-radius: var(--wob);
  box-shadow: 8px 8px 0 var(--ink); padding: 26px clamp(16px, 4vw, 40px) 22px; margin: 34px auto 0; max-width: 820px;
}
.tape { position: absolute; width: 110px; height: 30px; background: rgba(255, 226, 61, .7); top: -16px; border-left: 2px dashed rgba(0,0,0,.08); border-right: 2px dashed rgba(0,0,0,.08); }
.tape.t1 { left: 24px; transform: rotate(-6deg); }
.tape.t2 { right: 30px; transform: rotate(5deg); background: rgba(255, 143, 177, .6); }
.step { padding: 6px 0 16px; border-bottom: 2px dashed rgba(29,26,36,.18); margin-bottom: 14px; }
.step:last-of-type { border-bottom: 0; }
.step h2 { font-family: var(--hand); font-weight: 400; font-size: 24px; margin: 6px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step h2 small { font-family: var(--note); font-size: 19px; color: #6b6577; }
.num { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 2.5px solid var(--ink); border-radius: 50% 45% 55% 48%; background: var(--yellow); font-family: var(--marker); font-size: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-family: var(--note); font-size: 21px; line-height: 1.1; margin-bottom: 4px; }
.field > span i { font-size: 17px; color: #7a7486; }
input, textarea {
  width: 100%; border: 2.5px solid var(--ink); border-radius: var(--wob2); background: #fff; padding: 10px 12px;
  font-size: 16px; outline: none; transition: box-shadow .15s, transform .15s;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: #a8a2b3; }
input:focus, textarea:focus { box-shadow: 4px 4px 0 var(--pink); transform: translate(-1px, -1px); }
input[type=month] { min-height: 46px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .kind {
  border: 2.5px solid var(--ink); background: #fff; border-radius: 999px 900px 999px 950px; padding: 6px 13px; font-size: 14.5px;
  transition: transform .12s, background .12s;
}
.chip:hover, .kind:hover { transform: rotate(-2deg) scale(1.03); }
.chip.on { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }

/* lore items */
.lore-item {
  border: 2.5px solid var(--ink); border-radius: var(--wob); padding: 12px; margin-bottom: 14px; position: relative;
  background: #fff;
}
.lore-item:nth-child(3n+1) { background: #fff6fa; }
.lore-item:nth-child(3n+2) { background: #f4faff; }
.lore-item:nth-child(3n) { background: #fffbea; }
.lore-item:nth-child(odd) { transform: rotate(-.35deg); }
.lore-item:nth-child(even) { transform: rotate(.35deg); }
.li-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.li-num { font-family: var(--marker); font-size: 20px; color: var(--pink-ink); }
.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.kind { font-size: 13.5px; padding: 4px 10px; }
.kind.on { background: var(--ink); color: #fff; }
.lore-item[data-k=incident] .kind.on { background: var(--pink-ink); border-color: var(--ink); }
.lore-item[data-k=joke] .kind.on { background: var(--pen); }
.lore-item[data-k=code] .kind.on { background: #6b3fd6; }
.li-x { border: 0; background: none; font-size: 18px; padding: 4px 8px; color: #8a8495; }
.li-x:hover { color: var(--pink-ink); }
.li-t { font-weight: 700; margin-bottom: 8px; }

/* style cards */
.style-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .style-pick { grid-template-columns: 1fr; } }
.style-card { position: relative; display: grid; gap: 2px; border: 2.5px solid var(--ink); border-radius: var(--wob); padding: 12px; cursor: pointer; background: #fff; transition: transform .15s; }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card:hover { transform: rotate(-1deg); }
.style-card:has(input:checked) { background: #fff7c7; box-shadow: 5px 5px 0 var(--ink); }
.style-card:has(input:focus-visible) { outline: 3px solid var(--pen); outline-offset: 3px; }
.sc-name { font-family: var(--hand); font-size: 19px; }
.sc-sub { font-family: var(--note); font-size: 18px; color: #6b6577; line-height: 1.1; }
.sc-art { display: block; height: 62px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; position: relative; overflow: hidden; margin-bottom: 6px; }
.sc-wiki i { position: absolute; left: 8px; height: 5px; background: #c8ccd1; border-radius: 3px; }
.sc-wiki i:nth-child(1) { top: 10px; width: 46%; height: 8px; background: var(--ink); }
.sc-wiki i:nth-child(2) { top: 26px; width: 56%; }
.sc-wiki i:nth-child(3) { top: 38px; width: 50%; }
.sc-wiki b { position: absolute; right: 8px; top: 8px; width: 28%; bottom: 8px; border: 1.5px solid #a2a9b1; background: #f8f9fa; }
.sc-urban { background: #1b2240; }
.sc-urban i { position: absolute; left: 8px; right: 8px; height: 20px; background: #fff; border-radius: 3px; }
.sc-urban i:nth-child(1) { top: 8px; }
.sc-urban i:nth-child(2) { top: 34px; }
.sc-urban b { position: absolute; left: 14px; top: 13px; width: 40%; height: 8px; background: #2a5ff0; border-radius: 2px; }

.form-err { background: #ffe3ec; border: 2.5px solid var(--pink-ink); border-radius: var(--wob2); padding: 10px 14px; font-weight: 700; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn-big {
  font-family: var(--marker); font-size: 22px; letter-spacing: .5px; background: var(--pink); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--wob); padding: 12px 26px; box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn-big.small { font-size: 18px; padding: 9px 18px; }
.btn-big:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 7px 7px 0 var(--ink); }
.btn-big:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ghost {
  background: none; border: 2.5px dashed var(--ink); border-radius: var(--wob2); padding: 9px 16px; font-size: 15px;
  text-decoration: none; color: var(--ink); display: inline-block; transition: background .12s;
}
.btn-ghost:hover { background: #fff7c7; }
#addItem { width: 100%; }
.privacy { font-family: var(--note); font-size: 18px; color: #6b6577; text-align: center; margin: 16px 0 0; }
@media (max-width: 520px) { .form-actions { flex-direction: column-reverse; align-items: stretch; } .btn-big { width: 100%; } }

/* ---------- result ---------- */
.toolbar {
  position: sticky; top: 8px; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob); box-shadow: 5px 5px 0 var(--ink);
  padding: 8px; margin: 20px auto 18px; max-width: 900px;
}
.tb { border: 2px solid var(--ink); background: #fff; border-radius: var(--wob2); padding: 6px 11px; font-size: 14px; white-space: nowrap; transition: transform .12s, background .12s; }
.tb:hover { transform: rotate(-2deg); background: #fff7c7; }
.tb.toggle.on { background: var(--blue); }
.tb.hot { background: var(--yellow); font-weight: 700; }
.tb-sep { flex: 1; }
@media (max-width: 640px) {
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 0; border-radius: 0 0 12px 12px; margin: 10px -16px 14px; border-left: 0; border-right: 0; box-shadow: 0 4px 0 var(--ink); }
  .toolbar::-webkit-scrollbar { display: none; }
  .tb-sep { display: none; }
}
.wiggle { animation: wig .5s; }
@keyframes wig { 20% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }
.viewer-note { max-width: 900px; margin: 0 auto 14px; background: #e9f6ff; border: 2.5px dashed var(--pen); border-radius: var(--wob2); padding: 10px 14px; font-size: 15px; }
.linkish { border: 0; background: none; color: var(--pen); font-weight: 700; text-decoration: underline wavy; padding: 0; }
.stage { max-width: 900px; margin: 0 auto; position: relative; }
.stage::before { content: ''; position: absolute; inset: 10px -10px -10px 10px; background: var(--ink); border-radius: 6px; transform: rotate(.6deg); z-index: -1; }
.stage-hint { text-align: center; font-family: var(--note); font-size: 20px; color: #6b6577; margin-top: 22px; }

/* ================= CARD BASE ================= */
.card { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.anno-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.anno-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.no-doodles .anno-layer { display: none; }
.note { position: absolute; white-space: nowrap; font-family: var(--note); font-weight: 700; font-size: 25px; line-height: 1; color: var(--pen); transform-origin: left center; }
.note.pink { color: var(--pink-ink); }
.note.big { font-size: 30px; }
.note.marker { font-family: var(--marker); font-weight: 400; font-size: 18px; color: var(--pink-ink); }
.note.fix { font-size: 24px; }
.stk { position: absolute; line-height: 0; }
.sticky {
  position: absolute; background: #fff27a; padding: 12px 14px 10px; font-family: var(--note); font-weight: 700; font-size: 21px; line-height: 1.05;
  max-width: 170px; color: var(--ink); box-shadow: 3px 4px 0 rgba(0,0,0,.18); display: flex; gap: 6px; align-items: center;
}
.sticky svg { flex: none; }

/* ================= ENCYCLOPEDIA ================= */
.card.wiki { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #202122; font-size: 14.5px; line-height: 1.6; }
.w-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #c8ccd1; background: #fff; }
.w-logo { display: flex; align-items: center; gap: 8px; }
.w-logo svg { display: block; }
.w-logo b { display: block; font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: .02em; line-height: 1.05; }
.w-logo small { display: block; font-family: 'Crimson Pro', Georgia, serif; font-size: 12.5px; color: #54595d; line-height: 1.2; }
.w-search { border: 1px solid #a2a9b1; border-radius: 2px; padding: 6px 10px; color: #72777d; font-size: 13.5px; width: 230px; }
.w-tabs { display: flex; gap: 16px; padding: 0 18px; font-size: 13.5px; border-bottom: 1px solid #a2a9b1; overflow: hidden; white-space: nowrap; }
.w-tabs span { padding: 7px 0 6px; color: #36c; }
.w-tabs span.on { color: #202122; border-bottom: 2px solid #202122; }
.w-tabs .sp { flex: 1; }
.w-body { padding: 14px 26px 22px; }
.w-title { font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.25; margin: 6px 0 2px; padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; }
.w-title span { display: inline-block; }
.w-from { font-size: 12.5px; color: #54595d; margin-bottom: 8px; }
.hatnote { font-style: italic; padding-left: 1.6em; margin-bottom: 10px; font-size: 13.5px; }
.ambox { display: flex; gap: 10px; align-items: center; border: 1px solid #a2a9b1; border-left: 10px solid #f28500; background: #fbfbfb; padding: 7px 10px; font-size: 13.5px; margin: 0 0 14px; }
.ambox small { color: #54595d; }
.ambox-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f28500; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.wl { color: #36c; }
.wl.red { color: #d73333; }
sup { line-height: 0; font-size: 11px; }
sup.ref, sup.cn { color: #36c; white-space: nowrap; }
.card.wiki p { margin: 8px 0 10px; }
.card.wiki h2 { font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.3; margin: 22px 0 8px; padding-bottom: 2px; border-bottom: 1px solid #a2a9b1; }
.card.wiki h3 { font-size: 15.5px; font-weight: 700; margin: 16px 0 4px; display: table; }
.q { font-style: italic; }
.card.wiki:not(.no-doodles) .lead { line-height: 2.05; }
.infobox { float: right; clear: right; width: 272px; margin: 0 0 14px 18px; border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 12.8px; line-height: 1.45; border-collapse: collapse; }
.infobox caption { font-weight: 700; font-size: 15.5px; padding: 6px 4px 4px; background: #f8f9fa; border: 1px solid #a2a9b1; border-bottom: 0; }
.ib-title { caption-side: top; }
.infobox th, .infobox td { padding: 3px 7px; vertical-align: top; text-align: left; }
.infobox th { width: 42%; font-weight: 700; }
.infobox small { font-size: 11.5px; color: #54595d; }
.ib-img { text-align: center; padding: 6px !important; }
.ib-img svg { width: 100%; height: auto; display: block; border: 1px solid #c8ccd1; }
.ib-cap { font-size: 11.5px; color: #54595d; padding-top: 4px; text-align: center; }
.toc { display: inline-block; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 7px 18px 7px 10px; margin: 6px 0 4px; font-size: 13.5px; }
.toc-t { font-weight: 700; text-align: center; margin-bottom: 2px; }
.toc ol { margin: 0; padding-left: 22px; color: #36c; }
.wikitable { border-collapse: collapse; border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 13.5px; margin: 8px 0 12px; }
.wikitable th, .wikitable td { border: 1px solid #a2a9b1; padding: 5px 9px; vertical-align: top; text-align: left; }
.wikitable th { background: #eaecf0; }
.quotes { margin: 8px 0 10px 4px; padding-left: 14px; border-left: 3px solid #eaecf0; font-family: 'Crimson Pro', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.45; }
.see { margin: 6px 0; padding-left: 22px; columns: 2; }
.refs { font-size: 12.8px; padding-left: 26px; margin: 6px 0 12px; }
.refs li { margin-bottom: 2px; }
.caret { color: #36c; font-weight: 700; }
.catlinks { clear: both; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 6px 10px; font-size: 12.8px; margin-top: 18px; }
.w-foot { font-size: 11.8px; color: #54595d; margin-top: 12px; padding-top: 8px; padding-right: 200px; min-height: 96px; border-top: 1px solid #eaecf0; }
@media (max-width: 620px) {
  .w-search { display: none; }
  .w-body { padding: 10px 14px 18px; }
  .w-title { font-size: 29px; }
  .infobox { float: none; width: 100%; margin: 10px 0 14px; }
  .see { columns: 1; }
  .w-foot { padding-right: 0; padding-bottom: 96px; }
}
/* story clone: phone layout regardless of real viewport */
#offscreen { position: fixed; left: -10000px; top: 0; width: 470px; pointer-events: none; }
#offscreen .w-search { display: none; }
#offscreen .w-body { padding: 10px 14px 18px; }
#offscreen .w-title { font-size: 29px; }
#offscreen .infobox { float: none; width: 100%; margin: 10px 0 14px; }
#offscreen .see { columns: 1; }
#offscreen .w-body { display: flex; flex-direction: column; }
#offscreen .w-body > * { order: 3; }
#offscreen .w-body > .w-title, #offscreen .w-body > .w-from, #offscreen .w-body > .hatnote, #offscreen .w-body > .ambox { order: 0; }
#offscreen .w-body > .lead { order: 1; line-height: 1.85; }
#offscreen .w-tabs { display: none; }
#offscreen .w-body > .infobox { order: 2; }
#offscreen .w-body > .toc { align-self: flex-start; }
#offscreen .ib-img { padding: 6px 110px !important; }
#offscreen .w-foot { padding-right: 0; padding-bottom: 96px; }

/* ================= SLANG DICTIONARY ================= */
.card.urban { background: #eef0f5; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #1b1b1b; }
.u-head { background: #1b2240; display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.u-logo { display: flex; flex-direction: column; line-height: .95; font-family: Arial Black, Arial, sans-serif; font-weight: 900; letter-spacing: .01em; }
.u-l1 { color: #effe2a; font-size: 22px; }
.u-l2 { color: #fff; font-size: 13px; letter-spacing: .18em; }
.u-search { flex: 1; background: #fff; border-radius: 999px; padding: 8px 14px; color: #8a8fa3; font-size: 14px; max-width: 420px; }
.u-nav { display: flex; justify-content: space-between; background: #1b2240; border-top: 1px solid #2c3561; padding: 4px 14px 6px; color: #b9c0e0; font-size: 12px; font-weight: 700; overflow: hidden; }
.u-nav span.on { color: #effe2a; }
.u-body { padding: 18px; display: grid; gap: 16px; }
.u-card { background: #fff; border-radius: 10px; padding: 18px 22px 16px; box-shadow: 0 1px 0 #d6d9e4; border: 1px solid #dde0ea; position: relative; }
.u-badge { display: inline-block; background: #effe2a; color: #1b1b1b; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; border: 1.5px solid #1b1b1b; }
.u-kind { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #6b7086; font-weight: 700; }
.u-word { font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; color: #134fe6; font-size: 36px; line-height: 1.1; margin: 8px 0 10px; display: table; word-break: break-word; }
.u-def { font-size: 16.5px; line-height: 1.55; margin-bottom: 12px; }
.u-def u { text-decoration-color: #134fe6; color: #134fe6; text-decoration: none; }
.u-ex { font-style: italic; font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; color: #2a2a2a; }
.u-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.u-tags span { background: #eef0f5; border-radius: 999px; padding: 3px 10px; font-size: 13px; color: #134fe6; }
.u-by { font-size: 14px; color: #555; margin-bottom: 12px; }
.u-by b { color: #134fe6; }
.u-votes { display: flex; align-items: center; gap: 10px; }
.u-vote { border: 1.5px solid #c9cdda; border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 700; }
.u-flag { margin-left: auto; color: #9aa0b5; font-size: 16px; }
.u-foot { text-align: center; font-size: 12.5px; color: #6b7086; padding: 2px 0 0; min-height: 0; }
.u-body { padding-bottom: 104px !important; }
@media (max-width: 620px) {
  .u-search { display: none; }
  .u-body { padding: 12px; }
  .u-card { padding: 14px 15px; }
  .u-word { font-size: 31px; }
}
#offscreen .u-search { display: none; }
#offscreen .u-body { padding: 12px; }
#offscreen .u-card { padding: 14px 15px; }
#offscreen .u-word { font-size: 31px; }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: var(--wob2); font-size: 15px; z-index: 60; transition: transform .25s, opacity .25s; opacity: 0; visibility: hidden; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.busy { position: fixed; inset: 0; background: rgba(255, 253, 246, .82); z-index: 70; display: grid; place-items: center; }
.busy-in { font-family: var(--hand); font-size: 22px; display: flex; gap: 10px; align-items: center; background: #fff; border: 3px solid var(--ink); border-radius: var(--wob); padding: 14px 22px; box-shadow: 6px 6px 0 var(--ink); }
.pencil { display: inline-block; animation: scribble .5s infinite alternate; }
@keyframes scribble { from { transform: translate(-4px, 2px) rotate(-10deg); } to { transform: translate(6px, -2px) rotate(8deg); } }
.modal { position: fixed; inset: 0; background: rgba(29, 26, 36, .55); z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal-in { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: var(--wob); box-shadow: 8px 8px 0 var(--ink); padding: 18px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; }
.modal-in h3 { margin: 0; font-family: var(--hand); font-weight: 400; font-size: 24px; }
.modal-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 22px; }
.shot-wrap { overflow: auto; border: 2px solid var(--ink); border-radius: 4px; background: #f3f1ea; min-height: 0; flex: 1; }
.shot-wrap img { width: 100%; display: block; }
.shot-tip { margin: 0; font-family: var(--note); font-size: 19px; color: #6b6577; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.foot { text-align: center; font-family: var(--note); font-size: 19px; color: #6b6577; padding: 10px 16px 30px; }
.foot a { color: var(--pen); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }