:root{--paper:#f9f7f0;--ink:#202420;--muted:#616761;--blue:#488de0;--pink:#f8bbc7;--line:#d9dcd3;--white:#fff;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:5px}a{color:inherit}button{cursor:pointer}img,video{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.1;letter-spacing:-.045em}h1{font-size:clamp(3.6rem,7vw,6.4rem);font-weight:800;margin-bottom:26px}h1 span{color:var(--blue)}h2{font-size:clamp(2.2rem,4.5vw,3.8rem);margin-bottom:25px}h3{font-size:1.45rem;margin-bottom:16px}p{color:var(--muted)}.section{max-width:1260px;margin:auto;padding:95px 54px}.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 4.2%;background:rgba(249,247,240,.97);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-size:1.45rem;font-weight:800;text-decoration:none;letter-spacing:-.055em}.brand img{border-radius:9px}.version{font-size:.65rem;letter-spacing:0;border:1px solid var(--line);padding:2px 6px;border-radius:5px;align-self:flex-start}.header nav,.header-actions{display:flex;align-items:center;gap:25px}.header nav a{font-size:.9rem;text-decoration:none}.header nav a:hover,.text-link:hover{color:var(--blue)}.lang{background:transparent;border:0;padding:8px;font-size:.85rem;font-weight:bold}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 23px;gap:9px;border-radius:100px;background:var(--ink);color:white;text-decoration:none;border:1px solid var(--ink);font-size:.9rem;font-weight:700;line-height:1.4;transition:transform .2s,background .2s}.button:hover{background:#3c423c;transform:translateY(-2px)}.button.small{padding:10px 16px;font-size:.8rem}.button.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.button:disabled{opacity:.5;cursor:wait;transform:none}.text-link{font-weight:700;text-underline-offset:6px;background:none;border:0;padding:0}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;padding-top:72px;padding-bottom:70px}.eyebrow{display:flex;gap:8px;align-items:center;font-size:.7rem;letter-spacing:.13em;font-weight:800;margin-bottom:25px}.live-dot{height:8px;width:8px;border-radius:50%;background:var(--blue)}.lead{font-size:1.08rem;max-width:460px}.hero-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:30px 0 18px}.tiny{font-size:.76rem;line-height:1.7}.hero-art{position:relative;min-height:490px;border-radius:48% 48% 30% 30%;background:#eee9dd}.hero-art svg{width:100%;display:block}.art-note{position:absolute;left:26px;top:23px;font-size:.82rem;line-height:1.3;font-style:italic;transform:rotate(-7deg)}.art-label{display:block;text-align:center;font-size:.74rem;position:relative;margin-top:-30px}.motion-toggle{display:block;margin:18px auto;background:none;border:0;text-decoration:underline;font-size:.68rem;color:var(--muted)}.flower{transform-origin:315px 270px;animation:sway 3.4s ease-in-out infinite}.spark{animation:pulse 3s ease-in-out infinite}.doodle{stroke:var(--blue);stroke-width:7;stroke-linecap:round;fill:none;stroke-dasharray:8 15}.motion-paused *{animation-play-state:paused!important}.ticker{padding:23px 4%;display:flex;justify-content:space-around;align-items:center;gap:20px;background:var(--blue);color:var(--ink);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;overflow:hidden}.star{font-size:2rem}.intro{display:grid;grid-template-columns:1fr 1.15fr;gap:75px;align-items:center}.intro p{max-width:420px}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.chips span{padding:5px 12px;border:1px solid var(--line);border-radius:30px;font-size:.75rem}.demo-video{margin:0;border-radius:22px;overflow:hidden;background:#e5e4db;padding:13px}.demo-video video{display:block;width:100%;border-radius:13px}.demo-video figcaption{text-align:center;font-size:.7rem;padding:12px 0 3px;color:var(--muted)}.gallery-section{border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.section-heading p{max-width:390px;font-size:.93rem}.filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:28px 0}.filter{background:none;border:1px solid var(--line);padding:7px 14px;border-radius:30px;font-size:.8rem}.filter.active{background:var(--ink);color:white;border-color:var(--ink)}.filter-row input{margin-left:auto;max-width:230px;border:1px solid var(--line);border-radius:30px;padding:8px 14px;background:transparent;font-size:.8rem}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{padding:0;background:white;text-align:left;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);cursor:pointer}.project-card img,.project-card video{width:100%;aspect-ratio:4/3;object-fit:contain;background:#eeeee8;display:block}.project-card .card-info{padding:20px}.project-card h3{font-size:1.25rem;margin:0 0 10px}.project-card p{font-size:.8rem;margin:0}.badge{display:inline-block;padding:3px 9px;background:#e9f1fb;border-radius:30px;font-size:.65rem;margin-top:10px}.gallery-empty{text-align:center;border:1px dashed #c2c8bc;border-radius:var(--radius);padding:40px 25px;background:#f0f1e9}.gallery-empty p{max-width:520px;margin:0 auto 18px;font-size:.9rem}.empty-sketch{font-size:3.5rem;color:var(--blue);letter-spacing:15px}.featured{margin-top:35px;border-radius:var(--radius);background:var(--pink);padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:30px}.featured img,.featured video{width:100%;max-height:300px;object-fit:contain;border-radius:14px}.challenge{max-width:none;background:var(--blue);display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-left:max(54px,calc((100vw - 1152px)/2));padding-right:max(54px,calc((100vw - 1152px)/2));overflow:hidden}.challenge p{max-width:480px;color:#17365c}.challenge-art{position:relative;display:flex;align-items:center;justify-content:center;gap:15px}.banana{font-size:150px;display:inline-block;transform:rotate(-20deg);animation:banana 3s ease-in-out infinite}.cup{font-size:115px;display:inline-block;animation:sway 2s ease-in-out infinite}.music{font-size:70px;position:absolute;top:15%;left:22%}.music.second{top:60%;left:74%;transform:rotate(20deg)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:40px 0 65px}.steps article{border-top:1px solid var(--line);padding-top:25px}.step-number{display:block;font-size:2rem;color:var(--blue);margin-bottom:22px;font-weight:700}.steps p{font-size:.9rem}.starter-heading{display:flex;align-items:start;justify-content:space-between;gap:30px}.starter-heading p{max-width:570px;font-size:.85rem}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}.starter-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;background:white;transition:transform .2s}.starter-card:hover{transform:translateY(-4px)}.starter-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f1f0e8}.starter-card span{padding:18px 20px 0;font-size:1rem;font-weight:700}.starter-card small{padding:8px 20px 22px;color:var(--muted);font-size:.73rem}.faq{margin-top:45px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{font-weight:700;cursor:pointer}.faq p{max-width:750px;margin:20px 0 0;font-size:.9rem}.submit-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;border-top:1px solid var(--line)}.submit-section>div p{max-width:380px}.upload-tips{padding-left:20px;color:var(--muted);font-size:.9rem;max-width:390px}.upload-tips li{padding:8px 0}.form-card{background:white;padding:30px;border:1px solid var(--line);border-radius:var(--radius)}label{display:flex;flex-direction:column;gap:7px;margin-bottom:17px;font-size:.8rem;font-weight:700}input,textarea,select{width:100%;border:1px solid #c9cec5;border-radius:9px;padding:11px;background:#fdfdfb;color:var(--ink);font-size:.9rem}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.file-field{border:1px dashed #bcc8b7;border-radius:10px;padding:15px;margin-bottom:15px;background:#f7f8f3}.file-field label{margin:0;font-weight:400;font-size:.75rem}.file-field input{padding:4px;border:0;background:none;font-size:.75rem}.check{flex-direction:row;align-items:flex-start;font-weight:400;font-size:.75rem;line-height:1.55}.check input{width:17px;height:17px;flex-shrink:0;margin:3px 4px 0 0;accent-color:var(--blue)}.form-card>a{font-size:.75rem}.form-card [role=status]{font-size:.83rem;margin:20px 0}.form-actions{display:flex;align-items:center;gap:16px}.form-actions .text-link{font-size:.75rem}.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}progress{width:100%;accent-color:var(--blue);margin-top:20px}.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:65px;border-top:1px solid var(--line)}.contact-section>div p{max-width:400px}.closing{text-align:center;border-top:1px solid var(--line)}.closing h2{font-size:clamp(3rem,5vw,4.7rem)}.closing .tiny{margin:20px auto 0}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:30px 4%}.footer span,.footer a:not(.brand){font-size:.7rem;color:var(--muted)}.footer div{display:flex;gap:18px}dialog{border:1px solid var(--line);border-radius:25px;padding:35px;width:min(720px,94vw);max-height:90vh;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#20242099}.dialog-close{position:absolute;right:17px;top:8px;border:0;background:transparent;font-size:2rem}.detail-media{width:100%;max-height:400px;object-fit:contain;background:#eeeee8;border-radius:15px;margin-bottom:20px}.detail-description{white-space:pre-wrap}.admin-body{max-width:1050px;margin:40px auto;padding:0 25px}.admin-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.admin-item{padding:25px;border:1px solid var(--line);border-radius:15px;background:white;margin-bottom:15px}.admin-item img,.admin-item video{max-height:230px;max-width:100%;display:block;margin:15px 0}.admin-item p{white-space:pre-wrap;overflow-wrap:anywhere}.admin-item .button{margin:5px 5px 0 0;padding:9px 14px;font-size:.75rem}.admin-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.admin-tabs button{border:1px solid var(--line);background:white;border-radius:30px;padding:10px 18px}.admin-tabs .active{background:var(--ink);color:white}.admin-settings{max-width:700px}.notice{padding:16px;border-radius:12px;background:#fff0cc;color:#554114;font-size:.86rem}.legal-body{max-width:800px;margin:70px auto;padding:0 25px}.legal-body article{white-space:pre-wrap;color:var(--muted)}[hidden]{display:none!important}@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}@keyframes pulse{50%{opacity:.55;transform:translateY(-7px)}}@keyframes banana{50%{transform:translateY(-20px) rotate(7deg)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:1000px){.section{padding:70px 30px}.header{gap:12px}.header nav{gap:15px}.header-actions{gap:8px}.hero{gap:20px}.hero-art{min-height:380px}.intro{gap:35px}.submit-section,.contact-section{gap:35px}.challenge{padding:70px 35px}.banana{font-size:100px}.cup{font-size:85px}.footer span{display:none}.filter-row input{margin-left:0}.hero-buttons{gap:15px}}@media(max-width:720px){.header{flex-wrap:wrap;padding:13px 20px}.brand{font-size:1.25rem}.brand img{width:30px;height:30px}.header nav{order:3;width:100%;justify-content:space-between}.header nav a{font-size:.8rem}.header-actions .button{font-size:.7rem;padding:8px 12px}.section{padding:55px 22px}.hero{grid-template-columns:1fr;padding-top:45px}.hero-art{max-width:500px;width:100%;margin:auto;min-height:0}.art-label{margin-top:-40px}.hero h1{font-size:3.8rem}.hero .tiny{max-width:320px}.ticker{font-size:1rem;gap:15px;white-space:nowrap;justify-content:flex-start}.ticker span:last-child{display:none}.intro,.challenge,.submit-section,.contact-section{grid-template-columns:1fr}.intro{gap:30px}.section-heading,.starter-heading{display:block}.section-heading p{max-width:none}.gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.project-card .card-info{padding:15px}.project-card h3{font-size:1.05rem}.featured{grid-template-columns:1fr}.challenge{padding:55px 22px}.challenge-art{min-height:230px}.steps{grid-template-columns:1fr;gap:15px;margin:30px 0 40px}.steps article{position:relative;padding-left:55px}.step-number{position:absolute;left:0;top:20px;font-size:1.5rem}.steps h3{font-size:1.3rem}.starter-grid{grid-template-columns:1fr;gap:15px}.starter-card{display:grid;grid-template-columns:115px 1fr;grid-template-rows:1fr 1fr;align-items:center}.starter-card img{grid-row:1/3;height:115px;width:115px;object-fit:contain}.starter-card span{padding:10px 15px 0;font-size:.95rem}.starter-card small{padding:5px 15px 10px}.form-card{padding:22px}.form-row{grid-template-columns:1fr;gap:0}.footer{padding:25px 22px;flex-wrap:wrap}.footer div{width:100%}.admin-grid{grid-template-columns:1fr}.admin-header{flex-wrap:wrap}dialog{padding:28px 20px}.filter-row input{max-width:none;width:100%}}@media(max-width:380px){.hero h1{font-size:3.25rem}.gallery-grid{grid-template-columns:1fr}.brand .version{display:none}.art-label{font-size:.65rem}}
.remix-section{padding-bottom:65px}.remix-section .starter-heading h3{font-size:1.1rem}.coming-soon{background:#eeeee5;grid-template-columns:1fr 160px;margin:0}.coming-soon h3{font-size:1.7rem}.coming-soon p{font-size:.9rem;max-width:620px;margin:0}.coming-star{font-size:7rem;color:#a9b7a3;align-self:center;text-align:center}.week-section{padding-top:20px;padding-bottom:50px}@media(max-width:720px){.coming-soon{grid-template-columns:1fr}.coming-star{display:none}.header nav{gap:10px}.header nav a{font-size:.72rem}}
.mini-playground{background:#eee9dd;padding:22px;border-radius:24px}.playground-top{display:flex;justify-content:space-between;font-size:.65rem;font-weight:700;letter-spacing:.08em}.playground-top span:last-child{font-size:1.8rem;line-height:1}.mini-playground svg{width:100%;display:block;touch-action:none;cursor:crosshair;background:var(--paper);border-radius:17px;margin:20px 0}.playground-controls{display:flex;align-items:center;justify-content:center;gap:22px}.playground-controls .text-link{font-size:.8rem}.mini-playground .tiny{text-align:center;margin:15px auto 0;max-width:360px}.mini-playground .illustration-note{opacity:.75;font-size:.65rem}
.task-section{padding-top:45px;padding-bottom:65px}.task-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.task-grid article{border:1px solid var(--line);background:#f0f1e9;border-radius:22px;padding:30px}.task-grid p{font-size:.9rem}.task-symbol{display:block;font-size:3rem;color:var(--blue);line-height:1;margin-bottom:23px}.task-grid .text-link{font-size:.85rem}@media(max-width:720px){.task-grid{grid-template-columns:1fr}.task-grid article{padding:25px}}

.demo-stack{display:grid;gap:20px}.demo-stack .mini-playground{padding:18px}.demo-stack .mini-playground svg{max-height:230px}.demo-stack .playground-top{font-size:.6rem}
/* Quiet presentation centred on the app and its editing workflow. */
:root{--paper:#fafafa;--ink:#252a30;--muted:#626b75;--line:#dfe3e8;--radius:10px;--blue:#447bb8}body{line-height:1.65}.header{background:rgba(250,250,250,.97);padding-top:17px;padding-bottom:17px}.brand{font-weight:650;letter-spacing:-.035em}.section{padding-top:78px;padding-bottom:78px}h1{font-size:clamp(2.8rem,5.2vw,4.5rem);font-weight:600;letter-spacing:-.035em;line-height:1.08}h2{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:550;letter-spacing:-.025em}h3{font-weight:550;letter-spacing:-.015em}.hero{gap:50px;padding-top:70px;padding-bottom:66px;grid-template-columns:1fr 1.12fr}.lead{font-size:1rem;max-width:450px}.eyebrow{font-weight:600;font-size:.7rem;letter-spacing:.11em;color:var(--muted);margin-bottom:20px}.live-dot{display:none}.button{border-radius:7px;font-weight:550;padding:13px 20px;transition:background .2s}.button:hover{transform:none;background:#414b57}.button.small{padding:10px 15px}.hero-buttons{gap:22px}.hero-art{min-height:0;background:transparent;border-radius:0}.hero-art>svg{border:1px solid var(--line);border-radius:9px;background:#e8edf0;box-shadow:0 8px 28px #252a3009}.hero-example{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:15px;font-size:.75rem;color:var(--muted)}.hero-example .motion-toggle{margin:0;font-size:.75rem}.hero-art .illustration-note{font-size:.63rem;margin:8px 0 0;opacity:.8}.workflow-strip{max-width:1152px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem}.intro{gap:65px}.intro .chips span{border-radius:5px;color:var(--muted)}.demo-video{background:#f0f2f4;border-radius:10px;padding:8px}.demo-video video{border-radius:5px}.mini-playground{background:#f1f3f5;border:1px solid var(--line);border-radius:10px}.mini-playground svg{background:white;border:1px solid var(--line);border-radius:5px}.playground-top span:first-child{font-size:.65rem;font-weight:550;line-height:1.5}.starter-card{border-radius:9px;background:white;border:1px solid var(--line);box-shadow:none}.starter-card img{background:white;aspect-ratio:4/3;object-fit:contain}.starter-card span{font-weight:550;font-size:1.1rem}.starter-card:hover{transform:none;box-shadow:none;border-color:#9caabc}.challenge{background:#eef1f4;color:var(--ink);border-radius:0}.challenge h2,.challenge p{color:var(--ink)}.challenge p{color:var(--muted)}.challenge .button.light{background:var(--ink);color:white;border-color:var(--ink)}.challenge-example{border-left:1px solid #cdd5df;padding:25px 40px}.challenge-number{font-size:.8rem;color:var(--blue)}.challenge-example p{font-size:1.1rem;margin:8px 0 27px}.task-grid article{background:white;border-radius:9px}.gallery-empty{border-radius:10px;background:#f2f3f5}.coming-soon{grid-template-columns:1fr;background:#f2f3f5;border-radius:10px;padding:28px}.coming-soon h3{font-size:1.35rem}.form-card{border-radius:10px;box-shadow:none}.closing{border-top:1px solid var(--line)}.closing h2{font-size:2.5rem}.footer .brand{font-size:1.2rem}.step-number{font-size:1.5rem;color:#798897}.text-link{font-weight:550}.notice{background:#eef1f4;color:var(--muted)}
.sheep-travel{transform:translate(100px,0);animation:sheep-crossing 12s linear infinite}.sheep-body{animation:sheep-bob 1.2s ease-in-out infinite}.sheep-leg{transform-box:fill-box;transform-origin:50% 0;animation:sheep-step 1.2s ease-in-out infinite}.sheep-leg.rear{animation-delay:-.6s}@keyframes sheep-crossing{0%{transform:translate(92px,0);opacity:0}5%{opacity:1}95%{opacity:1}100%{transform:translate(545px,0);opacity:0}}@keyframes sheep-step{0%,100%{transform:rotate(-19deg)}50%{transform:rotate(19deg)}}@keyframes sheep-bob{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-2px)}}
@media(max-width:1000px){.workflow-strip{margin:0 35px}.hero{gap:30px}.hero-example{display:block}.hero-example .motion-toggle{margin:10px 0 0}.header nav{gap:14px}}@media(max-width:720px){.section{padding:52px 22px}.hero{grid-template-columns:1fr;padding-top:40px;gap:26px}.hero h1{font-size:3rem}.hero-art{min-height:0}.hero-example{display:flex;flex-wrap:wrap;gap:6px}.hero-example .motion-toggle{margin:0}.workflow-strip{margin:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.8rem}.intro{gap:25px}.challenge-example{border-left:0;border-top:1px solid #cdd5df;padding:25px 0 0}.challenge-example p:last-child{margin-bottom:0}.starter-card{display:block}.starter-card img{width:100%;height:auto;aspect-ratio:4/3}.starter-card span{display:block;padding:17px 20px 3px}.starter-card small{display:block;padding:0 20px 18px}.header nav{gap:10px}.closing h2{font-size:2rem}.coming-soon{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sheep-travel,.sheep-body,.sheep-leg{animation:none}.sheep-travel{transform:translate(300px,0)}}

.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:720px){.starter-grid{grid-template-columns:1fr}}

/* Original DTM logo: blue field, black drawing marks, white space. */
:root{--blue:#4a90e2;--ink:#1f242b;--paper:#fbfcfe;--line:#dbe2eb}.header{background:rgba(251,252,254,.97)}.header .brand img{width:44px;height:44px;border-radius:6px}.hero-brand{display:flex;align-items:center;gap:15px;margin-bottom:28px}.hero-brand img{border-radius:7px}.hero-brand span{font-size:1.5rem;font-weight:600;letter-spacing:-.05em}.button{background:var(--blue);border-color:var(--blue);color:#142232}.button:hover{background:#73a6e7;border-color:#73a6e7;color:#142232}.hero-art>svg{border-color:#b8cce5;box-shadow:0 8px 25px #488de00c}.workflow-strip{border-top:2px solid var(--blue);color:#29384c}.challenge{background:#edf3fb}.challenge .button.light{background:var(--blue);border-color:var(--blue);color:#142232}.challenge-number{color:#2964af}.chips span{border-color:#c9d8ec}.starter-card:hover{border-color:var(--blue)}.closing{border-top:2px solid var(--blue)}.footer{background:#1f242b;color:#fff;border-top:0}.footer .brand{color:white}.footer>span{color:#bec8d5}.footer a:hover{color:#86b8f7}@media(max-width:720px){.header .brand img{width:34px;height:34px}.hero-brand{margin-bottom:24px}.hero-brand img{width:52px;height:52px}.hero-brand span{font-size:1.35rem}}
/* DrawToMove presentation and focused animation trial. */
:root{--blue:#4a90e2;--ink:#20252d;--line:#e0e5eb;--film-fit-height:calc(100dvh - 114px);--demo-fit-height:calc(100dvh - 136px)}
body{background:white;color:var(--ink);font-size:18px;line-height:1.65}.header{max-width:1500px;margin:auto;position:relative;background:white;border-bottom:1px solid var(--line);padding:20px 4%;gap:26px}.brand{font-size:1.25rem}.brand img{border-radius:22%}.header nav{margin-left:auto;gap:26px}.header nav a{font-size:1rem;color:#596574}.header nav a[aria-current]{color:#20252d;box-shadow:0 2px var(--blue)}.nav-toggle{display:none}.section{max-width:1250px;margin:auto;padding:65px 35px}.home-intro{max-width:920px;text-align:center;padding:45px 30px 30px}.home-intro h1{font-size:clamp(3rem,6vw,5rem);letter-spacing:-.055em;margin:0 0 15px}.lead{font-size:1.2rem;line-height:1.6}.hero-buttons{justify-content:center}.button{background:#4a90e2;color:#111b29;border-radius:7px;font-weight:600;font-size:1rem;box-shadow:none}.button:hover{background:#78adeb}.text-link{color:#2866a8;font-size:1rem}.film-section{max-width:none;padding:0 38px 50px}.demo-video{width:min(100%,calc(var(--film-fit-height)*4/3));margin:0 auto;background:white;box-shadow:none;border-radius:8px;overflow:hidden}.movie-frame{position:relative;aspect-ratio:4/3}.demo-video video{width:100%;height:100%;max-height:none;object-fit:contain;display:block}.film-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;background:#fafafa}.film-cover img{width:clamp(80px,20%,180px);height:auto;border-radius:22%}.film-cover strong{font-size:clamp(1.6rem,3vw,2.7rem)}.film-cover div{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}.film-cover[hidden]{display:none}.demo-video figcaption{text-align:center;font-size:1rem;line-height:1.4;padding:12px 8px;min-height:1.4em;color:#596574}.film-chapters{display:flex;justify-content:center;gap:20px;margin-top:15px;flex-wrap:wrap}.film-chapters button{border:0;background:none;color:#2866a8;font:inherit;font-size:.95rem;cursor:pointer;padding:8px}.home-explanation{display:grid;grid-template-columns:1fr 1.3fr;gap:65px;border-top:1px solid var(--line)}.home-explanation h2{font-size:2.2rem;line-height:1.3}.footer{background:white;border-top:1px solid var(--line);font-size:1rem}.footer div{gap:24px}.page-intro{padding-bottom:15px}.page-intro h1{font-size:clamp(2.5rem,5vw,4rem);margin:0 0 15px;letter-spacing:-.045em}.try-section{padding-top:10px}.scene-switch{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.scene-switch button{font:inherit;font-size:1rem;padding:10px 22px;border:1px solid #ccd6e2;border-radius:7px;background:#f2f5f8;color:#344b65;cursor:pointer}.scene-switch button[aria-pressed=true]{background:#dceafa;border-color:#6c9ed8;color:#173f71}.dtm-stage{position:relative;aspect-ratio:1366/1024;width:min(100%,calc(var(--demo-fit-height)*1366/1024));margin:auto;overflow:hidden;border:1px solid #d4dfed;border-radius:8px}.dtm-stage canvas{display:block;width:100%;height:100%;touch-action:none}.dtm-stage canvas.mouse-pencil{cursor:url('assets/logo-stift.svg') 4 8,crosshair}.dtm-ui{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:grayscale(1);opacity:.45}.app-hit{position:absolute;bottom:3.8%;width:5%;height:7%;padding:0;background:#f1f1f6;color:#111;border:0;border-radius:22%;cursor:pointer;display:grid;place-items:center;font-size:clamp(16px,3vw,42px)}.hit-play{left:84%}.hit-stop{left:89%}.app-hit[hidden],[hidden]{display:none!important}.demo-timeline{display:flex;gap:15px;align-items:center;max-width:1000px;margin:10px auto 0;font-size:1rem}.demo-timeline input{min-height:44px;flex:1;min-width:50px;accent-color:#4a90e2}.demo-timeline output{font-variant-numeric:tabular-nums;white-space:nowrap}#demo-status{font-size:1rem;min-height:1.7em;color:#546477}.demo-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 38px}.demo-actions button{font:inherit;font-size:1rem;line-height:1.35;min-height:62px;padding:15px;border:1px solid #c5d0de;border-radius:7px;background:#f1f4f8;color:#2c507b;cursor:pointer}.demo-actions button[aria-pressed=true]{background:#d5e6f9;border-color:#6f9dd3}.demo-actions button:hover{background:#e1ebf8}.gesture-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}.gesture-help h3{font-size:1.2rem}.gesture-help p,.demo-notes{font-size:1rem}.starter-card{box-shadow:none;border:1px solid var(--line);border-radius:8px;background:white}.starter-card img{object-fit:contain}.starter-card span{font-size:1.1rem}.starter-card small{font-size:.95rem}.task-grid article,.form-card,.coming-soon{border:1px solid var(--line);border-radius:8px;background:#f6f8fb}.challenge{background:#f1f6fc;color:var(--ink)}.challenge p,.challenge .eyebrow{color:#596574}.challenge .button{color:#111b29;background:#4a90e2}.challenge-number{color:#4a90e2}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #4a90e2;outline-offset:4px}
@media(max-width:900px){.header{flex-wrap:wrap;gap:15px}.nav-toggle{display:block;margin-left:auto;font:inherit;border:1px solid #ddd;background:white;padding:7px 12px;border-radius:6px}.header nav{display:none;width:100%;order:4;margin:0;flex-wrap:wrap;gap:18px}.header nav.is-open{display:flex}.home-explanation{grid-template-columns:1fr;gap:20px}.demo-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.section{padding:35px 22px}.film-section{padding:0 20px 35px}.home-intro{padding-bottom:20px}.demo-actions button{font-size:.95rem;padding:12px}.film-chapters{gap:8px}.film-cover{gap:10px}.film-cover div{gap:12px}.film-cover .button,.film-cover .text-link{font-size:.85rem}.demo-video figcaption{font-size:.95rem}.footer{flex-wrap:wrap;gap:18px}.footer div{flex-wrap:wrap}.try-section{padding-top:5px}}

@media(max-width:600px){.film-section{padding-inline:38px}}

.film-cover-heading{margin:0;color:var(--ink);font-size:clamp(1.15rem,2.7vw,2rem);line-height:1.25;text-align:center;padding:0 16px}

.movie-frame{border:3px solid #080b10;border-radius:8px;overflow:hidden;background:#080b10}

/* Center the introductory text above the film as a balanced text block. */
.home-intro > .lead{max-width:720px;margin:0 auto 24px;text-align:center;text-wrap:balance;line-height:1.6}

.dtm-stage{border:3px solid #080b10;background:#080b10}

/* Fit the opening controls and long contact addresses on narrow phones. */
.form-card,.section>div{min-width:0}.text-link{overflow-wrap:anywhere}
@media(max-width:600px){.film-section{padding-inline:16px}.film-cover{gap:clamp(3px,1.5vw,10px);padding:8px}.film-cover img{width:clamp(44px,15vw,80px);height:auto}.film-cover strong{font-size:clamp(.9rem,4vw,1.2rem)}.film-cover-heading{font-size:clamp(.8rem,3.5vw,1.1rem);padding:0 4px}.film-cover div{gap:8px;flex-wrap:wrap;justify-content:center}.film-cover .button{padding:7px 12px;min-height:36px}.film-cover .text-link{font-size:.8rem}.gesture-help{grid-template-columns:1fr}}

/* App transport: secondarySystemBackground, 24pt symbols inside 64pt buttons. */
.dtm-ui{mask-image:url('assets/compact-1.svg');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;opacity:1;filter:none}
.app-hit{bottom:4.1%;width:4.685%;height:6.25%;background:rgba(242,242,247,.96);color:#000;border-radius:25%;box-shadow:none;transition:background-color .12s ease,transform .12s ease}
.app-hit svg{display:block;width:40.625%;height:40.625%;fill:currentColor;pointer-events:none}
.app-hit:active{background:#dedee3;transform:scale(.96)}
.hit-play{left:83.75%}.hit-stop{left:88.87%}
.demo-timeline{box-sizing:border-box;width:min(100%,calc(var(--demo-fit-height)*1366/1024));max-width:none;margin:8px auto 0;padding:0 12px;gap:8px;min-height:44px;border-radius:16px;background:rgba(242,242,247,.6);color:#111;font-size:12px}
.demo-timeline input{width:0;min-width:0;min-height:44px;flex:1;accent-color:#007aff}.demo-timeline output{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600}
@media(max-width:600px){.demo-timeline{gap:6px;padding:0 8px}.demo-timeline label,.demo-timeline output{font-size:10px}}

.demo-video figcaption{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;padding:16px 8px}.film-error-detail{display:block;font-size:.85rem;margin-top:12px;overflow-wrap:anywhere}

.testflight-success-dialog{width:min(90vw,500px);padding:clamp(24px,5vw,40px);border:2px solid #1f242b;border-radius:20px;color:#1f242b;background:#fff;box-sizing:border-box}.testflight-success-dialog::backdrop{background:rgba(20,30,45,.55)}.testflight-success-dialog h2{font-size:clamp(1.4rem,5vw,1.8rem);margin:0 0 16px}.testflight-success-dialog p{line-height:1.55;margin:0 0 24px}.testflight-success-dialog .button{width:100%;white-space:normal}

.dtm-stage canvas.mouse-pencil.dtm-pencil-active{cursor:none}.dtm-stylus{position:absolute;width:96px;height:73px;max-width:none;pointer-events:none;user-select:none;transform-origin:4px 8px;z-index:4;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.16))}