/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * genre: playful · macrostructure: Interactive Workshop Poster · theme: custom soft neo brutalism
 * display/body: Paperlogy · axes: light / display-heavy / warm · nav: N2 · footer: Ft2 */
html.landing-mode,html.landing-mode body{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}
.landing-mode #viewport{visibility:hidden;pointer-events:none}.landing-mode #landing{display:block}#landing{display:none}#landing *{box-sizing:border-box}#landing h1,#landing h2,#landing h3{font-family:var(--font-display);font-weight:800;font-style:normal;overflow-wrap:anywhere;min-width:0}#landing a{text-decoration:none}#landing button,#landing a{touch-action:manipulation}#landing :is(a,button,summary):focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}#landing button:disabled{opacity:.55;cursor:not-allowed}#landing button[aria-busy=true]{cursor:wait}
.landing-wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.landing-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-lg)}.landing-logo{font-size:var(--text-lg);font-weight:800;letter-spacing:-.8px;display:flex;gap:var(--space-xs);align-items:center;line-height:1.2;white-space:nowrap}.logo-mark{width:36px;height:36px;border:2px solid var(--color-ink);background:var(--color-mint);border-radius:10px;display:grid;place-items:center;box-shadow:2px 2px 0 var(--color-ink)}.logo-mark svg{width:24px;height:24px}.landing-nav-right{display:flex;align-items:center;gap:var(--space-md)}.landing-nav-right>a{font-size:var(--text-sm);white-space:nowrap}.landing-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);min-height:56px;border:2px solid var(--color-ink);border-radius:var(--radius-button);background:var(--color-accent);color:var(--color-accent-ink);font-size:var(--text-md);font-weight:800;line-height:1;white-space:nowrap;box-shadow:4px 4px 0 var(--color-ink);transition:transform var(--dur-short) var(--ease-out)}.landing-cta:hover{transform:translateY(-3px);background:var(--color-accent)}.landing-cta:active{transform:translate(3px,3px)}.landing-cta.small{min-height:44px;font-size:var(--text-sm);padding:var(--space-xs) var(--space-sm);gap:var(--space-sm)}.landing-cta.light{background:var(--color-surface)}.landing-cta span{font-size:var(--text-lg)}
.landing-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-xl);align-items:center;padding-block:var(--space-xl) var(--space-2xl)}.hero-kicker{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-xs);font-weight:800;letter-spacing:1px;border:1.5px solid var(--color-ink);border-radius:7px;padding:var(--space-2xs) var(--space-xs);margin-bottom:var(--space-md);background:var(--color-surface);transform:rotate(-2deg)}.hero-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--color-focus)}.landing-hero h1{font-size:clamp(42px,4.8vw,66px);line-height:1.17;letter-spacing:-2.8px;margin:0 0 var(--space-md)}.hero-highlight{display:inline-block;position:relative;z-index:0}.hero-highlight:after{content:'';position:absolute;left:0;right:0;bottom:5px;height:17px;z-index:-1;background:var(--color-accent);border-radius:3px;transform:rotate(-1deg)}.hero-lede{font-size:var(--text-md);color:var(--color-muted);line-height:1.9;word-break:keep-all;margin-bottom:var(--space-lg)!important}.hero-actions{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.hero-secondary{font-size:var(--text-sm);border-bottom:1.5px solid var(--color-ink);padding-block:var(--space-2xs);white-space:nowrap}.hero-footnote{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-md)!important;line-height:1.8}
.hero-playground{position:relative;min-height:418px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--space-lg);background-color:var(--color-mint);background-image:linear-gradient(var(--color-grid) 1px,var(--color-transparent) 1px),linear-gradient(90deg,var(--color-grid) 1px,var(--color-transparent) 1px);background-size:28px 28px;border:2px solid var(--color-ink);border-radius:32px;box-shadow:7px 7px 0 var(--color-ink);transform:rotate(1.5deg)}.playground-label{align-self:flex-start;font-size:var(--text-xs);font-weight:800;letter-spacing:1px}.demo-desk{position:relative;width:100%;height:245px;display:grid;place-items:center}.hero-robot{width:220px;height:210px;filter:drop-shadow(5px 5px 0 var(--color-ink));overflow:visible}.robot-body{fill:var(--color-surface);stroke:var(--color-ink);stroke-width:3;stroke-linejoin:round}.robot-side{fill:var(--color-lilac);stroke:var(--color-ink);stroke-width:3;stroke-linejoin:round}.robot-top{fill:var(--color-butter);stroke:var(--color-ink);stroke-width:3;stroke-linejoin:round}.robot-face{fill:none;stroke:var(--color-ink);stroke-width:5;stroke-linecap:round}.robot-eye{fill:var(--color-ink)}.robot-blush{fill:var(--color-accent)}.sample-card{position:absolute;width:91px;height:112px;padding:var(--space-2xs);border:2px solid var(--color-ink);border-radius:12px;background:var(--color-surface);box-shadow:3px 3px 0 var(--color-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);font-size:var(--text-xs);font-weight:800}.sample-card svg{width:49px;height:49px}.sample-card.pencil{left:-3px;top:26px;transform:rotate(-12deg)}.sample-card.cup{right:-5px;top:72px;transform:rotate(10deg)}.demo-stamp{position:absolute;right:5px;top:1px;font-size:var(--text-xs);background:var(--color-butter);padding:var(--space-2xs) var(--space-xs);border:2px solid var(--color-ink);border-radius:7px;transform:rotate(-6deg);font-weight:800}.demo-console{width:100%;background:var(--color-surface);border:2px solid var(--color-ink);border-radius:12px;padding:var(--space-sm);transform:rotate(-1.5deg)}.demo-console-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs);font-size:var(--text-xs)}.demo-console-top small{font-size:10px;color:var(--color-muted)}.demo-choices{display:flex;align-items:center;gap:var(--space-2xs)}#landing .demo-choice{min-height:38px;flex:1;border:1.5px solid var(--color-ink);border-radius:7px;box-shadow:none;background:var(--color-paper);font-size:var(--text-xs);padding:var(--space-2xs);transition:background var(--dur-short)}#landing .demo-choice:hover,#landing .demo-choice[aria-pressed=true]{background:var(--color-accent)}#landing .demo-choice:active{transform:translateY(1px)}.demo-answer{font-size:var(--text-sm);line-height:1.5;margin-top:var(--space-xs)!important;font-weight:800;min-height:21px}.demo-disclaimer{font-size:10px;color:var(--color-muted);margin-top:var(--space-2xs)!important;line-height:1.5}
.intro-ribbon{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-md);border-block:2px solid var(--color-ink);background:var(--color-surface);font-size:var(--text-sm);font-weight:800}.intro-ribbon span{display:flex;align-items:center;gap:var(--space-xs)}.intro-ribbon b{font-size:var(--text-lg);font-weight:500;color:var(--color-muted)}
.workshop-tour{padding-block:var(--space-2xl)}.tour-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg)}.section-title{font-size:clamp(28px,3.2vw,40px);line-height:1.3;letter-spacing:-1.5px}.tour-heading>p{font-size:var(--text-sm);color:var(--color-muted);line-height:1.8;max-width:340px;word-break:keep-all}.tour-sheet{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border:2px solid var(--color-ink);border-radius:var(--radius-card);box-shadow:5px 5px 0 var(--color-ink);overflow:clip;background:var(--color-surface)}.tour-preview{background:var(--color-lilac);padding:var(--space-lg);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-md);border-right:2px solid var(--color-ink)}.tour-preview>p{font-size:var(--text-xs);font-weight:800}.picture-pair{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding-block:var(--space-sm)}.picture-tile{width:126px;aspect-ratio:1;background:var(--color-surface);border:2px solid var(--color-ink);border-radius:16px;box-shadow:3px 3px 0 var(--color-ink);padding:var(--space-md);transform:rotate(-7deg)}.picture-tile:last-child{transform:rotate(7deg);background:var(--color-butter)}.picture-tile svg{width:100%;height:100%}.preview-caption{font-size:var(--text-sm);line-height:1.8;text-align:center}.preview-caption strong{font-weight:800}.tour-steps{padding:var(--space-2xs) var(--space-lg)}.tour-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-md);border-bottom:1px solid color-mix(in srgb,var(--color-ink) 22%,var(--color-transparent))}.tour-step:last-child{border-bottom:0}.tour-step .number{font-weight:800;font-size:var(--text-sm);width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--color-ink);border-radius:50%;background:var(--color-paper)}.tour-step h3{font-size:var(--text-lg);margin-bottom:var(--space-2xs)!important}.tour-step p{font-size:var(--text-sm);color:var(--color-muted);line-height:1.8;word-break:keep-all}
.activity-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:var(--space-2xl);padding-block:var(--space-sm) var(--space-2xl)}.activity-section .section-title{margin-bottom:var(--space-md)!important}.activity-section p{font-size:var(--text-md);line-height:1.9;color:var(--color-muted);word-break:keep-all}.activity-tags{display:flex;gap:var(--space-2xs);flex-wrap:wrap;margin-top:var(--space-md)}.activity-tags span{font-size:var(--text-xs);border:1.5px solid var(--color-ink);border-radius:6px;padding:var(--space-2xs) var(--space-xs);background:var(--color-surface)}.activity-ticket{background:var(--color-butter);border:2px solid var(--color-ink);border-radius:var(--radius-card);padding:var(--space-lg);box-shadow:5px 5px 0 var(--color-ink);transform:rotate(-2deg)}.ticket-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);font-weight:800;padding-bottom:var(--space-md);border-bottom:2px dashed var(--color-ink)}.ticket-top span{font-size:var(--text-xl)}.activity-ticket h3{font-size:var(--text-xl);line-height:1.4;margin-block:var(--space-md)!important;letter-spacing:-.8px}.activity-ticket p{font-size:var(--text-sm);color:var(--color-ink)}
.landing-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-xl);padding-block:var(--space-xl);border-top:2px solid var(--color-ink)}.faq-list details{border-bottom:1px solid color-mix(in srgb,var(--color-ink) 25%,var(--color-transparent));padding:var(--space-md) 0}.faq-list details:first-child{padding-top:0}.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);font-size:var(--text-md);font-weight:800;line-height:1.7}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'＋';font-size:var(--text-lg);flex-shrink:0}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:var(--text-sm);color:var(--color-muted);line-height:1.9;margin-top:var(--space-sm)!important;word-break:keep-all}
.landing-bottom{padding-block:var(--space-xl) var(--space-2xl);display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg)}.landing-bottom h2{font-size:clamp(26px,3vw,36px);line-height:1.4;letter-spacing:-1px}.landing-footer{border-top:2px solid var(--color-ink);background:var(--color-mint);padding-block:var(--space-lg)}.landing-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;font-size:var(--text-xs)}.landing-footer a{white-space:nowrap}.landing-footer p{line-height:1.8}.landing-footer-links{display:flex;align-items:center;gap:var(--space-md)}.landing-feedback{position:fixed;inset:auto var(--space-md) var(--space-md);max-width:540px;margin-inline:auto;padding:var(--space-sm);border:2px solid var(--color-ink);border-radius:var(--radius-button);background:var(--color-surface);color:var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);z-index:100;font-size:var(--text-sm);line-height:1.7}.landing-feedback:empty{display:none}
@media(min-width:1500px){.landing-hero{padding-block:var(--space-2xl) var(--space-3xl)}}
@media(max-width:1000px){.landing-wrap{width:calc(100% - 64px)}.landing-hero{gap:var(--space-lg)}.landing-hero h1{font-size:48px;letter-spacing:-2px}.hero-playground{padding:var(--space-md)}.sample-card{width:76px;height:95px}.sample-card.pencil{left:-8px}.sample-card.cup{right:-8px}.activity-section{gap:var(--space-xl)}.intro-ribbon{gap:var(--space-md)}}
@media(max-width:760px){.landing-wrap{width:calc(100% - 40px)}.landing-nav{padding-block:var(--space-md)}.landing-logo{font-size:var(--text-md);gap:var(--space-2xs)}.landing-nav-right>a{display:none}.landing-hero{grid-template-columns:minmax(0,1fr);padding-block:var(--space-lg) var(--space-xl);gap:var(--space-xl)}.landing-hero h1{font-size:clamp(40px,8.5vw,60px)}.hero-lede{font-size:var(--text-sm);max-width:46ch}.hero-playground{width:min(480px,100%);justify-self:center;min-height:400px}.sample-card{width:91px;height:112px}.sample-card.pencil{left:0}.sample-card.cup{right:0}.hero-footnote{font-size:11px}.intro-ribbon{gap:var(--space-sm);flex-wrap:wrap;font-size:var(--text-xs);padding:var(--space-sm)}.intro-ribbon b{display:none}.tour-heading{flex-direction:column;align-items:start;gap:var(--space-sm)}.tour-heading>p{max-width:none}.workshop-tour{padding-block:var(--space-xl)}.tour-sheet{grid-template-columns:minmax(0,1fr)}.tour-preview{border-right:0;border-bottom:2px solid var(--color-ink);padding:var(--space-md)}.picture-pair{padding:var(--space-sm)}.tour-steps{padding-inline:var(--space-md)}.activity-section{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding-bottom:var(--space-xl)}.activity-ticket{margin-inline:var(--space-3xs)}.landing-faq{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-lg)}.landing-bottom{align-items:start;flex-direction:column;padding-block:var(--space-lg) var(--space-xl)}.landing-footer-inner{align-items:start;gap:var(--space-sm)}.landing-footer-links{flex-wrap:wrap;gap:var(--space-sm)}}
@media(max-width:360px){.landing-wrap{width:calc(100% - 32px)}.landing-logo{font-size:var(--text-sm)}.logo-mark{width:30px;height:30px}.landing-cta.small{font-size:var(--text-xs);padding-inline:var(--space-xs)}.landing-hero h1{font-size:38px;letter-spacing:-1.8px}.hero-actions{gap:var(--space-sm)}.hero-playground{padding:var(--space-sm);min-height:380px}.sample-card{width:73px;height:94px}.sample-card svg{width:40px;height:40px}.hero-robot{width:182px}.demo-console{padding:var(--space-xs)}.demo-console-top{gap:var(--space-3xs)}.demo-console-top small{font-size:9px}.demo-stamp{right:0}.section-title{font-size:28px}}
@media(prefers-reduced-motion:reduce){#landing *,#landing *:before,#landing *:after{scroll-behavior:auto;transition:none!important;animation:none!important}.landing-cta:hover,.landing-cta:active{transform:none}}
/* Reference refinement: illustrated course card on warm graph paper. */
html.landing-mode body{background-color:var(--color-paper);background-image:linear-gradient(var(--color-grid) 1px,var(--color-transparent) 1px),linear-gradient(90deg,var(--color-grid) 1px,var(--color-transparent) 1px);background-size:24px 24px}
.landing-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-xl);padding-block:var(--space-md) var(--space-2xl)}
.landing-hero h1{font-size:clamp(40px,4vw,56px);letter-spacing:-2px}.hero-lede{font-size:var(--text-sm)}
.landing-cta,.landing-cta:hover,#landing .demo-choice[aria-pressed=true]{background:var(--color-button)}.hero-highlight:after{background:var(--color-butter)}
.learning-card{border:2px solid var(--color-ink);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:7px 8px 0 var(--color-ink);overflow:clip;min-width:0}
.learning-card-cover{position:relative;border-bottom:2px solid var(--color-ink)}.learning-card-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}.learning-card-level{position:absolute;right:var(--space-sm);top:var(--space-sm);background:var(--color-focus);color:var(--color-surface);border-radius:20px;padding:var(--space-2xs) var(--space-xs);font-size:var(--text-xs);font-weight:800}
.learning-card-body{padding:var(--space-md)}.learning-card-tags{display:flex;gap:var(--space-2xs);align-items:center;margin-bottom:var(--space-sm);flex-wrap:wrap}.learning-card-tags span{font-size:11px;padding:var(--space-3xs) var(--space-2xs);background:var(--color-mint);color:var(--color-focus);border:1px solid color-mix(in srgb,var(--color-focus) 50%,var(--color-transparent));border-radius:20px}.learning-card-tags span:last-child{background:var(--color-butter);color:var(--color-ink);border-color:color-mix(in srgb,var(--color-ink) 25%,var(--color-transparent))}.learning-card-body h2{font-size:24px;letter-spacing:-1px;margin-bottom:var(--space-sm)!important;line-height:1.3}.learning-card-body>p{font-size:var(--text-sm);line-height:1.9;color:var(--color-muted);word-break:keep-all}.learning-card-body ul{padding-left:18px;margin-block:var(--space-sm) var(--space-md);font-size:var(--text-xs);line-height:1.9;color:var(--color-muted)}.learning-card-bottom{border-top:1px dashed color-mix(in srgb,var(--color-ink) 45%,var(--color-transparent));padding-top:var(--space-sm);display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}.learning-card-bottom>span{font-size:11px;line-height:1.6;color:var(--color-muted)}.landing-nav{padding-block:var(--space-md) var(--space-lg)}
@media(max-width:1000px) and (min-width:761px){.landing-hero{gap:var(--space-lg)}.landing-hero h1{font-size:40px}.hero-actions{gap:var(--space-sm)}.hero-actions .landing-cta{min-height:48px;font-size:var(--text-sm);padding-inline:var(--space-sm)}.hero-secondary{font-size:var(--text-xs)}.learning-card-body{padding:var(--space-sm)}.learning-card-body h2{font-size:22px}}
@media(max-width:760px){.landing-hero{grid-template-columns:minmax(0,1fr);padding-block:var(--space-md) var(--space-xl);gap:var(--space-lg)}.hero-copy h1{font-size:clamp(38px,8vw,56px)}.hero-copy .hero-kicker{margin-bottom:var(--space-sm)}.hero-copy .hero-lede{margin-bottom:var(--space-md)!important}.hero-copy h1 br:nth-child(2){display:none}.hero-actions .landing-cta{min-height:48px}.hero-footnote{margin-top:var(--space-sm)!important}.learning-card{width:min(560px,100%);justify-self:center}.learning-card-body{padding:var(--space-md)}.learning-card-bottom{gap:var(--space-xs)}.learning-card-level{top:var(--space-xs);right:var(--space-xs);font-size:10px}}
@media(max-width:360px){.learning-card-body{padding:var(--space-sm)}.learning-card-bottom>span{font-size:10px}.learning-card-body h2{font-size:22px}}
/* Main illustration is the opening scene; one action, no description card. */
.landing-hero.artwork-hero{position:relative;display:block;width:100vw;max-width:none;left:50%;margin-left:-50vw;padding:0;aspect-ratio:1200/630;min-height:0;overflow:clip;background:var(--color-mint)}
.hero-background{display:block;width:100%;height:100%;object-fit:cover}
.hero-start{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-xl) var(--space-sm) var(--space-md);background:linear-gradient(var(--color-transparent),color-mix(in srgb,var(--color-ink) 85%,var(--color-transparent)));color:var(--color-surface)}
.hero-start .landing-cta{min-width:220px;min-height:60px;font-size:var(--text-lg);box-shadow:4px 4px 0 var(--color-ink)}
.hero-start p{font-size:var(--text-xs);line-height:1.6;text-align:center;word-break:keep-all}
.landing-nav-right>a{display:block}
@media(min-width:1500px){.landing-hero.artwork-hero{max-height:780px;aspect-ratio:auto;height:calc(100svh - 88px)}.hero-background{object-position:center}}
@media(max-width:760px){.landing-nav{padding-block:var(--space-sm)}.landing-nav-right>a{font-size:11px}.landing-hero.artwork-hero{aspect-ratio:auto;overflow:visible}.hero-background{height:auto;aspect-ratio:1200/630;object-fit:contain}.hero-start{position:static;padding:var(--space-md) var(--space-sm);background:var(--color-paper);color:var(--color-ink);gap:var(--space-sm);border-bottom:2px solid var(--color-ink)}.hero-start .landing-cta{min-height:56px;font-size:var(--text-md)}.hero-start p{color:var(--color-muted);font-size:11px}}
@media(max-width:360px){.landing-nav-right>a{font-size:10px}.landing-logo{font-size:var(--text-xs);gap:var(--space-2xs)}.logo-mark{width:28px;height:28px}}