/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * genre: playful · macrostructure: Narrative Workflow · theme: existing PadCanvas Hum
 * nav: N1b three-section · footer: Ft5 statement · enrichment: working drawing demo
 * audience: presenters, teachers and collaborators · use: explain, try, connect and get help
 * Existing brand retained intentionally; no external fonts, analytics or illustration services. */
@import url('/tokens.css');
[hidden]{display:none!important}
:root { --site-max:1200px; --site-gutter:clamp(20px,5vw,72px); --site-display:clamp(3.4rem,7.2vw,6.7rem); --site-heading:clamp(2.3rem,4.5vw,4rem); --site-lavender:#ece1fd; --site-purple:#633e8e; --site-pen:#b33b2b; --site-blue:#286b92; --site-dim:#242a32b8; --site-shadow:0 18px 50px var(--color-shadow); --site-rule:2px; --site-radius:28px; --site-ease:cubic-bezier(.2,.7,.3,1); --site-hover:140ms; --site-press:70ms; }
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:17px;line-height:1.65}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:var(--color-blue)}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.07;letter-spacing:-.045em;overflow-wrap:anywhere;min-width:0}h1{font-size:var(--site-display);font-weight:750}h2{font-size:var(--site-heading);font-weight:700}h3{font-size:1.65rem;letter-spacing:-.03em}p{max-width:64ch}img,svg{max-width:100%}button:disabled{cursor:default;opacity:.5}main{min-height:55vh}.wrap{max-width:var(--site-max);margin-inline:auto;padding-inline:var(--site-gutter)}.skip{position:absolute;left:20px;top:-100px;background:var(--color-ink);color:var(--color-paper);padding:12px;z-index:var(--z-sheet)}.skip:focus{top:10px}.site-header{padding-block:27px;border-bottom:1px solid var(--color-rule)}.nav-inner{display:flex;justify-content:space-between;gap:24px;align-items:center}.brand{display:flex;align-items:center;min-height:44px;flex-shrink:0}.brand img{width:163px;height:auto;display:block}.nav-links{display:flex;align-items:center;gap:28px}.nav-links a,.nav-account,.footer-links a{font-size:14px;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.nav-links a:hover,.nav-account:hover,.footer-links a:hover{text-decoration:underline}.nav-links a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px}.nav-account{border:1px solid var(--color-rule);padding-inline:18px;border-radius:var(--radius-pill)}.mobile-nav{display:none}.btn{--btn-face:var(--color-accent);--btn-ink:var(--color-ink);--btn-edge:var(--color-accent-deep);--btn-cast:var(--color-shadow);display:inline-flex;align-items:center;justify-content:center;gap:.7em;padding:.85rem 1.4rem;font-weight:650;font-size:15px;border:0;border-radius:var(--radius-pill);color:var(--btn-ink);background:var(--btn-face);text-decoration:none;white-space:nowrap;min-height:48px;box-shadow:0 4px 0 0 var(--btn-edge),0 6px 12px -3px var(--btn-cast);transform:translateY(0);transition:transform var(--site-hover) var(--site-ease),box-shadow var(--site-hover) var(--site-ease),background-color var(--dur-micro) var(--ease-out)}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 var(--btn-edge),0 12px 22px -4px var(--btn-cast)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--btn-edge);transition-duration:var(--site-press)}.text-link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:15px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.5;margin-bottom:22px}.eyebrow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-success);margin-right:8px}.muted,.small{color:var(--color-muted)}.small{font-size:14px}.hero{padding-top:72px;text-align:center}.hero h1{max-width:11ch;margin:0 auto 24px}.hero h1 .marked{position:relative;white-space:nowrap;display:inline-block}.marked:after{content:'';position:absolute;height:9px;left:0;right:0;bottom:-4px;background:var(--ink-coral);border-radius:50%;transform:rotate(-2deg)}.hero .lead{font-size:20px;line-height:1.55;max-width:48ch;margin:0 auto 25px}.hero .actions{justify-content:center}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.hero-note{margin:18px auto 30px}.demo{margin:35px auto 0;max-width:1040px;text-align:left}.demo-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:15px}.demo-top p{margin:0}.demo-label{font-size:13px;font-weight:650}.demo-top span{font-size:13px;color:var(--color-muted)}.demo-stage{position:relative;height:420px;background:var(--color-blue);border:var(--site-rule) solid var(--color-ink);border-radius:var(--site-radius);overflow:hidden;box-shadow:var(--site-shadow);isolation:isolate}.demo-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:50px 65px;pointer-events:none}.demo-slide h2{font-size:clamp(2.2rem,4.5vw,4.1rem);max-width:9ch;margin-bottom:18px}.demo-slide p{font-size:15px;max-width:27ch}.demo-slide .eyebrow{font-size:11px}.slide-shapes{height:255px;position:relative}.shape{position:absolute;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:750;font-size:27px;border:2px solid var(--color-ink)}.shape-circle{width:156px;height:156px;border-radius:50%;background:var(--color-accent);top:0;left:12%;transform:rotate(-10deg)}.shape-square{width:165px;height:143px;background:var(--color-coral);bottom:0;left:0;border-radius:20px;transform:rotate(6deg)}.shape-note{background:var(--site-lavender);border-radius:50% 50% 45% 55%;width:150px;height:150px;right:0;top:65px;transform:rotate(12deg)}#drawing-demo{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:var(--z-base)}.demo-stage[data-tool=spotlight] #drawing-demo{cursor:move}.demo-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:18px 0}.tool-set{display:flex;gap:6px;flex-wrap:wrap}.tool{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);min-height:44px;padding:8px 15px;font-size:14px;white-space:nowrap}.tool:hover{background:var(--color-paper-2)}.tool[aria-pressed=true]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper)}.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.swatch{width:44px;height:44px;border:2px solid transparent;background:transparent;border-radius:50%;display:grid;place-items:center}.swatch:before{content:'';display:block;width:21px;height:21px;background:var(--swatch);border-radius:50%}.swatch[data-colour=coral]{--swatch:var(--site-pen)}.swatch[data-colour=purple]{--swatch:var(--site-purple)}.swatch[data-colour=blue]{--swatch:var(--site-blue)}.swatch[aria-pressed=true]{border-color:var(--color-ink)}.demo-help{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-bottom:1px solid var(--color-rule);padding:0 0 24px;flex-wrap:wrap}.demo-help p{margin:0;font-size:13px;color:var(--color-muted)}.demo-help button{background:transparent;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px;min-height:44px;color:var(--color-ink);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.workflow{padding-block:90px 55px}.section-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:60px;align-items:end;margin-bottom:48px}.section-intro h2{max-width:15ch;margin:0}.section-intro p{margin-bottom:4px}.stage{display:grid;grid-template-columns:65px minmax(0,.95fr) minmax(0,1fr);gap:28px;border-top:1px solid var(--color-rule);padding:35px 0}.stage-number{font-family:var(--font-display);font-size:30px;line-height:1.2;color:var(--color-muted)}.stage h3{margin-bottom:12px}.stage p{font-size:16px;margin-bottom:0}.stage-aside{background:var(--color-accent);border-radius:18px;padding:24px;display:flex;flex-direction:column;justify-content:center}.stage-aside p{font-size:15px}.stage:nth-of-type(2) .stage-aside{background:var(--color-blue)}.stage:nth-of-type(3) .stage-aside{background:var(--color-coral)}.connection-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.connection-tags span{font-size:12px;font-weight:650;padding:4px 10px;border:1px solid currentColor;border-radius:var(--radius-pill)}.tool-list{padding-block:55px 90px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:70px}.tool-list h2{max-width:11ch}.feature-rows{margin:0}.feature-rows div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:18px;padding:17px 0;border-bottom:1px solid var(--color-rule)}.feature-rows dt{font-weight:650}.feature-rows dd{margin:0;color:var(--color-muted);font-size:15px}.local-band{background:var(--color-ink);color:var(--color-paper);padding-block:65px}.local-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:65px}.local-band h2{max-width:13ch;margin-bottom:20px}.local-band p{font-size:16px}.local-band .eyebrow{color:var(--color-accent)}.connection-map{display:flex;align-items:center;gap:14px;justify-content:space-between;margin-block:24px}.map-node{padding:24px 16px;border:1px solid var(--color-muted);border-radius:18px;flex:1;text-align:center;line-height:1.5}.map-node b{display:block;font-size:21px}.map-line{color:var(--color-accent);font-size:27px}.site-footer{padding-block:65px 25px}.footer-statement{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.04em;font-weight:650;max-width:18ch;line-height:1.1;margin-bottom:38px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--color-rule);padding-top:18px}.footer-bottom p{margin:0;font-size:12px;color:var(--color-muted)}.footer-links{display:flex;gap:22px;flex-wrap:wrap}.page-intro{padding-top:75px;padding-bottom:45px}.page-intro h1{font-size:clamp(3.3rem,6vw,5.5rem);max-width:14ch;margin-bottom:24px}.page-intro .lead{font-size:20px;max-width:48ch}.page-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:60px;padding-bottom:55px}.side-index{align-self:start;position:sticky;top:24px;border-top:1px solid var(--color-rule);padding-top:18px}.side-index a{display:block;padding:9px 0;font-size:14px;text-decoration:none}.side-index a:hover{text-decoration:underline}.prose h2{font-size:30px;letter-spacing:-.03em;margin:45px 0 18px;scroll-margin-top:30px}.prose h2:first-child{margin-top:0}.prose h3{font-size:21px;margin:28px 0 12px}.prose p,.prose li{font-size:16px}.prose li{padding:3px 0}.prose ul,.prose ol{padding-left:23px}.callout{background:var(--color-blue);padding:25px 28px;border-radius:18px;margin:24px 0}.callout p:last-child{margin-bottom:0}.callout.review{background:var(--color-coral)}.callout.green{background:var(--color-accent)}.contact-card{background:var(--color-accent);padding:30px;border-radius:22px;margin-bottom:32px}.contact-card h2{font-size:27px;margin:0 0 14px}.contact-card p{margin-bottom:14px}.email-address{overflow-wrap:anywhere;font-size:15px}.faq details{border-top:1px solid var(--color-rule)}.faq details:last-child{border-bottom:1px solid var(--color-rule)}.faq summary{padding:22px 35px 22px 0;position:relative;cursor:pointer;list-style:none;font-size:18px;font-weight:650;line-height:1.4}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';position:absolute;right:6px;top:20px;font-size:23px;font-weight:400}.faq details[open] summary:after{content:'−'}.faq details>p,.faq details>div{padding:0 28px 20px 0;margin-bottom:0}.release-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:30px}.release-option{background:var(--color-blue);border-radius:24px;padding:35px}.release-option:nth-child(2){background:var(--color-coral)}.release-option h2{font-size:33px;margin:18px 0}.release-option .status{font-size:12px;font-weight:650;padding:5px 10px;background:var(--color-surface);border-radius:var(--radius-pill);display:inline-block}.release-option p{font-size:16px}.release-option ul{padding-left:20px;font-size:14px}.privacy-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:30px}.privacy-facts div{padding:23px;border-top:3px solid var(--color-ink);background:var(--color-paper-2)}.privacy-facts h2{font-size:24px;margin:0 0 15px}.privacy-facts p{margin:0;font-size:15px}.prose table{border-collapse:collapse;width:100%;font-size:14px}.prose th,.prose td{text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid var(--color-rule)}.prose th:first-child,.prose td:first-child{padding-left:0;width:35%}.prose th{font-size:13px}.prose .privacy-right{border-left:3px solid var(--site-purple);padding-left:20px}.no-js-demo{padding:24px;background:var(--color-coral)}
@media(max-width:960px){.nav-links{gap:18px}.nav-account{display:none}.demo-slide{padding:36px;gap:20px}.demo-stage{height:390px}.shape-circle{width:135px;height:135px}.shape-square{width:145px;height:135px}.shape-note{width:130px;height:130px}.stage{grid-template-columns:45px minmax(0,1fr);gap:20px}.stage-aside{grid-column:2}.page-grid{grid-template-columns:190px minmax(0,1fr);gap:35px}.section-intro{gap:30px}.tool-list{gap:35px}.local-band .wrap{gap:30px}}
@media(max-width:700px){.site-header{padding-block:14px}.nav-links{display:none}.mobile-nav{display:block;position:relative}.mobile-nav summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;list-style:none;border:1px solid var(--color-rule);border-radius:var(--radius-pill);padding-inline:18px}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav nav{position:absolute;right:0;top:52px;width:220px;z-index:var(--z-toolbar);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:18px;padding:12px;box-shadow:var(--site-shadow)}.mobile-nav nav a{display:block;padding:10px;font-size:15px;text-decoration:none}.brand img{width:147px}.hero{padding-top:45px}.hero .lead{font-size:18px}.hero .actions{gap:14px}.hero-note{font-size:12px;margin-bottom:24px}.demo-top{align-items:start}.demo-top span{font-size:11px;max-width:130px;text-align:right}.demo-stage{height:390px}.demo-slide{grid-template-columns:minmax(0,1fr);padding:28px;align-content:start;gap:14px}.demo-slide h2{font-size:2.3rem;max-width:12ch;margin-bottom:12px}.demo-slide p{font-size:13px;max-width:27ch}.demo-slide .eyebrow{margin-bottom:12px}.slide-shapes{height:125px;max-width:270px;width:100%;justify-self:end}.shape{font-size:18px}.shape-circle{width:102px;height:102px;left:28%;top:-5px}.shape-square{width:109px;height:92px;bottom:0;left:4%}.shape-note{width:99px;height:99px;top:28px}.demo-controls{gap:8px}.tool{font-size:12px;padding:8px 12px}.tool-set{gap:4px}.swatch{width:44px;min-height:44px;flex-shrink:0;touch-action:manipulation}.demo-help{gap:0}.workflow{padding-top:65px}.section-intro{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:30px}.stage{gap:16px;grid-template-columns:30px minmax(0,1fr);padding-block:28px}.stage-number{font-size:24px}.stage h3{font-size:27px}.tool-list{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:25px 65px}.tool-list h2{max-width:15ch;margin-bottom:15px}.feature-rows div{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}.local-band .wrap{grid-template-columns:minmax(0,1fr);gap:14px}.local-band{padding-block:45px}.local-band h2{max-width:16ch}.site-footer{padding-top:45px}.footer-links{gap:20px}.page-intro{padding-top:45px;padding-bottom:24px}.page-intro .lead{font-size:18px}.page-grid{grid-template-columns:minmax(0,1fr);gap:28px}.side-index{position:static;display:flex;flex-wrap:wrap;gap:0 20px}.side-index a{min-height:44px}.release-options,.privacy-facts{grid-template-columns:minmax(0,1fr)}.release-option{padding:28px}.contact-card{padding:24px}.callout{padding:22px}.prose th,.prose td{padding:12px 8px;font-size:13px}.prose h2{font-size:28px}.page-intro h1{font-size:3.35rem}.hero h1{font-size:clamp(3.2rem,12.5vw,5.3rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.btn:hover,.btn:active{transform:none}}

/* Compact desktop introduction keeps the demo in reach on laptop screens. */
@media(min-width:701px){.hero{padding-top:44px}.hero h1{max-width:none;font-size:clamp(3.5rem,7vw,6.3rem)}.hero h1 br{display:none}.hero h1 .marked{margin-left:.15em}.hero .lead{font-size:19px}.demo-stage{height:360px}}
.local-band a:focus-visible{outline-color:var(--color-accent)}
.tool:active,.swatch:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.tool:active,.swatch:active{transform:none}}