.dr-root{--dr-r:var(--wb-r);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.dr-main{flex:1;min-height:0}.dr-hero-in{height:100%;padding:var(--wb-pad-t) var(--wb-gutter-r) var(--wb-pad-b) var(--wb-gutter-l);grid-template-columns:var(--wb-panel-w) minmax(0, 1fr);gap:var(--wb-row-gap) var(--wb-gap);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"intro stage""card stage";display:grid}.dr-intro{grid-area:intro;min-width:0}.dr-h1{animation:.7s cubic-bezier(.34,1.56,.64,1) both dr-rise}.dr-lede{animation:.7s cubic-bezier(.2,.8,.2,1) 80ms both dr-rise}.dr-card{border-radius:var(--dr-r);background:var(--surface);min-height:0;max-height:100%;box-shadow:inset 0 0 0 1px var(--line), var(--shadow);flex-direction:column;grid-area:card;align-self:start;padding:10px;animation:.7s cubic-bezier(.2,.8,.2,1) .14s both dr-rise;display:flex;position:relative}.dr-tabs{background:var(--wash);border-radius:20px;gap:6px;padding:4px;display:grid}.dr-tabs button{min-width:0;color:var(--ink-70);text-align:left;background:0 0;border:0;border-radius:16px;align-items:center;gap:10px;padding:8px 12px 8px 8px;transition:background .25s,color .25s,box-shadow .25s;display:flex}.dr-tabs button img{flex:none;width:34px;height:34px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}.dr-tabs button span{min-width:0;line-height:1.2;display:grid}.dr-tabs button b{font-size:15px;font-weight:800}.dr-tabs button small{color:var(--ink-50);overflow-wrap:anywhere;font-size:12.5px}.dr-tabs button:hover{color:var(--ink);background:var(--hover)}.dr-tabs button:hover img{transform:rotate(-8deg)scale(1.08)}.dr-tabs button[data-on]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink), 0 10px 22px -14px #140c1a99}.dr-tabs button[data-on] img{transform:scale(1.1)}.dr-panel{overscroll-behavior:contain;scrollbar-width:thin;flex:1;align-content:start;gap:10px;min-height:0;padding:14px 6px 4px;animation:.45s cubic-bezier(.2,.8,.2,1) both dr-panel;display:grid;overflow-y:auto}.dr-label{font-family:var(--f-ui);font-size:var(--wb-label-fs,12.5px);letter-spacing:0;text-transform:none;color:var(--ink-70);font-weight:600}.dr-input{background:var(--field);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:18px;padding:4px 6px 4px 14px;transition:box-shadow .2s;display:flex}.dr-input:focus-within{box-shadow:inset 0 0 0 2px var(--tangerine)}.dr-input textarea{min-width:0;min-height:72px;max-height:160px;color:var(--ink);font:inherit;resize:none;field-sizing:content;background:0 0;border:0;outline:none;flex:1;padding:9px 0;font-size:16px;line-height:1.45}.dr-input textarea::placeholder{color:var(--ink-50)}.dr-hint{color:var(--ink-70);margin-top:-2px;font-size:13px;line-height:1.4}.dr-models{gap:6px;margin-top:2px;display:grid}.dr-model{background:var(--wash);min-height:50px;color:var(--ink);text-align:left;border:0;border-radius:14px;align-items:center;gap:10px;padding:6px 12px 6px 8px;transition:background .15s,box-shadow .2s,transform .12s;display:flex}.dr-model:hover{background:var(--hover-2)}.dr-model:active{transform:scale(.985)}.dr-model>span{min-width:0;line-height:1.2;display:grid}.dr-model b{font-size:13.5px;font-weight:750}.dr-model small{color:var(--ink-50);font-size:12px}.dr-model[data-on]{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}.dr-note{color:var(--ink-70);font-size:12.5px}.dr-go{flex:none;margin-top:10px}.ef-gen.dr-gen{height:var(--wb-go-h);border-radius:var(--wb-go-r);font-size:var(--wb-go-fs);margin:0}.ef-gen.dr-gen:disabled{opacity:.7;cursor:progress}.dr-toast{z-index:5;background:var(--ink);width:max-content;max-width:calc(100% - 24px);color:var(--on-ink);box-shadow:var(--shadow);border-radius:12px;padding:9px 14px;font-size:13.5px;font-weight:600;line-height:1.35;animation:.4s cubic-bezier(.34,1.56,.64,1) both dr-pop;position:absolute;bottom:84px;left:50%;translate:-50%}.dr-stage{border-radius:var(--dr-r);background:var(--surface);min-width:0;min-height:0;box-shadow:inset 0 0 0 1px var(--line), var(--shadow);flex-direction:column;grid-area:stage;gap:10px;padding:12px;animation:.8s cubic-bezier(.2,.8,.2,1) .2s both dr-rise;display:flex;position:relative}.dr-stage[data-over]{box-shadow:inset 0 0 0 2px var(--tangerine), var(--shadow)}.dr-switch{background:var(--wash);border-radius:14px;flex:none;align-self:center;gap:4px;padding:4px;display:inline-flex}.dr-switch button{height:34px;color:var(--ink-70);background:0 0;border:0;border-radius:10px;align-items:center;gap:6px;padding:0 14px;font-size:13px;font-weight:700;transition:background .2s,color .2s;display:inline-flex}.dr-switch button svg{width:15px;height:15px}.dr-switch button[data-on]{background:var(--surface);color:var(--ink);box-shadow:0 4px 12px -8px #140c1a99}.dr-empty{overscroll-behavior:contain;background:repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--ink) 5%, transparent) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb, var(--ink) 5%, transparent) 27px 28px), var(--field);scrollbar-width:thin;border-radius:18px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:0;padding:clamp(8px,3vh,32px) 8px;display:flex;position:relative;overflow-y:auto}.dr-starts{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.dr-start{border:2px dashed var(--line-strong);background:var(--surface);width:min(250px,42vw);color:var(--ink);text-align:center;border-radius:22px;justify-items:center;gap:4px;padding:20px 16px 18px;transition:border-color .2s,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;animation:.55s cubic-bezier(.34,1.56,.64,1) .25s both dr-pop;display:grid}.dr-start+.dr-start{animation-delay:.32s}.dr-start img{width:48px;height:48px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}.dr-start b{margin-top:4px;font-size:16px;font-weight:800}.dr-start small{color:var(--ink-50);font-size:12.5px;line-height:1.35}.dr-start:hover{border-color:var(--tangerine);transform:translateY(-3px);box-shadow:0 18px 32px -22px #140c1a8c}.dr-start:hover img{transform:rotate(-8deg)scale(1.1)}.dr-lib:empty{display:none}.dr-or{font-family:var(--f-ui);font-size:var(--wb-label-fs,12.5px);letter-spacing:0;text-transform:none;color:var(--ink-70);margin-top:6px;font-weight:600}.dr-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,760px);margin:0;padding:0;list-style:none;display:grid}.dr-examples li{animation:dr-pop .55s calc(.35s + var(--n,0) * 80ms) cubic-bezier(.34, 1.56, .64, 1) both}.dr-ex{background:var(--surface);width:100%;color:var(--ink);text-align:left;box-shadow:inset 0 0 0 1px var(--line);border:0;border-radius:18px;gap:8px;padding:6px 6px 10px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;display:grid}.dr-ex:hover{box-shadow:inset 0 0 0 1px var(--line-strong), 0 18px 32px -22px #140c1a8c;transform:translateY(-3px)rotate(-.6deg)}.dr-ex-media{aspect-ratio:4/3;background:var(--field);border-radius:13px;display:block;position:relative;overflow:hidden}.dr-ex-media>img,.dr-ex-blank{object-fit:cover;width:100%;height:100%;display:block}.dr-ex-marks{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.dr-ex-after{background:var(--surface);border-radius:6px;width:38%;padding:3px;transition:rotate .35s cubic-bezier(.34,1.56,.64,1),scale .35s cubic-bezier(.34,1.56,.64,1);position:absolute;top:6px;right:6px;rotate:4deg;box-shadow:0 8px 14px -8px #140c1ab3}.dr-ex:hover .dr-ex-after{rotate:0deg;scale:1.08}.dr-ex-after img{aspect-ratio:4/3;object-fit:cover;border-radius:3px;width:100%;display:block}.dr-ex-txt{gap:1px;padding:0 4px;line-height:1.25;display:grid}.dr-ex-txt b{font-size:13.5px;font-weight:750}.dr-ex-txt small{color:var(--tangerine);font-size:12px;font-weight:700}.dr-drop{background:color-mix(in srgb, var(--tangerine) 14%, transparent);color:var(--ink);pointer-events:none;border-radius:18px;place-items:center;font-size:18px;font-weight:800;display:grid;position:absolute;inset:0}.dr-canvas{flex-direction:column;flex:1;gap:8px;min-height:0;animation:.45s cubic-bezier(.34,1.56,.64,1) both dr-pop;display:flex}.dr-canvas-top{flex:none;justify-content:space-between;align-items:center;gap:8px;display:flex}.dr-mini{background:var(--wash);height:34px;color:var(--ink);border:0;border-radius:11px;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:700;transition:background .15s;display:inline-flex}.dr-mini:hover{background:var(--hover-2)}.dr-mini svg{width:16px;height:16px}.dr-close{width:34px;margin-left:auto;padding:0}.dr-ratios{background:var(--wash);border-radius:12px;gap:4px;padding:3px;display:inline-flex}.dr-ratios button{height:30px;color:var(--ink-70);background:0 0;border:0;border-radius:9px;align-items:center;gap:6px;padding:0 10px;font-size:12.5px;font-weight:700;display:inline-flex}.dr-ratios button i{border:1.6px solid;border-radius:2px;max-width:18px;height:13px;display:block}.dr-ratios button[data-on]{background:var(--surface);color:var(--ink);box-shadow:0 3px 10px -6px #140c1a80}.dr-sketch{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.dr-tools{background:var(--wash);scrollbar-width:none;border-radius:16px;flex:none;align-items:center;gap:6px;max-width:100%;margin-inline:auto;padding:5px;display:flex;overflow:auto hidden}.dr-tools::-webkit-scrollbar{display:none}.dr-tgroup{flex:none;align-items:center;gap:3px;display:flex}.dr-tsep{background:var(--line-strong);flex:none;width:1px;height:22px}.dr-tool{width:38px;height:38px;color:var(--ink-70);background:0 0;border:0;border-radius:11px;flex:none;place-items:center;transition:background .15s,color .15s,transform .25s cubic-bezier(.34,1.56,.64,1);display:grid}.dr-tool svg{width:19px;height:19px}.dr-tool:hover:not(:disabled){background:var(--hover-2);color:var(--ink)}.dr-tool[data-on]{background:var(--ink);color:var(--on-ink);transform:scale(1.04)}.dr-tool:disabled{opacity:.35}.dr-swatch{background:var(--sw);width:26px;height:26px;box-shadow:inset 0 0 0 1.5px var(--line-strong);border:0;border-radius:50%;flex:none;padding:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.dr-swatch:hover{transform:scale(1.12)}.dr-swatch[data-on]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink);transform:scale(1.06)}.dr-size{width:32px;height:38px;color:var(--ink-70);background:0 0;border:0;border-radius:10px;flex:none;place-items:center;display:grid}.dr-size i{background:currentColor;border-radius:50%;display:block}.dr-size:hover{background:var(--hover-2)}.dr-size[data-on]{color:var(--ink);background:var(--surface);box-shadow:0 3px 10px -6px #140c1a80}.dr-board{background:repeating-conic-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 0 25%, transparent 0 50%) 0 0 / 20px 20px, var(--field);border-radius:18px;flex:1;place-items:center;min-height:0;display:grid;overflow:hidden}.dr-paper{background:#fff;border-radius:10px;position:relative;overflow:hidden;box-shadow:0 18px 40px -26px #140c1ab3}.dr-paper>img{object-fit:fill;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.dr-paper canvas{touch-action:none;cursor:crosshair;display:block;position:absolute;inset:0}.dr-paper[data-tool=text] canvas{cursor:text}.dr-paper[data-tool=eraser] canvas{cursor:cell}.dr-typing{z-index:2;outline-offset:2px;-webkit-text-stroke:.5px #000;background:#00000059;border:0;border-radius:6px;outline:2px dashed;min-width:8ch;max-width:calc(100% - 8px);padding:0 4px;position:absolute}.dr-typing::placeholder{color:#ffffffbf;-webkit-text-stroke:0;font-weight:600}.dr-result{overscroll-behavior:contain;scrollbar-width:thin;flex-direction:column;flex:1;align-items:center;min-height:0;display:flex;overflow-y:auto}.dr-result .mk-run{width:min(100%,860px)}.dr-result .mk-done,.dr-result .mk-run .sim{max-height:calc(100dvh - var(--nav-h,48px) - 210px)}.dr-acts{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.dr-act{background:var(--wash);height:40px;color:var(--ink);border:0;border-radius:13px;align-items:center;gap:7px;padding:0 14px 0 8px;font-size:13.5px;font-weight:700;transition:background .2s,transform .2s;display:inline-flex}.dr-act:hover{background:var(--hover-2);transform:translateY(-1px)}.dr-act img{width:26px;height:26px}.dr-result .mk-strip{scrollbar-width:none;margin-top:12px;overflow:auto hidden}.dr-app{grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"card stage";gap:16px;padding:14px;display:grid}@media (max-width:900px){.dr-app{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""card";padding:10px}.dr-app .dr-card,.dr-app .dr-stage{margin-inline:0}}.hd-body .dr-guide{padding:6px 24px 40px}.hd-body .dr-guide>section:first-child h2{padding-right:44px}.dr-guide>section{padding-top:22px}.dr-guide h2{font-size:clamp(22px,2.2vw,28px)}.dr-g-lede{color:var(--ink-70);margin-top:8px;font-size:15px;line-height:1.55}.dr-g-pair{color:inherit;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:14px;text-decoration:none;display:grid}.dr-g-pair figure{margin:0}.dr-g-pair img,.dr-g-pair video{aspect-ratio:4/3;object-fit:cover;background:#140c19;border-radius:12px;width:100%;height:auto;display:block}.dr-g-drawn{display:block;position:relative}.dr-g-pair figcaption{color:var(--ink-50);margin-top:5px;font-size:12px;font-weight:700}.dr-g-pair .arrow{width:18px;height:18px;color:var(--tangerine)}.dr-g-tips{color:var(--ink-70);gap:8px;margin:14px 0 0;padding-left:20px;font-size:14.5px;line-height:1.5;display:grid}.dr-g-models{gap:12px;margin:14px 0 0;padding:0;list-style:none;display:grid}.dr-g-models li{align-items:center;gap:12px;display:flex}.dr-g-models span{line-height:1.35;display:grid}.dr-g-models b a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);text-underline-offset:3px}.dr-g-models small{color:var(--ink-70);font-size:13px}.dr-g-steps{margin-top:14px}.dr-guide .dr-g-faq>h2{margin-bottom:6px}.dr-guide .dr-g-faq summary{font-size:15.5px}.dr-guide .dr-g-faq details p{font-size:14.5px}.dr-g-links{margin-top:24px}@keyframes dr-rise{0%{opacity:0;transform:translateY(18px)}}@keyframes dr-panel{0%{opacity:0;transform:translateY(8px)}}@keyframes dr-pop{0%{opacity:0;transform:scale(.94)}}@media (prefers-reduced-motion:reduce){.dr-h1,.dr-lede,.dr-card,.dr-stage,.dr-panel,.dr-start,.dr-examples li,.dr-canvas,.dr-toast{animation:none!important}.dr-ex,.dr-ex-after,.dr-start,.dr-start img,.dr-tabs button img,.dr-tool,.dr-swatch{transition:none}}@media (max-width:900px){.dr-hero-in{overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));grid-template:"intro""stage""card"/minmax(0,1fr);align-content:start;overflow-y:auto}.dr-card{max-height:none}.dr-panel{flex:none;overflow:visible}.dr-stage{min-height:min(58vh,500px)}.dr-empty{flex:none;justify-content:flex-start;overflow:visible}.dr-canvas{min-height:min(54vh,460px)}.dr-tools{flex-wrap:wrap;justify-content:center;overflow:visible}.dr-result{flex:none;overflow:visible}.dr-result .mk-done,.dr-result .mk-run .sim{max-height:70vh}.dr-root .dr-go{z-index:5;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:0 0 var(--dr-r) var(--dr-r);background:var(--surface);box-shadow:0 -1px 0 var(--line);margin:10px -8px -8px;position:sticky;bottom:0}}@media (max-width:560px){.dr-card,.dr-stage{border-radius:22px;margin-inline:-6px;padding:8px}.dr-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.dr-tabs button{gap:6px;padding:7px 8px 7px 6px}.dr-tabs button img{width:28px;height:28px}.dr-tabs button b{font-size:14px}.dr-tabs button small{display:none}.dr-start{flex:140px;width:auto;max-width:250px;padding:14px 10px}.dr-start small{display:none}.dr-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dr-ex{border-radius:14px;padding:4px 4px 8px}.dr-ex-txt b{font-size:12px}.dr-ex-txt small{display:none}.dr-tool{width:36px;height:36px}.dr-swatch{width:24px;height:24px}}@media (min-width:901px){.dr-tabs{grid-template-columns:minmax(0,1fr)}}