@font-face{font-family:Pretendard;src:url("assets/fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--paper:#fffdf7;--ink:#19262a;--muted:#67726e;--pink:#df8288;--yellow:#f0da48;--lime:#bfdc52;--tone:var(--pink);--frame:18px;--nav:72px;--sans:Pretendard,"Apple SD Gothic Neo",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);letter-spacing:-.035em}body[data-tone=yellow]{--tone:var(--yellow)}body[data-tone=lime]{--tone:var(--lime)}button,input,textarea{font:inherit;color:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button{border:1px solid #19262a35;background:var(--paper);padding:12px 18px;min-height:44px;font-weight:700}button:hover:not(:disabled){border-color:var(--ink)}:is(a,button,input,textarea):focus-visible{outline:3px solid #4d6e33;outline-offset:4px}a{color:inherit}p{line-height:1.6}h1,h2,h3,p,figure{margin:0}h1,h2,h3{word-break:keep-all;overflow-wrap:anywhere}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#deck{height:calc(100dvh - var(--nav));border:var(--frame) solid var(--tone);overflow:auto;scrollbar-gutter:stable}.slide{display:none;min-height:100%;padding:clamp(32px,4vw,64px);padding-top:86px;gap:28px}.slide.active{display:flex;flex-direction:column}h1{font-size:clamp(48px,6.3vw,92px);font-weight:780;line-height:1.13;letter-spacing:-.065em;max-width:12ch}h2{font-size:clamp(34px,4vw,56px);font-weight:750;line-height:1.25;letter-spacing:-.055em}h3{font-size:28px;line-height:1.25}.muted{color:var(--muted);font-size:16px;margin-bottom:22px}.primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--tone);padding:16px 26px}.brand-signature{position:fixed;top:33px;left:42px;width:80px;height:auto;image-rendering:pixelated;pointer-events:none}.cover .cover-brand{display:flex;gap:32px;align-items:center}.cover-brand img{width:190px;height:auto;image-rendering:pixelated}.cover-brand p{font-size:20px;font-weight:700}.cover.active{padding-top:84px}.cover-grid>*{min-width:0}.cover-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;flex:1}.cover-footer{border-top:1px solid #19262a25;display:flex;align-items:center;justify-content:space-between;padding-top:22px;gap:24px}.cover-footer p{font-size:19px;font-weight:650}body[data-layout=cover] .brand-signature,body[data-layout=statement] .brand-signature{display:none}.statement.active{justify-content:center}.statement h2{font-size:clamp(36px,5vw,76px);line-height:1.45;max-width:20ch}.closing.active{display:grid;grid-template-columns:1.4fr 1fr;align-items:center}.closing h2{font-size:clamp(42px,5vw,76px);line-height:1.3}.closing-art{width:min(100%,310px);justify-self:center;image-rendering:pixelated}mark{color:inherit;background:linear-gradient(transparent 78%,var(--yellow) 78%)}
.mascots{position:relative;width:100%;height:340px;max-width:450px;justify-self:center}.mascot{position:absolute;border:0!important;background:transparent;padding:0;width:70%;aspect-ratio:1;clip-path:inset(24% 0 0);-webkit-tap-highlight-color:transparent}.mascot>span,.mascot i{display:block;width:100%;height:100%}.mascot>span{animation:stride 1.2s ease-in-out infinite}.mascot i{background-image:url("assets/mascots/workshop-run.png");background-repeat:no-repeat;background-size:800% 200%;animation:run 2.4s steps(1,end) infinite;image-rendering:pixelated}.didi{left:0;bottom:-8%}.bandi{width:59%;right:0;top:-12%}.bandi i{background-position-y:100%;scale:-1 1;animation-delay:-.8s}.mascot:is(:hover,:focus-visible,:active)>span{animation:shiver .1s linear infinite}.mascot:is(:hover,:focus-visible,:active) i{animation-play-state:paused}.pixel{position:absolute;display:block;width:32px;height:32px}.pixel.pink{background:var(--pink);top:15%;left:12%}.pixel.yellow{background:var(--yellow);right:3%;bottom:5%;width:48px;height:48px}.slide:not(.active) .mascot *{animation-play-state:paused}
@keyframes run{0%{background-position-x:0}12.5%{background-position-x:14.285714%}25%{background-position-x:28.571429%}37.5%{background-position-x:42.857143%}50%{background-position-x:57.142857%}62.5%{background-position-x:71.428571%}75%{background-position-x:85.714286%}87.5%,100%{background-position-x:100%}}@keyframes stride{0%,100%{transform:translateY(1px)}50%{transform:translateY(-5px)}}@keyframes shiver{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;flex:1;align-items:stretch;min-height:290px}.specimen{border:1px solid #19262a30;display:flex;flex-direction:column;min-width:0}.specimen figcaption{padding:12px 20px;font-size:18px;font-weight:700;border-bottom:1px solid #19262a20}.mini-app{display:grid;grid-template-columns:85px 1fr;flex:1;font-size:15px;background:#f2efe5}.mini-app aside{padding:24px 12px;background:#e1e0d6;line-height:2.6}.mini-app>div{padding:28px 22px}.mini-app h3{font-size:25px;margin:18px 0}.mini-app p{color:var(--muted)}.mini-stats{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.mini-stats span{border:1px solid #19262a20;padding:8px}.large-app{padding:30px;display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:24px}.large-app strong{font-size:clamp(62px,7vw,110px);font-weight:750}.after{border-bottom:6px solid var(--lime)}.demo-tabs{display:flex;gap:12px}.demo-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}.demo-panel{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:1;padding:26px 0}.draw-panel{align-items:center;justify-content:center}.draw-panel output{font-size:clamp(72px,10vw,140px);font-weight:750;line-height:1.2}input{width:86px;padding:10px;border:1px solid #19262a40;background:var(--paper);font-size:20px}label{font-size:21px}textarea{width:100%;min-height:150px;font-size:24px;line-height:1.6;padding:18px;border:1px solid #19262a40;background:var(--paper);resize:vertical}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.resource-card{border:1px solid #19262a30;text-decoration:none;background:white;display:grid;grid-template-rows:230px auto}.resource-card img{height:100%;width:100%;object-fit:contain;padding:26px;background:#f2efe5;image-rendering:pixelated}.resource-card div{padding:24px}.resource-card h3{font-size:28px;margin-bottom:14px}.resource-card p{font-size:19px;color:var(--muted)}.resource-card:hover{border-color:var(--ink)}
.deck-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav);background:var(--paper);border-top:1px solid #19262a25;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 30px;z-index:30}.deck-nav>button{border:0;background:transparent;justify-self:start}.deck-nav>button:last-child{justify-self:end}.toc-anchor{position:relative}#toc-toggle{border:0;display:grid;gap:4px;text-align:center;background:transparent;min-width:180px;padding:8px 16px}#toc-toggle b{font-size:17px}#toc-toggle span{font-size:12px;color:var(--muted)}#contents{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:min(360px,calc(100vw - 28px));max-height:min(60dvh,460px);overflow:auto;border:1px solid #19262a30;box-shadow:5px 5px 0 var(--tone);background:var(--paper);padding:10px}#contents button{display:block;width:100%;border:0;text-align:left;font-size:16px}#contents button[aria-current=page]{background:var(--tone)}.progress{position:fixed;left:0;bottom:0;right:0;height:3px;z-index:31;pointer-events:none}.progress i{display:block;background:var(--tone);height:100%;transform-origin:left}.timer{position:fixed;top:27px;left:27px;z-index:40;background:var(--paper);border:1px solid #19262a25;box-shadow:0 3px 12px #19262a0a}body:has(.timer:not([hidden])) .brand-signature{left:152px}.timer button{border:0;background:transparent}.timer #timer-toggle{padding:7px 12px;font-size:18px}.timer #timer-toggle span{font-size:10px;color:var(--muted)}#timer-controls{display:flex;padding:0 4px 4px;gap:4px}#timer-controls button{padding:6px 9px;font-size:13px}
@media(max-height:800px) and (min-width:801px){.slide{gap:20px;padding-top:74px;padding-bottom:30px}.cover.active{padding-top:84px}.cover-brand img{width:145px}h1{font-size:clamp(42px,5vw,68px)}.mascots{height:260px}.resource-card{grid-template-rows:170px auto}.resource-card div{padding:18px}.compare-grid{min-height:250px}.large-app{gap:14px}.mini-app>div{padding:18px}.mini-app h3{margin:12px 0}}
@media(max-width:800px){:root{--frame:12px;--nav:68px}.slide{padding:80px 26px 32px;gap:24px}h1{font-size:clamp(40px,8vw,68px);max-width:14ch}.cover.active{padding-top:72px}.cover-grid{grid-template-columns:1fr;gap:12px}.cover-brand{gap:20px!important}.cover-brand img{width:125px}.cover-brand p{font-size:16px}.mascots{height:180px;width:260px}.cover-footer p{font-size:16px}.cover-footer button{padding:12px 18px}.compare-grid{grid-template-columns:1fr}.specimen{min-height:300px}.resource-grid{grid-template-columns:1fr}.closing.active{grid-template-columns:1fr;gap:28px}.closing-art{width:190px}.deck-nav{padding:0 8px}.deck-nav>button{padding:10px}#toc-toggle{min-width:155px}.brand-signature{top:28px;left:28px;width:70px}.timer{top:18px;left:18px}.mini-app{grid-template-columns:65px 1fr}.mini-app>div{padding:24px 16px}}
@media(max-width:420px){.slide{padding-inline:20px}h1{font-size:42px}h2{font-size:34px}.cover-brand p{max-width:none;font-size:14px;word-break:keep-all}.cover-footer{gap:14px}.cover-footer button{font-size:15px}.mascots{height:150px;width:235px}.deck-nav>button span{display:none}.statement h2{font-size:36px}.closing h2{font-size:40px}.mini-stats{gap:5px}.mini-stats span{padding:5px}.mini-app p{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body[data-mascots=off] .cover-grid{display:flex;align-items:center}body[data-mascots=off] .cover-grid>div:first-child{width:100%}body[data-mascots=off] .cover h1{max-width:17ch}body[data-mascots=off] .closing.active{display:flex;justify-content:center}body[data-mascots=off] .closing h2{max-width:20ch}

.workshop-tooltip{position:fixed;z-index:90;pointer-events:none;max-width:min(320px,calc(100vw - 24px));padding:10px 14px;background:var(--ink);color:var(--paper);font:15px/1.5 var(--sans);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--yellow);white-space:pre-wrap;overflow-wrap:anywhere}body:not(.is-editing) [data-explain]{cursor:pointer}dialog:not(#patch-dialog){max-width:min(700px,90vw);border:3px solid var(--pink);padding:30px;background:var(--paper);color:var(--ink)}dialog p{margin-bottom:20px}dialog::backdrop{background:#19262a55}
/* Reserve the element's place while its click-to-reveal content is hidden. */
[data-action-hidden="true"]{visibility:hidden!important;pointer-events:none!important}body:not(.is-editing) [data-click-action]{cursor:pointer}
:is([data-click-action],[data-explain]):focus-visible{outline:3px solid #4d6e33;outline-offset:4px}
:root{--paper:#fff}