/* Self-hosted fonts (OFL licenses in /fonts): Young Serif for headings, Nunito Sans (variable 400-800) for text.
   2026-10-29 redesign: warm paper background, ink text, raspberry brand colour, crayon accents for themes only. */
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/nunitosans.woff2?v=ba40dacf91) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/youngserif.woff2?v=a46a84bfaa) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Huepad / line-art publishing studio. All drawing and export engines stay original. */
@media screen {
  :root{--sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Young Serif',Georgia,serif;--ink:#1E1B26;--ink2:#47414F;--muted:#6E6679;--line:#E6DDCF;--panel:#fff;--wash:#F4EDE0;--mat:#F4EDE0;--pen:#C8325F;--pen-dk:#97173F;--pen-wash:#FBE7EE;--paper:#FBF7EF;--sun:#FFC23D;--leaf:#36A96B;--sky:#4D9DE0;--tangerine:#F5813A;--lilac:#9A7FD0}
  html{font-synthesis:none}
  body{font-family:var(--sans);background:var(--paper);color:var(--ink)}.top{height:auto;min-height:70px;padding:12px 32px;border-bottom:1px solid var(--line);background:var(--paper)}.brand-name{font:400 28px/1 var(--display);letter-spacing:-.5px}.brand-sub{font-size:14px}.top-nav a{font-size:15px;font-weight:700;padding:9px 13px;border-radius:999px;color:var(--ink2)}.top-nav a:hover{background:var(--wash);color:var(--ink)}.brand svg{color:var(--pen)}
  .creation-title{max-width:1460px;margin:0 auto;padding:28px 32px 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:8px 36px;align-items:end}.creation-kicker{grid-column:1/-1;margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pen-dk);font-weight:800}.creation-title h1{font:400 42px/1.1 var(--display);letter-spacing:-.5px;max-width:22ch;margin:0}.creation-title .lede{font:400 16px/1.55 var(--sans);margin:0;max-width:60ch;color:var(--ink2)}
  .studio{max-width:1460px;margin:0 auto 40px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;height:auto;max-height:none;min-height:0;border:0;align-items:start}.panel{grid-column:2;grid-row:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;min-width:0;min-height:0}.panel-scroll{overflow:visible;padding:20px;max-height:none}.modes{border:1px solid var(--line);background:var(--wash);margin-bottom:22px;border-radius:9px;padding:4px}.mode{font-size:15px;min-height:48px;border-radius:6px;padding:8px}.lab{font-size:14px}.help,.photo-name,.drop-note,.ends{font-size:14px}.styles legend{font-size:14px}.style-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.slider{margin-bottom:20px}.slider output{font-size:16px}.seed-row input{font-size:16px}.btn-line{font-size:15px;min-height:44px;border-radius:7px}.sel select,.sel input{font-size:16px;min-height:44px}.photo-name{word-break:normal;overflow-wrap:anywhere}
  .creation-fold{border-top:1px solid var(--line);padding:16px 0 4px}.creation-fold summary{font-size:16px;font-weight:600;cursor:pointer;min-height:36px}.creation-fold[open] summary{margin-bottom:16px}.creation-fold .common{padding:0;margin:0;border:0}.creation-fold .book{padding:0;margin:0;border:0;background:none}.creation-fold .book h2{font-size:20px}.creation-fold .book p{font-size:14px}.book-fold #downloadBook{width:100%;margin-top:12px}
  .studio>.mat{grid-column:1;grid-row:1;background:var(--wash);border:1px solid var(--line);border-radius:16px;min-width:0;height:760px;min-height:0;max-height:none;display:flex;flex-direction:column;background-image:radial-gradient(#D9CBB455 .8px,transparent .8px);background-size:14px 14px;padding:0}.mat-bar{padding:15px 20px;min-height:58px;border:0;gap:12px;flex-wrap:wrap}.chip-label{font-size:15px;background:#fff;color:var(--ink);padding:5px 10px;border-radius:5px}.mat-size{font-size:14px;color:var(--ink2)}.btn-compare{font-size:14px;min-height:38px}.sheet-wrap{padding:12px 32px 38px;flex:1;min-height:0;container-type:size}.sheet{box-shadow:0 1px 1px #1e1b260f,0 12px 28px -14px #1e1b2666}.sample-tag{font-size:14px}.split{bottom:-32px}
  .mat>.export{padding:16px 20px;background:#fff;border-radius:0 0 16px 16px;border-color:var(--line);flex:none;gap:8px}.export .btn-main{min-height:48px;flex:1 1 160px}.export .btn-line{min-height:48px;flex:0 1 74px;font-size:15px}.export .status{font-size:14px;line-height:1.45}.info{padding-top:36px}.info h2{font:400 32px/1.15 var(--display);letter-spacing:-.3px}.gal-name{font-size:17px}.foot{border-color:var(--line);background:var(--wash)}
  @media(max-width:1120px){.studio{grid-template-columns:minmax(0,1fr) 320px;gap:16px;padding:0 20px}.panel-scroll{padding:16px}.studio>.mat{height:720px}.sheet-wrap{padding-left:18px;padding-right:18px}.style-grid{gap:4px}.creation-title{padding:24px 24px}.creation-title h1{font-size:35px}.brand-sub{display:none}}
  @media(max-width:820px){.creation-title{display:block;padding:24px 16px}.creation-kicker{display:block;margin-bottom:10px}.creation-title h1{font-size:34px}.creation-title .lede{margin-top:14px}.studio{display:flex;flex-direction:column;padding:0 12px;gap:16px}.studio>.mat{width:100%;min-height:0;border-radius:12px}.panel-scroll{padding:16px}.modes{margin-bottom:18px}.style-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.creation-fold{margin-top:8px}.mat-bar{padding:12px;gap:8px}.sheet-wrap{padding:8px 20px 38px}.mat>.export{padding:14px 12px;border-radius:0 0 12px 12px}.export .btn-main{flex-basis:100%}.export .btn-line{flex:1}.info{padding:30px 20px 0}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.tips{display:block}.tips article{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:18px 0}.facts{grid-template-columns:1fr}.foot{padding:24px 20px}}
}
@media print{.creation-title{display:none!important}}
@media screen{
 .mode[aria-checked=true]{background:var(--pen);color:#fff}
 .style-opt{font-size:14px;line-height:1.3}
 .mat>.export{position:static;box-shadow:none}
 .top-nav a[aria-current=page]{color:var(--pen-dk);background:var(--pen-wash)}
 /* one main download (PDF); PNG and SVG sit in a small menu that says what each is for */
 .export .more{position:relative;flex:0 1 160px;min-width:0;margin:0;border:0}
 .more>summary{list-style:none;width:100%;min-height:48px;gap:10px}
 .more>summary::-webkit-details-marker{display:none}
 .more>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
 .more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
 .more-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;width:min(300px,calc(100vw - 32px));display:grid;gap:2px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 32px -12px #62344d66}
 .more-item{display:grid;gap:2px;width:100%;padding:10px 12px;border:0;border-radius:7px;background:none;text-align:left}
 .more-item b{font-size:15px;font-weight:650;color:var(--ink)}
 .more-item span{font-size:14px;line-height:1.35;color:var(--ink2)}
 .more-item:hover{background:var(--wash)}
 @media(max-width:820px){
  html{scroll-padding-bottom:0}
  /* one header on every page: brand, then the same four links in one row */
  .top{padding:10px 16px;flex-wrap:wrap;gap:6px}
  .top-nav{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .top-nav a[href="/about"]{display:none} /* four links fit a phone row; About stays in the footer */
  .top-nav a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:4px;font-size:14px;line-height:1.2;text-align:center}
  /* phone: mode switch, then the style picker or photo button, then the page, then the remaining settings */
  .studio{gap:0;align-items:stretch}
  .panel,.panel-scroll,#patternControls,#photoControls{display:contents}
  .panel-scroll>.modes{order:1;margin:0 0 14px}
  #patternControls>*,#photoControls>*,.creation-fold{order:4;margin-left:4px;margin-right:4px}
  #patternControls>:not(.slider),#photoControls>:not(.slider){margin-bottom:16px} /* the gap the groups had as flex boxes */
  #patternControls>.styles,#photoControls>.drop,#photoControls>#photoErr{order:2;margin:0 0 16px}
  .studio>.mat{order:3;height:auto;margin-bottom:22px}
  /* the sheet keeps its paper shape and fits both the column width and the screen height; the mat grows around it */
  .sheet-wrap{flex:none;container-type:inline-size;padding:8px 16px 36px}
  .sheet{width:min(100cqw,calc((100svh - 240px) * var(--ar)))}
  .export .more{flex:1 1 0}
  .more-menu{right:auto;left:0}
 }
}
@media screen{
 /* Pattern and photo controls share one grid cell. The inactive panel is invisible (not focusable, not read out) but keeps
    its height, so switching modes never moves what is below. Lines/Shapes sliders are stacked the same way. */
 .mode-stack{display:grid}
 .mode-stack>.group,.mode-stack>.group[hidden]{grid-area:1/1;display:flex!important;min-width:0}
 .ctl-top,.ctl-rest{display:flex;flex-direction:column;gap:16px;min-width:0}
 html[data-mode="photo"] #patternControls,html:not([data-mode="photo"]) #photoControls{visibility:hidden}
 .kind-stack{display:grid}.kind-stack>.slider{grid-area:1/1}
 html[data-kind="shapes"] .kind-stack>.only-lines,html[data-kind="ai"] .kind-stack>.only-lines,html:not([data-kind="shapes"]) .kind-stack>.only-shapes,html:not([data-kind="ai"]) .kind-stack>.only-ai,html[data-kind="ai"] .not-ai{visibility:hidden}
 .ai-note p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2);background:#fff;border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:8px;padding:10px 12px}
 .ai-dialog{max-width:min(520px,calc(100vw - 32px));border:0;border-radius:16px;padding:26px;color:var(--ink);background:#fff;box-shadow:0 30px 60px -20px #1e1b2680}
 .ai-dialog::backdrop{background:#1e1b2666}
 .ai-dialog h2{font:400 26px/1.2 var(--display);margin:0 0 10px}
 .ai-dialog p,.ai-dialog li{font-size:15px;line-height:1.5;color:var(--ink2)}
 .ai-dialog ul{padding-left:20px;margin:10px 0 16px}
 .ai-actions{display:flex;justify-content:flex-end;gap:10px;margin:18px 0 0}
 .ai-actions button{min-height:46px;padding:0 18px;border-radius:999px;font:800 15px/1 var(--sans);cursor:pointer}
 .ai-actions .btn-main{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
 .ai-actions .btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
 .kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--wash)}
 .kind{display:grid;gap:3px;justify-items:center;min-height:52px;padding:6px 4px;border:0;border-radius:6px;background:transparent;font:600 15px/1.1 var(--sans);color:var(--ink2);cursor:pointer}
 .kind span{font-size:12px;font-weight:400;line-height:1.2}
 .kind:hover{color:var(--ink)}
 .kind[aria-checked="true"]{background:var(--pen);color:#fff}
 /* the compare button keeps its place in pattern mode too */
 #compare[hidden]{display:inline-flex!important}
 html:not([data-mode="photo"]) #compare{visibility:hidden}
 .check{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.35;cursor:pointer}
 .check input{width:20px;height:20px;margin:0;accent-color:var(--pen);flex:none}
 .check input:disabled+span{color:var(--muted)}
 .check-row .help{margin:6px 0 0 28px}
 .ctl-rest>.book{margin-top:4px}.book .check{font-size:14px;align-items:center}.book #bookCount{margin-top:-4px}.book .license{margin:0;font-size:13px;padding:8px 10px;color:var(--ink)}
 .license{font-size:14px;line-height:1.45;color:var(--ink2);background:#fff;border:1px solid var(--line);border-left:4px solid var(--leaf);border-radius:8px;padding:10px 12px;margin:12px 0 0}
 .creation-title .license{grid-column:1/-1;justify-self:start;margin:6px 0 0;max-width:72ch}
 .guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .guide-card{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
 .guide-card:hover{border-color:var(--pen)}
 .guide-card img{width:100%;height:auto;aspect-ratio:480/600;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px}
 .guide-card .gal-name{font-weight:700}.guide-card .gal-desc{font-size:15px;color:var(--ink2)}
 .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
 .figs.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
 .figs figure{margin:0;display:flex;flex-direction:column;gap:6px}
 .figs img{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
 .figs figcaption{font-size:14px;line-height:1.45;color:var(--ink2)}
 .figs figcaption b{color:var(--ink)}
 .apply{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--pen);color:var(--pen-dk);background:#fff;font-weight:650;text-decoration:none;white-space:nowrap}
 .apply:hover{background:var(--pen-wash)}
 .apply.main{background:var(--pen);color:#fff;border-color:var(--pen)}
 .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
 .src{font-size:14px;color:var(--ink2)}
 @media(max-width:820px){.guide-cards,.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.figs.two{grid-template-columns:1fr 1fr}}
 @media(max-width:480px){.guide-cards{grid-template-columns:1fr}}
 .doc .facts-list{padding-left:20px;color:var(--ink2);font-size:16.5px}.doc .facts-list li{margin:10px 0}.doc .facts-list b{color:var(--ink)}
 /* home hero (2026-10-29) */
 .home-hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:24px 48px;padding-top:40px}
 .home-hero h1{font-size:clamp(34px,4.4vw,54px);max-width:16ch}
 .home-hero .lede{font-size:18px;margin:14px 0 0}
 .scribble{position:relative;white-space:nowrap;z-index:0}
 .scribble::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.06em;height:.3em;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C40 4 80 18 120 9 S180 6 198 12' fill='none' stroke='%23FFC23D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
 .hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
 .hero-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:800;font-size:16px;text-decoration:none}
 a.btn-main.hero-btn{background:var(--ink);color:#fff}
 a.btn-line.hero-btn{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
 .hero-pair{position:relative;height:440px}
 .hero-pair img{position:absolute;width:44%;height:auto;border-radius:10px;background:#fff;box-shadow:0 1px 1px #1e1b260f,0 18px 40px -18px #1e1b2673}
 .hero-photo{left:4%;top:40px;transform:rotate(-4deg)}
 .hero-page{right:4%;top:0;transform:rotate(3deg);padding:3%}
 .hero-arrow{position:absolute;left:42%;top:44%;width:16%;height:auto}
 .hero-tag{position:absolute;font:800 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 11px}
 .hero-tag.t1{left:6%;top:12px}.hero-tag.t2{right:6%;bottom:18px;background:var(--sun);border-color:var(--sun)}
 .theme-strip{max-width:1460px;margin:0 auto 28px;padding:0 24px}
 .theme-strip ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
 .theme-strip a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px}
 .theme-strip img{width:100%;height:auto;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px}
 .theme-strip a:hover img{border-color:var(--pen)}
.theme-note{max-width:1460px;margin:-14px auto 28px;padding:0 24px;box-sizing:border-box;font-size:15px;line-height:1.5;color:var(--ink2)}
.theme-note a{color:var(--pen-dk);font-weight:700}
 .theme-strip small{display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;font-size:13px}
 .theme-strip i{width:9px;height:9px;border-radius:50%;flex:none}
 @media(max-width:1120px){.theme-strip ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
 @media(max-width:820px){.theme-note{padding:0 16px}.home-hero{display:block}.hero-pair{height:300px;max-width:420px;margin:22px auto 0}.theme-strip{padding:0 16px}.theme-strip ol{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;scroll-snap-type:x mandatory}.theme-strip li{flex:0 0 38%;scroll-snap-align:start}}
 /* two lines kept for the status under the page, so a longer message does not push the page down */
 .export .status{min-height:2.9em}
 .foot .usage-line{flex:0 0 100%;margin:0;font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
 .foot .usage-line .linkish{min-height:40px}
 .doc .usage-toggle{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;font:600 15px/1 var(--sans);color:var(--ink);cursor:pointer}
 @media(max-width:820px){
  /* phone: one column grid; each panel's top half (styles / photo button) sits above the page and the rest below it */
  .studio{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .mode-stack,.mode-stack>.group,.mode-stack>.group[hidden]{display:contents!important}
  .panel-scroll>.modes{grid-row:1}
  #patternControls>.ctl-top,#photoControls>.ctl-top{grid-row:2;grid-column:1;margin:0 0 16px}
  .studio>.mat{grid-row:3}
  #patternControls>.ctl-rest,#photoControls>.ctl-rest{grid-row:4;grid-column:1;margin:0 4px 16px}
  .creation-fold{grid-row:5}
  .creation-title .license{margin-top:14px}
 }
}