/* Sketchbook: brains.biz drawn by hand, in code.
   Everything here is scoped to html[data-ui=sketch]. Classic (data-ui=classic, or no script) is the
   original paper-and-ink design in base.html, untouched.

   The look: a sketchbook on a desk. Cream paper with grain, graphite ink, colored-pencil fills,
   a yellow highlighter for the main action, a violet pencil for the brand, handwritten type.
   Lines are drawn by code (ink.js, machine.js) and "boil" a few times a second while touched. */

/* ---------- the switch ---------- */
html:not([data-ui=sketch]) .sketch-only{display:none !important}
html[data-ui=sketch] .classic-only{display:none !important}

/* ---------- tokens: the shared names, redrawn ---------- */
html[data-ui=sketch]{
  --paper:#F6EEDC; --paper-2:#EFE4CA; --paper-3:#E5D6B4; --card:#FCF7EB;
  --ink:#2F2822; --ink-2:#463C32; --ink-dim:#64584A; --ink-faint:#6E6151;
  --line:#DCCCAB; --line-2:#C8B48E;
  --brand:#5A43C8; --brand-ink:#43309F; --brand-soft:#E9E2F6; --brand-2:#2E8C86;
  --amber:#F1BA3B; --amber-soft:#FCEFC9;
  --ok:#3D7027; --ok-soft:#E5EFD2; --warn:#87500F; --warn-soft:#FAEBC9; --bad:#C2452F; --bad-soft:#F8DED2;
  --night:#1E2340; --night-2:#272E52; --night-line:#3B4372; --night-ink:#F3EADA; --night-dim:#BDB4A3;
  --serif:"Caveat", "Kalam", "Segoe Print", cursive;
  --sans:"Patrick Hand", "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  --label:"Kalam", "Patrick Hand", cursive;
  --hand:"Caveat", "Kalam", cursive;
  --print:"Literata", Georgia, serif;
  --r:6px; --r-sm:5px;
  --shadow-sm:0 1px 0 rgba(90,63,31,.08), 0 6px 14px -8px rgba(90,63,31,.28);
  --shadow:0 2px 0 rgba(90,63,31,.06), 0 18px 34px -18px rgba(90,63,31,.42);
  --shadow-lg:0 34px 60px -30px rgba(90,63,31,.55);
  --marker:rgba(255,213,79,.85); --marker-soft:rgba(255,213,79,.42);
  --pencil-red:#D65A3E; --pencil-blue:#4581C4; --pencil-green:#5E9440;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rule-lines:repeating-linear-gradient(transparent 0 31px, rgba(69,129,196,.17) 31px 32px);
  background:var(--paper);
}
html[data-ui=sketch] body{background:var(--paper) var(--grain);font-size:18px;line-height:1.5;color:var(--ink)}
html[data-ui=sketch] :is(b,strong){font-family:var(--label);font-weight:700}
html[data-ui=sketch] ::selection{background:var(--marker-soft);color:var(--ink)}

