@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

/* Pointer drawing stays visually clean; keyboard focus remains discoverable. */
#runtime-view { position:absolute; inset:0; z-index:6; }
#runtime-view iframe { display:block; border:0; width:100%; height:100%; }
#runtime-view[data-state="ready"] { animation: creation-reveal 220ms ease-out; }
@keyframes creation-reveal { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { #runtime-view[data-state="ready"] { animation:none; } }
.stage-controls { z-index:8; }
.snapshot-preview { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; background: #edf0e6; }
.snapshot-preview img { width: min(100%, 310px); min-height: 0; flex: 0 1 auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 24px #30382f12; }
.snapshot-preview .quiet { flex-shrink: 0; text-decoration: underline; text-underline-offset: 4px; }
.snapshot-preview.is-generating { gap:10px; }
.snapshot-preview.is-generating img { width:100px; max-height:100px; }
#generation-progress { width:min(100%,340px); text-align:left; }
#generation-progress ol { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
#generation-progress li { font-size:13px; color:#7d8479; display:flex; align-items:center; gap:10px; }
#generation-progress li::before { content:''; width:14px; height:14px; border:1px solid #b9c1b3; border-radius:50%; flex-shrink:0; }
#generation-progress li[data-state=done] { color:#48613c; }
#generation-progress li[data-state=done]::before { content:'✓'; border:0; text-align:center; }
#generation-progress li[data-state=active] { color:#963f1d; font-weight:600; }
#generation-progress li[data-state=active]::before { border:2px solid #e0b49b; border-top-color:#a64821; animation:creation-spin 1s linear infinite; }
#generation-progress[data-failed=true] li[data-state=active]::before { animation:none; content:'!'; border:0; }
.generation-detail { font-size:12px; line-height:1.5; margin:12px 0 4px; }
.generation-elapsed { font-size:11px; color:#687260; font-variant-numeric:tabular-nums; }
@keyframes creation-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { #generation-progress li[data-state=active]::before { animation:none; } }
#sketch:focus { outline: none; }
#sketch:focus-visible { outline: 2px solid #db7545; outline-offset: -2px; }

/* Match the visible paper to the square logical canvas: no inert side gutters. */
.paper-panel .sketch-wrap { height: auto; aspect-ratio: 1; }
.paper-panel #sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-panel { display: flex; flex-direction: column; }
.stage-panel .panel-top, .stage-panel .stage-bottom { flex-shrink: 0; }
.stage-panel .stage { flex: 1; min-height: 350px; }
:root{font-family:'DM Sans',sans-serif;color:#30382f;background:#f7f7f0;font-synthesis:none;--line:#dedfd5;--orange:#dc6135;--muted:#818577}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #db7545;outline-offset:4px}button{transition:background .2s,transform .2s}button:hover{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}a{color:inherit;text-decoration:none}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 4.5%}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.8px}.brand-icon{font-size:36px;color:var(--orange)}.beta{font-size:9px;border:1px solid #c5c9bc;padding:4px 5px;letter-spacing:1px;margin-left:6px}.top-note{font-size:12px;color:var(--muted)}.quiet{border:0;background:transparent;font-size:12px;padding:9px 0}.quiet:hover{color:var(--orange)}main{max-width:1440px;margin:auto;padding:54px 6% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.eyebrow,.label,.intro-note>span,.sample-heading>span,.coming-note>span{font-size:9px;letter-spacing:1.5px;font-weight:600}.eyebrow{display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#76916b}h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(40px,4.4vw,65px);line-height:1.12;letter-spacing:-2px;margin:19px 0 17px;position:relative}h1 em{font-weight:500;color:var(--orange)}.spark{display:inline-block;font-family:Georgia;font-size:49px;color:var(--orange);margin-left:24px;vertical-align:top;transform:rotate(12deg)}.intro p{font-size:13px;color:#767d6e}.intro-note{padding-right:44px;color:#858a7c;transform:rotate(4deg)}.intro-note p{font-family:Georgia,serif;font-style:italic;font-size:23px;color:#626c58;line-height:1.4;margin:20px 0 0}.intro-note svg{margin-left:45px}.workspace{position:relative;display:grid;grid-template-columns:1fr 1.12fr;gap:22px}.paper-panel,.stage-panel{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fefef9;box-shadow:0 6px 12px #3c463a04}.panel-top{height:57px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--line)}.step{font-size:9px;color:#89917f;margin-right:11px}.label{font-size:8px;color:#8b8e80;letter-spacing:1px}.sketch-wrap{height:340px;position:relative;background-image:radial-gradient(#d6d8cb .7px,transparent .7px);background-size:19px 19px}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:crosshair}.paper-caption{position:absolute;bottom:17px;left:0;width:100%;text-align:center;pointer-events:none;font-family:Georgia,serif;font-style:italic;color:#a3a392;font-size:13px}.drawing-tools{display:flex;align-items:center;justify-content:space-between;padding:8px 15px;border-top:1px solid #e9e9e0}.tool-group{display:flex;align-items:center;gap:7px}.tool{border:0;background:transparent;border-radius:7px;width:32px;height:32px;font-size:20px}.tool:hover,.tool.selected{background:#eceee4}.divider{display:inline-block;width:1px;height:18px;background:#dce0d3;margin:0 8px;vertical-align:middle}.swatch{border:3px solid #fefef9;box-shadow:0 0 0 1px transparent;background:var(--swatch);width:20px;height:20px;border-radius:50%;padding:0}.swatch.active{box-shadow:0 0 0 1px var(--swatch)}.sketch-hint{height:49px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.sketch-hint>span{font-size:9px;color:#989b8d}.bridge{position:absolute;z-index:2;top:46%;left:calc(47.17% - 21px);background:#f7f7f0;border:1px solid var(--line);width:43px;height:43px;display:grid;place-items:center;border-radius:50%;font-size:21px}.stage-panel{background:#edf0e6}.preview-badge{font-size:8px;letter-spacing:1px;display:flex;align-items:center;gap:6px}.stage{height:389px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 30%,#f9faf3 0,transparent 64%)}.stage-grid{position:absolute;inset:45% -30% -50%;background-image:linear-gradient(#a7b79925 1px,transparent 1px),linear-gradient(90deg,#a7b79925 1px,transparent 1px);background-size:40px 40px;transform:perspective(350px) rotateX(60deg);mask-image:radial-gradient(ellipse,#000,transparent 65%)}.stage-ring{position:absolute;left:18%;width:64%;height:95px;top:240px;border:1px solid #b5bea53d;border-radius:50%}.specimen{position:absolute;width:170px;height:180px;left:calc(50% - 85px);top:78px;z-index:2;scale:var(--scale,1);animation:float 3s ease-in-out infinite;transition:opacity .4s,scale .3s}.creature{position:absolute;width:168px;height:150px;border-radius:47% 49% 43% 43%;background:radial-gradient(ellipse at 29% 23%,#ffb16d 0,#ed8750 35%,#d56537 72%,#ac4c2f 100%);box-shadow:inset -12px -13px 20px #98432442,inset 6px 5px 12px #ffd8a233,0 3px 4px #a2462315;top:20px;transform:rotate(-7deg)}.shine{position:absolute;left:20px;top:9px;width:60px;height:35px;background:#ffe0b02b;border-radius:50%;filter:blur(9px)}.eye{position:absolute;width:13px;height:20px;border-radius:50%;background:#433b2e;top:66px;box-shadow:inset -3px -2px 3px #171e1b77}.eye:after{content:'';position:absolute;background:#fff4d8;width:4px;height:5px;border-radius:50%;left:3px;top:3px}.eye.left{left:48px}.eye.right{right:45px}.smile{position:absolute;width:23px;height:12px;border:2px solid #824e33;border-top:0;border-radius:0 0 15px 15px;left:75px;top:90px}.cheek{position:absolute;width:22px;height:12px;background:#d05b3650;filter:blur(3px);border-radius:50%;top:89px}.cheek.left{left:25px}.cheek.right{right:23px}.antenna{position:absolute;top:0;width:29px;height:58px;border-radius:90% 50% 0 0;background:linear-gradient(90deg,#ec874f,#feb779);z-index:-1}.antenna.left{left:24px;transform:rotate(-28deg)}.antenna.right{right:22px;transform:rotate(29deg);height:48px;top:5px}.foot{position:absolute;width:45px;height:24px;top:157px;border-radius:50%;background:linear-gradient(170deg,#e17d48,#b95830)}.foot.left{left:21px;transform:rotate(-15deg)}.foot.right{right:15px;transform:rotate(9deg)}.shadow{position:absolute;top:278px;left:calc(50% - 70px);width:140px;height:19px;border-radius:50%;background:#5f5b3a30;filter:blur(9px);animation:shadow 3s ease-in-out infinite}.stage-caption{position:absolute;top:323px;left:0;right:0;text-align:center;font-family:Georgia,serif;font-style:italic;color:#8c927f;font-size:13px}.axis{position:absolute;left:22px;bottom:21px;color:#a9b29c;font:9px monospace}.stage-controls{position:absolute;bottom:12px;right:18px;display:flex;align-items:center;gap:3px;background:#f8f9f1c9;border:1px solid #dce0d3;border-radius:8px;padding:3px 5px}.stage-controls label{font-size:9px;color:#87917b}.stage-controls input{width:57px;accent-color:#7f8a6c}.stage-bottom{height:49px;border-top:1px solid var(--line);padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-size:10px}.muted{color:#89907d}.action-row{display:flex;align-items:center;justify-content:space-between;margin-top:23px}.action-row>div{display:flex;align-items:center;gap:13px}.small-star{font-size:33px;color:#89966f}.action-row p{font-size:11px;line-height:1.8;margin:0}.action-row p span{color:#8c9182}.primary{border:0;background:#303d2f;color:#fffef3;padding:17px 23px;border-radius:8px;font-size:12px;box-shadow:0 4px 7px #36482d14}.primary:hover{background:#46513d}.primary span{margin-left:32px;font-size:17px}.disclaimer{font-size:10px;color:#878e7b;text-align:right;margin:11px 0 38px;line-height:1.6}.sample-section{border-top:1px solid var(--line);padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.sample-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.sample-heading h2{font-size:14px;font-weight:500;margin:0}.sample-heading>span,.coming-note>span{color:#939987;font-size:8px}.sample-card{display:flex;align-items:center;text-align:left;gap:19px;border:1px solid var(--line);border-radius:10px;padding:12px 18px;background:#fdfdf6;max-width:420px}.sample-art{width:67px;height:62px;background:#f7e7d8;border-radius:6px;display:grid;place-items:center;font-size:47px;color:#d97342}.sample-card strong{font-size:12px;font-weight:500}.sample-card small{display:block;font-size:10px;color:#919582;margin-top:7px}.sample-arrow{margin-left:auto;font-size:20px}.coming-note{justify-self:end;padding-right:50px}.coming-note p{font:italic 17px/1.5 Georgia;color:#87917b;margin:9px 0}footer{margin:45px 6% 0;padding:23px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:9px;color:#959b8b}footer span:first-child{font-weight:600;color:#68735e}footer span:last-child{letter-spacing:2px}.stage-empty,.progress{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf0e6f2;text-align:center}.stage-empty>span{font-size:70px;color:#96a282}.stage-empty h2,.progress h2{font:24px Georgia;margin:17px 0 0}.stage-empty p,.progress p{font-size:12px;color:#849078;line-height:1.7}.progress-track{height:3px;background:#d8dece;width:160px;margin-top:17px;overflow:hidden}.progress-track i{display:block;background:#e58a58;height:100%;animation:load 3s linear forwards}.spinner{height:35px;width:35px;border:1px solid #ced5c2;border-top-color:#df8454;border-radius:50%;animation:spin 1s linear infinite}[hidden]{display:none!important}.paused .specimen,.paused .shadow{animation-play-state:paused}dialog{border:1px solid var(--line);border-radius:15px;max-width:480px;padding:45px;background:#f7f7f0;color:#30382f}dialog::backdrop{background:#27322166;backdrop-filter:blur(4px)}dialog h2{font:38px/1.2 Georgia}dialog p{font-size:13px;line-height:1.8;color:#747e69}dialog .primary{margin-top:15px}.close{position:absolute;right:20px;top:12px}@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-19px) rotate(3deg)}}@keyframes shadow{50%{transform:scale(.78);opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes load{from{width:0}to{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:1500px){.sketch-wrap{height:420px}.stage{height:469px}.specimen{top:110px}.shadow{top:310px}.stage-ring{top:273px}.stage-caption{top:365px}}@media(max-width:800px){.topbar{height:70px}.top-note{display:none}main{padding:34px 5% 0}.intro-note{display:none}.intro{margin-bottom:28px}h1{font-size:46px}.workspace{grid-template-columns:1fr;gap:20px}.bridge{display:none}.sketch-wrap{height:310px}.stage{height:350px}.specimen{top:50px}.shadow{top:250px}.stage-ring{top:215px}.stage-caption{top:289px}.stage-bottom{gap:10px}.action-row{gap:18px}.primary{padding:16px;font-size:11px}.primary span{margin-left:10px}.disclaimer{text-align:left}.coming-note{padding:0}.brand{font-size:17px}.sample-section{grid-template-columns:1fr}.coming-note{justify-self:start}footer span:nth-child(2){display:none}}@media(max-width:420px){.spark{display:none}.sketch-hint>span{font-size:8px}.panel-top{padding:0 15px}.stage-bottom .label{font-size:7px}.action-row{align-items:stretch;flex-direction:column}.sample-heading>span{display:none}}