/* ---------- type ---------- */
html[data-ui=sketch] h1,html[data-ui=sketch] h2,html[data-ui=sketch] .display{font-family:var(--hand);font-weight:700;letter-spacing:0;line-height:.95}
html[data-ui=sketch] h1{font-size:clamp(3.1rem,7vw,5.8rem)}
html[data-ui=sketch] h2{font-size:clamp(2.6rem,5vw,4rem);line-height:1}
html[data-ui=sketch] h3{font-family:var(--label);font-weight:700;font-size:1.15rem;letter-spacing:0}
html[data-ui=sketch] h1 em,html[data-ui=sketch] h2 em{font-style:normal;color:var(--brand);position:relative;display:inline-block;white-space:nowrap}
html[data-ui=sketch] .lede{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--ink-dim)}
html[data-ui=sketch] .eyebrow{font-family:var(--hand);font-size:1.45rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--pencil-red);transform:rotate(-2deg);transform-origin:left}
html[data-ui=sketch] .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-8deg)}
html[data-ui=sketch] .night .eyebrow{color:#F59A7E}
html[data-ui=sketch] code{font-family:"Kalam",monospace;color:var(--brand-ink);background:var(--marker-soft);padding:0 4px;border-radius:3px}
html[data-ui=sketch] .stat,html[data-ui=sketch] .fact .k{font-family:var(--hand);font-weight:700}
html[data-ui=sketch] .section-title{font:700 2.05rem/1.05 var(--hand);letter-spacing:0}
html[data-ui=sketch] .checks h2{font-size:2.05rem}
html[data-ui=sketch] .app-head h1,html[data-ui=sketch] .s-head h1{font-size:clamp(3rem,6vw,4.4rem)}
html[data-ui=sketch] a{text-decoration-color:var(--line-2)}

/* hand underline under emphasised words (ink.js adds the svg) */
.sk-under{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.sk-under path{fill:none;stroke:var(--pencil-red);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
html:not([data-ui=sketch]) :is(.ink,.sk-under,.sk-circle){display:none}

/* ---------- ink: drawn on, boiling while touched ---------- */
html[data-ui=sketch] :is(.btn,.card,.plan,.link,.type,.pair,.browser,.stops,.final,.table-wrap,.alert,.sk-box,.menu-panel,.sheet-menu,.fact-card,.newbook){position:relative}
.ink,.sk-circle{position:absolute;pointer-events:none;overflow:visible}
.ink{inset:0;z-index:1}
.sk-circle{left:-11px;top:-7px;z-index:0}
.ink path,.sk-circle path{fill:none;stroke:var(--ink-2);stroke-opacity:.82;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn>.ink path{stroke:var(--ink);stroke-opacity:1;stroke-width:2}
.sk-circle path{stroke:var(--pencil-red);stroke-width:2.3}
.night .ink path,.final .ink path{stroke:var(--night-ink)}
:is(.ink,.sk-under,.sk-circle) g{stroke-dasharray:1;stroke-dashoffset:1}
.sk-in>:is(.ink,.sk-under,.sk-circle) g{animation:sk-draw .95s cubic-bezier(.5,.1,.3,1) forwards}
:is(.ink,.sk-under,.sk-circle) .b1,:is(.ink,.sk-under,.sk-circle) .b2{opacity:0}
:is(.btn,.card,.plan,.link,.type,.sk-box,.nav .links a):is(:hover,:focus-visible)>:is(.ink,.sk-under,.sk-circle) .b0,.sk-alive>:is(.ink,.sk-under,.sk-circle) .b0{animation:sk-b0 .36s steps(1) infinite}
:is(.btn,.card,.plan,.link,.type,.sk-box,.nav .links a):is(:hover,:focus-visible)>:is(.ink,.sk-under,.sk-circle) .b1,.sk-alive>:is(.ink,.sk-under,.sk-circle) .b1{animation:sk-b1 .36s steps(1) infinite}
:is(.btn,.card,.plan,.link,.type,.sk-box,.nav .links a):is(:hover,:focus-visible)>:is(.ink,.sk-under,.sk-circle) .b2,.sk-alive>:is(.ink,.sk-under,.sk-circle) .b2{animation:sk-b2 .36s steps(1) infinite}
@keyframes sk-draw{to{stroke-dashoffset:0}}
@keyframes sk-b0{0%{opacity:1}33%{opacity:0}}
@keyframes sk-b1{0%{opacity:0}33%{opacity:1}66%{opacity:0}}
@keyframes sk-b2{0%{opacity:0}66%{opacity:1}}

/* line art (icons) wobbles like ink: one of three displacement filters, cycled */
html[data-ui=sketch] :is(svg[viewBox="0 0 20 20"],svg[viewBox="0 0 24 24"],.sk-doodle){filter:url(#sk-wob0)}
html[data-ui=sketch] :is(a,button,summary,.btn,.tabbar a):hover :is(svg[viewBox="0 0 20 20"],svg[viewBox="0 0 24 24"],.sk-doodle){animation:sk-wob .36s steps(1) infinite}
@keyframes sk-wob{0%{filter:url(#sk-wob0)}33%{filter:url(#sk-wob1)}66%{filter:url(#sk-wob2)}}

/* ---------- header and logo ---------- */
html[data-ui=sketch] header.top{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-ui=sketch] header.top.scrolled{border-bottom:0;box-shadow:0 1px 0 var(--line),0 3px 0 -1px var(--paper),0 4px 0 -1px var(--line)}
html[data-ui=sketch] .nav .links a:not(.btn){font-family:var(--sans);font-size:1.02rem;font-weight:400;color:var(--ink-2);position:relative;border-radius:30px}
html[data-ui=sketch] .nav .links a:not(.btn):hover{background:transparent;color:var(--ink)}
html[data-ui=sketch] .nav .links a.on{color:var(--ink);font-weight:700}
.sk-logo{display:inline-flex;align-items:baseline;gap:0;font:700 2.15rem/1 var(--hand,"Caveat",cursive);color:var(--ink);letter-spacing:.2px;transform:rotate(-2.5deg);position:relative;padding:0 2px 4px}
.sk-logo .w2{color:var(--brand)}
.sk-logo .dot{display:inline-block;width:.34em;height:.34em;margin:0 .05em;border-radius:50%;background:radial-gradient(circle at 35% 32%,#FFF6C8 0 18%,#FFD54F 42%,#E9A825 100%);box-shadow:0 0 0 1.5px var(--ink),0 0 12px 2px rgba(255,200,60,.55);transform:translateY(-.02em)}
.sk-logo::after{content:"";position:absolute;left:4%;right:6%;bottom:-2px;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C22 2 45 6.5 66 4s38-2.5 52-.5' fill='none' stroke='%23D65A3E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
footer.bottom .sk-logo{color:var(--night-ink);font-size:2.4rem}
footer.bottom .sk-logo .w2{color:#B9A9FF}
@media(max-width:720px){.sk-logo{font-size:1.85rem}}

/* ---------- buttons: a marker swash behind handwriting ---------- */
html[data-ui=sketch] .btn{isolation:isolate;background:transparent;border:0;border-radius:14px;box-shadow:none;color:var(--ink);
  font:700 1.42rem/1 var(--hand);letter-spacing:.2px;padding:12px 24px 13px;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
html[data-ui=sketch] .btn::before{content:"";position:absolute;z-index:-1;inset:7px 4px 6px;border-radius:4px 14px 5px 11px;background:var(--marker);
  transform:scaleX(0) skewX(-9deg);transform-origin:left;transition:transform .32s cubic-bezier(.5,0,.3,1)}
html[data-ui=sketch] .btn:hover{transform:rotate(-1.2deg) translateY(-1px)}
html[data-ui=sketch] .btn:active{transform:translate(1px,2px)}
html[data-ui=sketch] .btn:hover::before,html[data-ui=sketch] .btn-primary::before{transform:scaleX(1) skewX(-9deg)}
html[data-ui=sketch] .btn-ghost::before,html[data-ui=sketch] .btn-quiet::before{background:var(--marker-soft)}
html[data-ui=sketch] .btn-primary,html[data-ui=sketch] .btn-primary:hover{background:transparent;color:var(--ink);box-shadow:none}
html[data-ui=sketch] .btn-dark{color:var(--paper)}
html[data-ui=sketch] .btn-dark::before{background:var(--ink);transform:scaleX(1) skewX(-9deg)}
html[data-ui=sketch] .btn-dark .ink path{stroke:var(--ink)}
html[data-ui=sketch] .btn-danger{color:var(--bad)}
html[data-ui=sketch] .btn-danger::before{background:rgba(214,90,62,.18)}
html[data-ui=sketch] .btn-lg{font-size:1.68rem;padding:15px 30px 16px}
html[data-ui=sketch] .btn-sm{font-size:1.18rem;padding:8px 16px 9px}
html[data-ui=sketch] .btn .arrow{display:inline-block;transition:transform .2s}
html[data-ui=sketch] .btn:focus-visible{outline:2px dashed var(--pencil-red);outline-offset:4px}
html[data-ui=sketch] .night .btn-ghost,html[data-ui=sketch] .final .btn-ghost{color:var(--night-ink)}
html[data-ui=sketch] .night .btn-primary,html[data-ui=sketch] .final .btn-primary{color:var(--ink)}

/* ---------- surfaces: sheets of paper, sticky notes, tape ---------- */
html[data-ui=sketch] :is(.card,.plan,.link,.type,.stops,.browser,.table-wrap){background:var(--card) var(--grain);border:0;border-radius:4px 9px 6px 8px;box-shadow:var(--shadow)}
html[data-ui=sketch] .card-hi{box-shadow:var(--shadow-lg)}
html[data-ui=sketch] .card-flat{background:var(--paper-2) var(--grain);border:0;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line)}
html[data-ui=sketch] .band{background:var(--paper-2) var(--grain);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
html[data-ui=sketch] .rule{height:0;border-top:2px dashed var(--line-2);background:none}
.sk-tape{position:absolute;z-index:3;width:84px;height:24px;background:rgba(255,236,170,.72);box-shadow:0 1px 2px rgba(0,0,0,.06);pointer-events:none;
  clip-path:polygon(0 8%,6% 0,12% 10%,20% 2%,30% 8%,40% 0,52% 6%,62% 0,74% 8%,86% 2%,100% 6%,97% 50%,100% 94%,90% 100%,78% 92%,66% 100%,54% 94%,42% 100%,30% 92%,18% 100%,8% 94%,0 100%,3% 50%)}
html:not([data-ui=sketch]) .sk-tape{display:none}

/* ---------- forms: pencil lines, highlighter focus ---------- */
html[data-ui=sketch] :is(.input,.select,.textarea){background:var(--card);border:2px solid var(--ink-2);border-radius:255px 14px 225px 14px/14px 225px 14px 255px;
  font-family:var(--sans);font-size:1.06rem;color:var(--ink)}
html[data-ui=sketch] .textarea{border-radius:14px 8px 12px 6px/8px 12px 6px 14px;background:var(--card) var(--rule-lines);background-attachment:local;line-height:32px}
html[data-ui=sketch] :is(.input,.select,.textarea):focus{border-color:var(--ink);box-shadow:0 0 0 5px var(--marker-soft)}
html[data-ui=sketch] :is(.input,.textarea)::placeholder{color:var(--ink-faint);font-style:normal}
html[data-ui=sketch] label.field{font-family:var(--sans);font-weight:700;color:var(--ink-2)}

/* ---------- badges and tags: rubber stamps ---------- */
html[data-ui=sketch] :is(.badge,.tag){background:transparent;border:2px solid currentColor;border-radius:8px 11px 7px 12px;font-family:var(--sans);font-weight:700;
  letter-spacing:.2px;transform:rotate(-1.5deg);color:var(--ink-2)}
html[data-ui=sketch] .badge-ok,html[data-ui=sketch] .tag-live{color:var(--ok);background:transparent}
html[data-ui=sketch] .badge-work{color:var(--brand);background:transparent}
html[data-ui=sketch] .badge-warn{color:var(--warn);background:transparent}
html[data-ui=sketch] .badge-bad{color:var(--bad);background:transparent}
html[data-ui=sketch] .alert{background:var(--card);border:0;border-radius:4px;font-family:var(--sans)}
html[data-ui=sketch] .alert-ok{background:#EEF4DF}
html[data-ui=sketch] .alert-warn{background:#FFF1C2}
html[data-ui=sketch] .alert-bad{background:#FBE3D8}
html[data-ui=sketch] .progress{height:10px;background:var(--paper-3);border-radius:10px 4px 9px 5px}
html[data-ui=sketch] .progress>span{background:repeating-linear-gradient(-55deg,var(--brand) 0 5px,#7A63E0 5px 9px);border-radius:inherit}
html[data-ui=sketch] .step{background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--hand);font-size:1.1rem;border-radius:50% 46% 52% 48%}
html[data-ui=sketch] .list-item{border-top:2px dashed var(--line)}
html[data-ui=sketch] table.table th{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink-dim);border-bottom:2px solid var(--ink-2)}
html[data-ui=sketch] table.table td{border-bottom:1.5px dashed var(--line)}

/* menus */
html[data-ui=sketch] .menu>summary,html[data-ui=sketch] .phone-menu>summary{background:var(--card);border:2px solid var(--ink-2);border-radius:18px 12px 16px 10px}
html[data-ui=sketch] :is(.menu .menu-panel,.phone-menu .sheet-menu){background:var(--card) var(--grain);border:0;border-radius:4px;box-shadow:var(--shadow-lg)}
html[data-ui=sketch] :is(.menu .menu-panel a,.phone-menu .sheet-menu a){font-family:var(--sans);position:relative;z-index:2}
html[data-ui=sketch] :is(.menu .menu-panel a,.phone-menu .sheet-menu a):hover{background:var(--marker-soft)}
html[data-ui=sketch] .acct .avatar{background:var(--marker);color:var(--ink);font-family:var(--hand);font-size:1.25rem;box-shadow:0 0 0 2px var(--ink)}
html[data-ui=sketch] .acct>summary{border:0;background:transparent}

/* ---------- night: a desk lamp after dark ---------- */
html[data-ui=sketch] .night{background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-ui=sketch] :is(.night,.final) :is(.lede,.muted){color:#D8CFBD}
html[data-ui=sketch] .night .card,html[data-ui=sketch] .night .pair{background:rgba(255,255,255,.04);box-shadow:none}

/* ---------- footer: the back cover ---------- */
html[data-ui=sketch] footer.bottom{background:var(--night);position:relative;margin-top:30px;font-family:var(--sans)}
html[data-ui=sketch] footer.bottom::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px;background:var(--night);
  clip-path:polygon(0 60%,4% 30%,9% 55%,14% 25%,19% 50%,25% 20%,31% 52%,37% 28%,43% 55%,50% 22%,56% 50%,62% 30%,68% 56%,74% 26%,80% 52%,86% 24%,92% 54%,96% 32%,100% 50%,100% 100%,0 100%)}
html[data-ui=sketch] footer.bottom h4{font-family:var(--hand);font-size:1.5rem;letter-spacing:0;text-transform:none;font-weight:700}
html[data-ui=sketch] .app-foot{border-top:2px dashed var(--line);font-family:var(--sans)}

/* ---------- the app's tab bar ---------- */
html[data-ui=sketch] .tabbar{background:color-mix(in srgb,var(--card) 94%,transparent);border-top:0;box-shadow:0 -1px 0 var(--line),0 -3px 0 -1px var(--card),0 -4px 0 -1px var(--line)}
html[data-ui=sketch] .tabbar a{font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--ink-faint);position:relative}
html[data-ui=sketch] .tabbar a.on{color:var(--ink);font-weight:700}
html[data-ui=sketch] .tabbar a.on::after{content:"";position:absolute;left:22%;right:22%;bottom:1px;height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C14 2 26 6 38 4s16-2 20-.5' fill='none' stroke='%23D65A3E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html[data-ui=sketch] .tabbar svg{stroke-width:2}

/* ---------- the pen picker ---------- */
.pen-picker{position:relative;align-self:flex-start;flex:none;z-index:55;display:flex;align-items:flex-start;gap:6px;height:58px;padding:0 6px;margin-left:4px}
.pen{position:relative;width:30px;height:58px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pen-art{position:absolute;left:6px;top:0;width:18px;height:64px;transform:translateY(-36px);transition:transform .45s cubic-bezier(.3,1.7,.5,1);filter:drop-shadow(1px 3px 0 rgba(0,0,0,.1))}
.pen-art svg{display:block;width:18px;height:64px}
.pen:hover .pen-art,.pen:focus-visible .pen-art{transform:translateY(-24px) rotate(-5deg)}
.pen.active .pen-art{transform:translateY(-9px) rotate(7deg)}
.pen:active .pen-art{transform:translateY(-4px) rotate(9deg)}
.pen:focus-visible{outline:none}
.pen:focus-visible .pen-art{outline:2px dashed var(--pencil-red,#D65A3E);outline-offset:3px;border-radius:4px}
.pen-label{position:absolute;top:60px;left:50%;transform:translate(-50%,-4px);white-space:nowrap;display:grid;justify-items:center;padding:4px 10px 5px;border-radius:10px;
  background:var(--ink);color:var(--paper);font:600 12px/1.15 var(--sans);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.pen-label small{font-weight:400;font-size:10.5px;opacity:.78}
.pen:hover .pen-label,.pen:focus-visible .pen-label{opacity:1;transform:translate(-50%,0)}
.pen-caption{align-self:center;margin:0 0 0 6px;white-space:nowrap;font:500 12px var(--sans);color:var(--ink-faint);transform:translateY(-5px)}
.pen-squiggle{position:absolute;top:44px;width:34px;height:12px;overflow:visible;pointer-events:none;transition:left .35s}
.pen-squiggle path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pen-scribble .7s .2s ease-out forwards}
.pen-picker[data-on=sketch] .pen-squiggle{left:4px}
.pen-picker[data-on=classic] .pen-squiggle{left:40px}
.pen-picker[data-on=classic] .pen-squiggle path{stroke:var(--brand);stroke-width:1.4}
@keyframes pen-scribble{to{stroke-dashoffset:0}}
html[data-ui=sketch] .pen-label{font-family:var(--sans);font-weight:700;background:#FDE58A;color:var(--ink);border-radius:2px;transform:translate(-50%,-4px) rotate(-3deg);box-shadow:0 6px 12px rgba(90,63,31,.18)}
html[data-ui=sketch] .pen:hover .pen-label{transform:translate(-50%,0) rotate(-3deg)}
html[data-ui=sketch] .pen-caption{font-family:var(--hand);font-size:19px;font-weight:700;color:var(--ink-dim);transform:translateY(-6px) rotate(-4deg)}
html:not([data-ui=sketch]) .pen-caption{font-family:var(--sans)}
@media(max-width:980px){.pen-caption{display:none}}
@media(max-width:720px){.pen-picker{height:52px;margin-left:16px}.pen{height:52px;width:26px}.pen-art{left:4px}.pen-picker[data-on=classic] .pen-squiggle{left:32px}.pen-squiggle{top:40px;width:28px}}
.in-app .pen-picker{top:env(safe-area-inset-top,0px)}

/* ---------- canvases drawn by machine.js ---------- */
canvas[data-machine]{display:block;width:100%;height:100%;touch-action:pan-y}
html:not([data-ui=sketch]) canvas[data-machine]{display:none}

@media (prefers-reduced-motion: reduce){
  .sk-in>:is(.ink,.sk-under,.sk-circle) g{animation:none;stroke-dashoffset:0}
  :is(.ink,.sk-under,.sk-circle) g{stroke-dashoffset:0}
  .pen-art,.pen-label{transition:none}
  .pen-squiggle path{animation:none;stroke-dashoffset:0}
}

/* ---------- page pieces that set their own surfaces ---------- */
html[data-ui=sketch] :is(.ex,.tier){background:var(--card) var(--grain);border:0;border-radius:4px 9px 6px 8px;box-shadow:var(--shadow);position:relative}
html[data-ui=sketch] .tier.feat,html[data-ui=sketch] .tier.is-featured{box-shadow:var(--shadow-lg)}
html[data-ui=sketch] .cycle{background:var(--card);border:2px solid var(--ink-2);border-radius:18px 10px 16px 9px;box-shadow:none}
html[data-ui=sketch] .cycle button{font-family:var(--label)}
html[data-ui=sketch] .pack{background:rgba(255,255,255,.05);border:1.5px dashed var(--night-line);border-radius:4px}
html[data-ui=sketch] .pack .amount{font-family:var(--hand);font-weight:700;font-size:3rem}
html[data-ui=sketch] .pack .btn{background:transparent;color:var(--ink)}
html[data-ui=sketch] .pack .btn::before{transform:scaleX(1) skewX(-9deg)}
html[data-ui=sketch] .pack .btn .ink path{stroke:var(--night-ink)}
html[data-ui=sketch] .pack>.ink path{stroke:var(--night-ink);stroke-opacity:.8}
html[data-ui=sketch] .pack{border:0 !important}
html[data-ui=sketch] .pack:nth-child(odd){transform:rotate(-1deg)}
html[data-ui=sketch] .pack:nth-child(even){transform:rotate(1.1deg)}
html[data-ui=sketch] .part-num{background:transparent;color:var(--ink);border:2.5px solid var(--ink);border-radius:50% 46% 53% 47%;font:700 1.5rem/1 var(--hand);transform:rotate(-4deg)}

/* ---------- round 2: craft fixes ---------- */
/* nothing scrolls sideways */
html[data-ui=sketch],html[data-ui=sketch] body{overflow-x:clip}
html[data-ui=sketch] h1 em,html[data-ui=sketch] h2 em{white-space:normal;max-width:100%}
/* outlines sit under the content of their box, never across it */
html[data-ui=sketch] :is(.btn,.card,.plan,.link,.type,.pair,.browser,.stops,.final,.table-wrap,.alert,.sk-box,.menu-panel,.sheet-menu,.fact-card,.newbook,.ex,.tier,.pack,.leg){isolation:isolate}
html[data-ui=sketch] .ink{z-index:-1}
/* handwriting is never small: 15px is the floor */
html[data-ui=sketch] :is(.meta,.faint,.help,.research-cost,.primary-note,.road-note,.allow-note,.kdp-note,.est,.cost){font-size:max(15px,1em)}
html[data-ui=sketch] .faint{color:var(--ink-dim)}
/* every eyebrow is a red pencil note */
html[data-ui=sketch] :is(.ex .kind,.chapter .num,.kdp-group h3){font:700 1.35rem/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--pencil-red)}
html[data-ui=sketch] .tier .flag{background:#FDE58A;color:var(--ink);font:700 1.05rem/1.1 var(--hand);border-radius:2px;padding:5px 12px;transform:rotate(-3deg);top:-18px;z-index:2;box-shadow:0 4px 8px -4px rgba(90,63,31,.45)}
/* the logo: brains.biz, with the idea as its full stop */
.sk-logo .dot{width:.16em;height:.16em;margin:0 .04em 0 .05em;align-self:baseline;transform:translateY(-.03em);background:radial-gradient(circle at 38% 34%,#FFF3B0 0 22%,#F5B82E 60%,#D9901A 100%);box-shadow:0 0 9px 2px rgba(255,196,50,.7)}
/* the pen picker says which look is on */
html[data-ui=sketch] .pen-caption::after{content:" · sketchbook";font-size:.8em;color:var(--ink-faint)}
html:not([data-ui=sketch]) .pen-caption::after{content:" · classic";color:var(--ink-faint)}
/* the app's tab bar is solid paper */
html[data-ui=sketch] .tabbar{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
/* long reading: a book face, printed on the page */
html[data-ui=sketch] .book{font-family:var(--print)}
html[data-ui=sketch] .guide-body p,html[data-ui=sketch] .legal p,html[data-ui=sketch] .legal li{font-size:1.08rem}
/* containers that drew their own boxes take the paper edge too */
html[data-ui=sketch] .packs{position:relative}
html[data-ui=sketch] .road .leg{position:relative}
@media(max-width:720px){
  html[data-ui=sketch] .nav{gap:6px}
  html[data-ui=sketch] .pen-picker{margin-left:0;padding:0 2px;gap:2px}
  html[data-ui=sketch] .nav .links .btn-sm{padding:7px 12px 8px;font-size:1.08rem}
  html[data-ui=sketch] .nav .links{gap:4px}
}
html[data-ui=sketch] .packs{border-radius:5px 12px 7px 10px}
html[data-ui=sketch] .packs>.ink path{stroke:var(--night-ink);stroke-opacity:.55}
html[data-ui=sketch] .packs .muted{color:#D8CFBD}
html[data-ui=sketch] .packs h2{color:var(--night-ink)}
html[data-ui=sketch] .btn.sk-alive{animation:sk-nudge 1.4s ease-in-out infinite}
@keyframes sk-nudge{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg) scale(1.03)}40%{transform:rotate(1.5deg) scale(1.03)}60%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){html[data-ui=sketch] .btn.sk-alive{animation:none}}

/* ---------- round 3: one edge per box ---------- */
/* a box with a drawn outline has no CSS edge of its own */
html[data-ui=sketch] :is(.dl,.sec,.road .leg,.pack,.type-tile,.tier,.ex,.link,.type,.plan,.card,.newbook,.b-hero,.stops,.browser,.pair){border:0 !important;outline:0}
html[data-ui=sketch] :is(.dl,.sec,.road .leg,.pack){box-shadow:var(--shadow-sm) !important}
html[data-ui=sketch] .road .leg.main{border-radius:5px 12px 7px 10px}
html[data-ui=sketch] .packs{border-radius:6px 16px 8px 14px/14px 8px 16px 6px}
/* the pricing flag is one short line above the plan name */
html[data-ui=sketch] .tier .flag{white-space:nowrap;font-size:.98rem;top:-20px;max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis}
html[data-ui=sketch] .tier{padding-top:30px}
/* handwriting floor everywhere, page styles included */
html[data-ui=sketch] body :is(.meta,.faint,.help,.research-cost,.primary-note,.road-note,.allow-note,.kdp-note,.est,.cost,.run-row .meta){font-size:max(15px,1em)}
/* small print stays small beside big numbers, but never under 15px */
html[data-ui=sketch] body :is(.stop-row .who small,.pen-label small,.type-tile small,.hero-note small,.chip-float small,.sk-cta-note small){font-size:15px}
html[data-ui=sketch] body :is(.price,.amount) small{font-size:1.05rem;font-family:var(--sans)}
/* the logo's full stop: clear on both sides */
.sk-logo .dot{margin:0 .09em 0 .07em}

/* headings never run into the note or eyebrow above them */
html[data-ui=sketch] .eyebrow{margin-bottom:.35em}
html[data-ui=sketch] .sk-note{margin-bottom:.4em}
html[data-ui=sketch] .chapter .num{display:block;margin-bottom:.45em}

/* ---------- the beat between sections (below the margin trail's width) ---------- */
.sk-route{display:block;height:150px;margin:0 auto 8px;max-width:1200px;padding:0 20px;position:relative;z-index:3;pointer-events:none}
.sk-route canvas{display:block;width:100%;height:100%}
@media(min-width:1600px){.sk-route{display:none}}
@media(max-width:720px){.sk-route{height:132px;margin-bottom:6px}}
@media(min-width:1000px){.sk-route{height:236px;margin-bottom:18px}}

/* ---------- the drawings' pause button ---------- */
.sk-motion{position:relative;align-self:center;width:30px;height:30px;margin:0 2px 0 6px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translateY(-6px)}
.sk-motion-icon{position:absolute;inset:6px 8px;border-left:4px solid var(--ink-2);border-right:4px solid var(--ink-2);border-radius:2px}
.sk-motion[aria-pressed="true"] .sk-motion-icon{border:0;inset:7px 7px 7px 10px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--pencil-red)}
.sk-motion:hover{background:var(--marker-soft)}
.sk-motion:focus-visible{outline:2px dashed var(--pencil-red);outline-offset:2px}
html:not([data-ui=sketch]) .sk-motion{display:none}
/* a strip of the frame's paper under each large drawing holds its button */
html[data-ui=sketch] .sk-has-motion>canvas[data-machine]{bottom:46px !important;height:auto}
html[data-ui=sketch] .sk-has-motion{padding-bottom:0}
.sk-motion-stage{position:absolute;left:10px;bottom:5px;width:auto;height:36px;margin:0;padding:0 14px 0 36px;border-radius:18px;transform:none;z-index:4;pointer-events:auto;
  background:var(--card);box-shadow:0 0 0 1.6px var(--ink-2);font:700 1rem/1 var(--label);color:var(--ink-2);display:inline-flex;align-items:center}
.sk-motion-stage .sk-motion-icon,.sk-motion-stage[aria-pressed="true"] .sk-motion-icon{inset:auto;left:13px;top:50%;width:12px;height:14px;margin-top:-7px;border:0;border-radius:1px;
  background:linear-gradient(90deg,var(--ink-2) 0 36%,transparent 36% 64%,var(--ink-2) 64%)}
.sk-motion-stage[aria-pressed="true"] .sk-motion-icon{background:var(--pencil-red);clip-path:polygon(0 0,100% 50%,0 100%)}
.sk-motion-label{white-space:nowrap}
@media (pointer:coarse){.sk-motion-stage{height:44px;bottom:1px}}
/* the footer's switch for the moving drawings */
.sk-motion-text{background:none;border:0;padding:6px 2px;margin-left:10px;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;min-height:32px}
.sk-motion-text:focus-visible{outline:2px dashed var(--pencil-red);outline-offset:2px}
/* holding still stops the loops (boil, wobble, nudge, float); outlines still finish drawing in */
html[data-motion=paused] :is(.btn.sk-alive,.idea-waiting .book3d,.kdp-win,.badge .pulse),html[data-motion=paused] .working-cover::before{animation-play-state:paused !important}
html[data-motion=paused] :is(.ink,.sk-under,.sk-circle) g{animation:none !important;stroke-dashoffset:0}
html[data-motion=paused] :is(a,button,summary,.btn,.tabbar a) :is(svg,.sk-doodle){animation:none !important}
html[data-motion=paused] .pen-squiggle path{animation:none;stroke-dashoffset:0}
/* an outline that has drawn in stays drawn, whatever animation (the hover boil) comes next */
.sk-drawn>:is(.ink,.sk-under,.sk-circle) g{stroke-dashoffset:0}

/* ---------- edges in the first paint: a plain line until the drawn one arrives ---------- */
html[data-ui=sketch] .btn:not(.sk-inked){box-shadow:inset 0 0 0 2px var(--ink)}
html[data-ui=sketch] :is(.card,.plan,.link,.type,.tier,.ex,.newbook,.dl,.sec,.pack,.road .leg,.stops,.browser,.pair,.final,.table-wrap,.alert):not(.sk-inked){outline:1.6px solid var(--line-2);outline-offset:-3px}