/* One persistent interface changes from sketch, to plan, to usable prototype. */
.hero-demo{min-width:0;--demo-paper:#e9e4d7;--demo-ink:#353535;--demo-edge:#939393;--demo-accent:#746341}
.demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.demo-steps button{border:0;border-top:2px solid var(--line);background:transparent;color:var(--muted);font-size:12px;text-align:left;padding:13px 0;line-height:1.3;min-height:57px;transition:border-color .4s,color .4s}
.demo-steps button>span{display:block;font-size:9px;letter-spacing:.12em;margin-bottom:6px}
.demo-steps button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.demo-scene{padding:39px 13px 19px;position:relative;background:radial-gradient(ellipse at center,#7d724521,transparent 72%)}
.demo-annotation{position:absolute;top:3px;right:15px;display:flex;align-items:center;gap:10px;color:var(--gold);font-family:Georgia,serif;font-style:italic;font-size:14px}
.demo-annotation svg{width:57px;height:28px;fill:none;stroke:currentColor;stroke-width:1.3}
.demo-board{background-color:var(--demo-paper);color:var(--demo-ink);border:1px solid var(--demo-edge);box-shadow:10px 18px 32px #0004;transform:rotate(-2deg);border-radius:2px 14px 3px 9px;transition:background-color .65s,color .65s,border-color .65s,transform .65s,border-radius .65s,box-shadow .65s;overflow:hidden}
.demo-window{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--demo-edge);padding:11px 18px;font-size:8px;letter-spacing:.11em;transition:background-color .65s}
.demo-window>span:first-child{font-size:8px;letter-spacing:3px;white-space:nowrap}
.demo-board-content{padding:22px 26px 26px;background-image:radial-gradient(#52525224 .6px,transparent .6px);background-size:8px 8px}
.demo-board-heading{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.13em}
.demo-symbol{font-size:20px;line-height:1;color:var(--demo-accent)}
.demo-board h2{font-size:29px;letter-spacing:-.035em;line-height:1.14;margin:15px 0 18px;font-family:Georgia,serif;font-style:italic;min-height:67px;color:inherit}
.demo-flow{display:flex;align-items:center;gap:9px;font-size:10px;margin-bottom:23px;white-space:nowrap;color:var(--demo-ink)}
.demo-flow i{height:1px;min-width:8px;flex:1;background:var(--demo-edge);position:relative}
.demo-flow i:after{content:'';position:absolute;right:0;top:-2px;border:solid var(--demo-edge);border-width:0 1px 1px 0;padding:2px;transform:rotate(-45deg)}
.demo-board label{font-size:11px;color:var(--demo-ink);margin:14px 0 7px;display:flex;align-items:center;gap:8px}
.demo-field-number{display:inline-grid;place-items:center;border:1px solid currentColor;border-radius:50%;width:17px;height:17px;font-size:9px}
.demo-board textarea,.demo-board select{background:transparent;color:var(--demo-ink);border:1px dashed var(--demo-edge);padding:10px 12px;font-size:13px;line-height:1.5;margin:0;border-radius:3px;width:100%;transition:background-color .65s,border-color .65s,border-radius .65s,box-shadow .65s;resize:vertical}
.demo-board textarea:disabled,.demo-board select:disabled{opacity:1;-webkit-text-fill-color:var(--demo-ink);cursor:default}
.demo-create{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;margin-top:19px;font-size:12px;border:1px dashed var(--demo-edge);background:transparent;color:var(--demo-ink);transition:background-color .65s,border-color .65s,border-radius .65s}
.demo-create:disabled{opacity:1;cursor:default}
.demo-caption{display:flex;align-items:start;gap:18px;justify-content:space-between;min-height:71px;margin-top:8px}
.demo-caption p{font-size:12px;line-height:1.5;margin:0;max-width:290px}
.demo-caption button{white-space:nowrap;background:none;border:0;border-bottom:1px solid var(--gold);color:var(--gold);font-size:11px;padding:0 0 6px}
.demo-disclosure{font-size:10px;margin:0;color:var(--muted)}
.hero-demo[data-demo-step='1']{--demo-paper:#262626;--demo-ink:#eceae3;--demo-edge:#8f8f8f;--demo-accent:#e6c568}
.hero-demo[data-demo-step='1'] .demo-board{transform:rotate(0);border-radius:3px;box-shadow:0 12px 35px #0005}
.hero-demo[data-demo-step='1'] .demo-board-content{background-image:linear-gradient(#aaaaaa10 1px,transparent 1px),linear-gradient(90deg,#aaaaaa10 1px,transparent 1px);background-size:20px 20px}
.hero-demo[data-demo-step='1'] .demo-board h2,.hero-demo[data-demo-step='2'] .demo-board h2{font-family:Arial,Helvetica,sans-serif;font-style:normal}
.hero-demo[data-demo-step='1'] .demo-field-number{color:var(--gold)}
.hero-demo[data-demo-step='1'] textarea,.hero-demo[data-demo-step='1'] select,.hero-demo[data-demo-step='1'] .demo-create{border-style:solid}
.hero-demo[data-demo-step='2']{--demo-paper:#f2f0e6;--demo-ink:#292929;--demo-edge:#a6a6a6;--demo-accent:#75602c}
.hero-demo[data-demo-step='2'] .demo-board{transform:rotate(0);border-radius:12px;box-shadow:0 16px 50px #b7a26a1c}
.hero-demo[data-demo-step='2'] .demo-window{background:#dedbd4}
.hero-demo[data-demo-step='2'] .demo-board-content{background-image:none}
.hero-demo[data-demo-step='2'] textarea,.hero-demo[data-demo-step='2'] select{background:#fffef9;border-style:solid;border-radius:6px;box-shadow:0 2px 4px #00000006}
.hero-demo[data-demo-step='2'] .demo-create{border:1px solid var(--gold);border-radius:5px;background:var(--gold);color:#232323;font-weight:700}
.demo-board :focus-visible{outline:3px solid #6e5826;outline-offset:3px}
.demo-result{border-top:1px solid var(--demo-edge);margin-top:22px;padding-top:20px;overflow-wrap:anywhere}
.demo-result p{font-size:12px;color:var(--demo-ink);margin-bottom:12px;white-space:pre-wrap}
.demo-result .demo-result-kicker{font-size:9px;letter-spacing:.1em;color:#80652b}
.demo-result h3{font-size:22px;margin-bottom:12px}
.demo-result button{background:transparent;border:0;border-bottom:1px solid currentColor;font-size:12px;color:var(--demo-ink);padding:0 0 5px}
.demo-result[hidden],.demo-caption button[hidden]{display:none}
@media(min-width:761px) and (max-width:950px){.hero{grid-template-columns:1fr}.hero-demo{width:min(620px,100%);margin:15px auto 0}.hero-copy{max-width:750px}.hero-copy h1 br:last-child{display:none}}
@media(max-width:760px){.hero-demo{margin-top:10px}.demo-scene{padding:39px 7px 16px}.demo-board-content{padding:20px}.demo-board h2{font-size:27px}.demo-steps{gap:9px}.demo-steps button{font-size:11px}.demo-caption{min-height:0;flex-direction:column;gap:10px;margin-bottom:14px}.demo-window{padding:10px 12px;font-size:7px}.demo-disclosure{font-size:9px}}
@media(max-width:360px){.demo-board-content{padding:17px 15px}.demo-board h2{font-size:24px}.demo-flow{font-size:9px;gap:6px}.demo-window{letter-spacing:.035em}.demo-steps button{font-size:10px}.demo-board textarea,.demo-board select{font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-board,.demo-steps button,.demo-board textarea,.demo-board select,.demo-create,.demo-window{transition:none}}

.demo-board h2{white-space:pre-line}
/* Material progression: loose paper (-6deg), drawn plan (-3deg), finished tool (0deg). */
.demo-scene{padding:65px 29px 38px}
.demo-board{position:relative;transform:rotate(-6deg);transform-origin:center;transition:background-color .65s,color .65s,border-color .65s,transform .65s,border-radius .65s,box-shadow .65s}
.hero-demo[data-demo-step='0']{--demo-paper:#e7dfc9;--demo-ink:#494838;--demo-edge:#8d846e;--demo-accent:#655b3e}
.hero-demo[data-demo-step='0'] .demo-board{border-radius:1px 2px 2px 1px;border-color:#c4b89c;box-shadow:3px 4px 1px #b9ac8b50,10px 21px 27px #0006}
.hero-demo[data-demo-step='0'] .demo-board:after{content:'';position:absolute;right:0;top:0;width:27px;height:27px;background:linear-gradient(225deg,#191919 0 48%,#b9ae91 49%,#f7f0df 55%,#d6ccb0 100%);filter:drop-shadow(-2px 2px 2px #0002);pointer-events:none}
.hero-demo[data-demo-step='0'] .demo-board-content{background-image:linear-gradient(94deg,transparent 48%,#887d5e0b 49%,#fff8e41f 50%,transparent 51%),repeating-linear-gradient(2deg,#736d5504 0 1px,transparent 1px 4px),repeating-linear-gradient(91deg,transparent 0 6px,#fdf7e319 6px 7px);background-size:auto;padding-top:14px}
.hero-demo[data-demo-step='0'] .demo-window{border-bottom:0;padding:14px 20px 3px;color:#726950;font-family:'Segoe Print','Comic Sans MS',cursive}
.hero-demo[data-demo-step='0'] .demo-window>span{visibility:hidden}
.hero-demo[data-demo-step='0'] .demo-window:before{content:'ROUGH SKETCH / 01';position:absolute;font-size:9px;letter-spacing:.1em}
.hero-demo[data-demo-step='0'] .demo-board h2{font-family:'Segoe Print','Comic Sans MS',Georgia,serif;font-size:26px;line-height:1.35;font-weight:400;letter-spacing:-.05em;font-style:normal}
.hero-demo[data-demo-step='0'] .demo-board label,.hero-demo[data-demo-step='0'] textarea,.hero-demo[data-demo-step='0'] select,.hero-demo[data-demo-step='0'] .demo-create,.hero-demo[data-demo-step='0'] .demo-flow{font-family:'Segoe Print','Comic Sans MS',cursive}
.hero-demo[data-demo-step='0'] textarea,.hero-demo[data-demo-step='0'] select,.hero-demo[data-demo-step='0'] .demo-create{border:1px solid #807963;border-radius:2px 8px 3px 7px / 5px 2px 7px 3px;box-shadow:1px 2px 0 -1px #80796370;outline:1px solid #80796330;outline-offset:2px;resize:none;appearance:none}
.hero-demo[data-demo-step='0'] textarea{transform:rotate(.5deg)}
.hero-demo[data-demo-step='0'] select{transform:rotate(-.4deg)}
.hero-demo[data-demo-step='0'] .demo-create{transform:rotate(.3deg);margin-bottom:4px}
.hero-demo[data-demo-step='0'] .demo-field-number{border-radius:43% 57% 46% 54%}
.plan-dimension,.plan-notes,.plan-title-block{display:none}
.hero-demo[data-demo-step='1']{--demo-paper:#19496b;--demo-ink:#e5f1f8;--demo-edge:#96bed5;--demo-accent:#e6c568}
.hero-demo[data-demo-step='1'] .demo-board{transform:rotate(-3deg);border-radius:1px;box-shadow:5px 13px 30px #0005;border:1px solid #a6cce2}
.hero-demo[data-demo-step='1'] .demo-board-content{position:relative;padding:45px 135px 20px 26px;background-image:linear-gradient(#c1e3fa12 1px,transparent 1px),linear-gradient(90deg,#c1e3fa12 1px,transparent 1px),linear-gradient(#c1e3fa0a 1px,transparent 1px),linear-gradient(90deg,#c1e3fa0a 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px}
.hero-demo[data-demo-step='1'] .demo-board-content:before{content:'';position:absolute;inset:12px;border:1px solid #a5cce245;pointer-events:none}
.hero-demo[data-demo-step='1'] .demo-window{font-family:Consolas,monospace}
.hero-demo[data-demo-step='1'] .demo-window>span:first-child{visibility:hidden}
.hero-demo[data-demo-step='1'] .demo-window:before{content:'PLAN / 02';position:absolute;font-size:8px}
.hero-demo[data-demo-step='1'] .demo-board h2{font-size:26px;line-height:1.3}
.hero-demo[data-demo-step='1'] .demo-board-heading,.hero-demo[data-demo-step='1'] .demo-flow,.hero-demo[data-demo-step='1'] .demo-board label{font-family:Consolas,monospace}
.hero-demo[data-demo-step='1'] .plan-dimension{display:flex;position:absolute;left:26px;right:26px;top:20px;justify-content:space-between;gap:8px;align-items:center;border-block:1px solid #b5d9ef66;color:#d3eafa;font:7px Consolas,monospace;letter-spacing:.08em;padding:2px 0}
.hero-demo[data-demo-step='1'] .plan-notes{display:block;position:absolute;top:0;right:18px;bottom:0;width:101px;pointer-events:none}
.plan-note{position:absolute;right:0;color:#e6c568;font:10px/1.5 'Segoe Print',Georgia,serif}
.plan-note b{display:block;font:8px/1.8 Consolas,monospace;letter-spacing:.07em;color:#e1f1fb}
.plan-note:before{content:'';position:absolute;width:25px;height:15px;border-top:1px solid #e6c56899;border-right:1px solid #e6c56899;right:calc(100% + 3px);top:11px;transform:skewY(-25deg)}
.plan-note:after{content:'+';position:absolute;right:calc(100% + 23px);top:-4px;color:#e6c568}
.note-a{top:48%}.note-b{top:66%}.note-c{top:79%}
.hero-demo[data-demo-step='1'] .plan-title-block{display:flex;justify-content:space-between;border:1px solid #b5d9ef88;margin:24px -111px 0 0;color:#e1f1fb;font:7px/1.5 Consolas,monospace;letter-spacing:.07em}
.plan-title-block>div{padding:7px 9px}.plan-title-block>div+div{border-left:1px solid #b5d9ef88}.plan-title-block b,.plan-title-block span{display:block}
.hero-demo[data-demo-step='1'] textarea{resize:none}
.hero-demo[data-demo-step='2'] .demo-board{transform:rotate(0)}
@media(max-width:760px){
 .demo-scene{padding:57px 26px 36px}
 .hero-demo[data-demo-step='0'] .demo-board h2{font-size:23px}
 .hero-demo[data-demo-step='1'] .demo-board-content{padding:41px 20px 20px}
 .hero-demo[data-demo-step='1'] .plan-dimension{left:20px;right:20px}
 .hero-demo[data-demo-step='1'] .plan-notes{position:static;width:auto;margin-top:0;display:none}
 .hero-demo[data-demo-step='1'] .plan-title-block{margin:72px 0 0}
 .hero-demo[data-demo-step='1'] .plan-notes{display:flex;position:absolute;top:auto;left:21px;right:21px;bottom:76px;height:49px;gap:10px;border-top:1px dashed #b5d9ef6b;padding-top:8px}
 .plan-note{position:static;flex:1;min-width:0;font-size:8px;line-height:1.3}
 .plan-note b{font-size:7px}.plan-note:before,.plan-note:after{display:none}
 .hero-demo[data-demo-step='1'] .demo-board h2{font-size:24px}
}
@media(max-width:360px){
 .demo-scene{padding-inline:23px}
 .hero-demo[data-demo-step='0'] .demo-board-content{padding-inline:16px}
 .hero-demo[data-demo-step='0'] .demo-board h2{font-size:21px}
 .hero-demo[data-demo-step='1'] .demo-board-content{padding-inline:17px}
 .hero-demo[data-demo-step='1'] .demo-board h2{font-size:23px}
 .hero-demo[data-demo-step='1'] .plan-title-block{font-size:6px}
 .hero-demo[data-demo-step='1'] .plan-notes{left:18px;right:18px;gap:6px}
 .plan-note{font-size:7px}.plan-note b{font-size:6px}
}
@media(prefers-reduced-motion:reduce){.demo-board{transition:none}}

/* Keep the page still as the same card changes material and angle. */
.demo-board{min-height:var(--demo-board-height,0px);display:flex;flex-direction:column}
.demo-board-content{flex:1}
.demo-caption{min-height:var(--demo-caption-height,71px)}
.demo-measure{position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;margin:0!important;z-index:-1}
.demo-measure .demo-board,.demo-measure .demo-caption{min-height:0}
.demo-measure .demo-board{transform:none!important}
.demo-measure *{transition:none!important;animation:none!important}
.hero-demo[data-demo-step='1'] .demo-board{border-color:#a6cce2}
.hero-demo[data-demo-step='1'] .demo-board-content{background-image:linear-gradient(#c1e3fa1c 1px,transparent 1px),linear-gradient(90deg,#c1e3fa1c 1px,transparent 1px),linear-gradient(#c1e3fa0b 1px,transparent 1px),linear-gradient(90deg,#c1e3fa0b 1px,transparent 1px)}
.hero-demo[data-demo-step='1'] .demo-board-content:before{border-color:#b5d9ef66}
.hero-demo[data-demo-step='1'] .plan-dimension{color:#d3eafa;border-color:#a5cce280}
.hero-demo[data-demo-step='1'] .plan-title-block,.hero-demo[data-demo-step='1'] .plan-title-block>div+div{border-color:#b5d9ef88;color:#e1f1fb}
.hero-demo[data-demo-step='1'] .plan-note b{color:#e1f1fb}

/* Graphite on drawing paper; keep real form controls beneath the sketch. */
.hero-demo[data-demo-step='0']{--demo-paper:#eee4d0;--demo-ink:#514c40;--demo-edge:#807765}
.hero-demo[data-demo-step='0'] .demo-board{background-image:radial-gradient(ellipse at 20% 12%,#fffaf0a8,transparent 65%),linear-gradient(97deg,#b7a88d19,transparent 48%,#fff9e63d 51%,#af99741c);border-color:#c7bca6;border-radius:2px 1px 3px 2px;isolation:isolate}
.hero-demo[data-demo-step='0'] .demo-board:before{content:'';position:absolute;inset:0;background:url('/assets/chemanel-preview-20261003/paper-grain.svg') repeat;opacity:.22;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.hero-demo[data-demo-step='0'] .demo-board-content{position:relative;background-image:none;padding-bottom:72px}
.hero-demo[data-demo-step='0'] .demo-board h2{text-shadow:.45px .3px #514c401c;transform:rotate(-.4deg)}
.hero-demo[data-demo-step='0'] textarea,.hero-demo[data-demo-step='0'] select,.hero-demo[data-demo-step='0'] .demo-create{border:1px solid transparent;outline:0;border-radius:0;box-shadow:none;background-image:url('/assets/chemanel-preview-20261003/pencil-frame.svg');background-size:100% 100%;background-repeat:no-repeat}
.hero-demo[data-demo-step='0'] .demo-create{background-image:url('/assets/chemanel-preview-20261003/pencil-frame.svg'),repeating-linear-gradient(133deg,transparent 0 3px,#6c625229 3px 3.6px,transparent 3.6px 5px);background-size:100% 100%,calc(100% - 8px) calc(100% - 8px);background-position:center;color:#454135}
.hero-demo[data-demo-step='0'] .demo-field-number{box-shadow:1px -.5px 0 -.2px #74695670;transform:rotate(-7deg)}
.hero-demo[data-demo-step='0'] .demo-flow i{transform:rotate(-.8deg);box-shadow:0 1.5px #655e5024}
.paper-margin-note{display:none}
.hero-demo[data-demo-step='0'] .paper-margin-note{display:block;position:absolute;right:27px;bottom:23px;max-width:calc(100% - 50px);font:12px/1.5 'Segoe Print','Comic Sans MS',cursive;color:#716957;transform:rotate(2deg)}
.paper-margin-note span{font-size:22px;margin-left:5px}
/* One fixed Next control sits in a reserved blank area inside every sheet. */
.demo-window{min-height:104px;align-items:flex-start}
.hero-demo[data-demo-step='2'] .demo-window{background:linear-gradient(#dedbd4 33px,transparent 33px)}
.demo-advance{position:absolute;top:110px;right:65px;z-index:3;width:110px;height:44px;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:12px;border:1px solid #8f7840;border-radius:5px;background:#e6c568;color:#292929;box-shadow:0 3px 8px #0002;font-size:11px;font-weight:700;white-space:nowrap}
.demo-advance:hover{background:#f2d88e}
.demo-advance:focus-visible{outline:3px solid #e6c568;outline-offset:4px}
.demo-advance-icon{width:16px;text-align:center;font-size:17px}

/* Notes share their field's row, so wrapping never detaches the annotation. */
.plan-note{display:none}
.hero-demo[data-demo-step='1'] .demo-board{background-image:url('/assets/chemanel-preview-20261003/engineering-drawing.svg');background-size:100% auto;background-repeat:no-repeat}
.hero-demo[data-demo-step='1'] .demo-board-content{padding-right:26px}
.hero-demo[data-demo-step='1'] .demo-field,.hero-demo[data-demo-step='1'] .demo-submit-row{display:grid;grid-template-columns:minmax(0,1fr) 101px;column-gap:24px;align-items:center}
.hero-demo[data-demo-step='1'] .demo-field label{grid-column:1;grid-row:1}
.hero-demo[data-demo-step='1'] .demo-field textarea,.hero-demo[data-demo-step='1'] .demo-field select{grid-column:1;grid-row:2;background-color:#19496be8}
.hero-demo[data-demo-step='1'] .demo-submit-row{margin-top:19px}
.hero-demo[data-demo-step='1'] .demo-create{grid-column:1;grid-row:1;margin-top:0;background-color:#19496be8}
.hero-demo[data-demo-step='1'] .plan-note{display:block;position:relative;grid-column:2;grid-row:2;top:auto;right:auto;align-self:center;font-size:10px;line-height:1.5}
.hero-demo[data-demo-step='1'] .demo-submit-row .plan-note{grid-row:1}
.hero-demo[data-demo-step='1'] .plan-note:before{display:block;right:calc(100% + 5px);top:50%;width:19px;height:0;border:0;border-top:1px solid #e6c568bb;transform:none}
.hero-demo[data-demo-step='1'] .plan-note:after{display:block;content:'';right:calc(100% + 21px);top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#e6c568}
.hero-demo[data-demo-step='1'] .plan-title-block{margin:24px 0 0;background:#19496bde}
@media(max-width:760px){
 .hero-demo[data-demo-step='1'] .demo-board-content{padding-right:20px}
 .hero-demo[data-demo-step='1'] .demo-field,.hero-demo[data-demo-step='1'] .demo-submit-row{grid-template-columns:minmax(0,1fr)}
 .hero-demo[data-demo-step='1'] .plan-note,.hero-demo[data-demo-step='1'] .demo-submit-row .plan-note{grid-column:1;grid-row:3;margin-top:8px;padding-left:9px;border-left:1px solid #e6c56888;font-size:10px;line-height:1.45}
 .hero-demo[data-demo-step='1'] .plan-note b{display:inline;font-size:8px;margin-right:7px}
 .hero-demo[data-demo-step='1'] .plan-note:before,.hero-demo[data-demo-step='1'] .plan-note:after{display:none}
 .hero-demo[data-demo-step='1'] .plan-title-block{margin-top:20px}
}
@media(max-width:360px){.hero-demo[data-demo-step='1'] .demo-board-content{padding-right:17px}.hero-demo[data-demo-step='1'] .plan-note{font-size:9px}}
@media(max-width:760px){.demo-advance{right:65px;top:101px}.hero-demo[data-demo-step='0'] .paper-margin-note{font-size:10px;right:20px;bottom:20px}}

/* Desktop hero fits a normal browser viewport without scaling readable text. */
@media(min-width:951px){
 body:has(.hero-demo) header{padding-block:17px}
 .hero:has(.hero-demo){min-height:0;padding-top:8px;padding-bottom:24px}
 .hero-copy h1{font-size:clamp(54px,4.6vw,70px);margin-block:20px}
 .hero-copy .lead{font-size:17px}
 .hero-copy .actions{margin-block:22px}
 .hero-demo{--demo-caption-floor:40}
 .demo-steps button{min-height:47px;padding-block:8px}
 .demo-steps button>span{margin-bottom:4px}
 .demo-scene{padding:43px 29px 34px}
 .demo-annotation{left:29px;right:auto}
 .demo-window{min-height:76px;padding-top:9px}
 .hero-demo[data-demo-step='0'] .demo-window{padding-top:10px}
 .demo-advance{top:67px;height:44px}
 .demo-board-content{padding:16px 26px 18px}
 .hero-demo[data-demo-step='0'] .demo-board-content{padding-top:10px;padding-bottom:47px}
 .hero-demo[data-demo-step='1'] .demo-board-content{padding-top:34px;padding-bottom:16px}
 .hero-demo[data-demo-step='1'] .plan-dimension{top:13px}
 .demo-board h2,.hero-demo[data-demo-step='0'] .demo-board h2,.hero-demo[data-demo-step='1'] .demo-board h2{font-size:24px;line-height:1.2;min-height:58px;margin:10px 0 12px}
 .demo-flow{margin-bottom:13px}
 .demo-board label{margin-top:10px;margin-bottom:6px}
 .demo-board textarea{height:64px;min-height:64px}
 .demo-board textarea,.demo-board select{padding-block:8px}
 .demo-create{padding-block:10px;margin-top:13px}
 .hero-demo[data-demo-step='1'] .demo-submit-row{margin-top:13px}
 .hero-demo[data-demo-step='1'] .plan-title-block{margin-top:15px}
 .plan-title-block>div{padding-block:5px}
 .hero-demo[data-demo-step='0'] .paper-margin-note{bottom:14px;font-size:11px}
 .demo-caption{gap:14px;margin-top:5px}
}
@media(min-width:951px) and (max-height:820px){
 body:has(.hero-demo) header{padding-block:6px}
 body:has(.hero-demo) .review{padding-block:4px}
 .hero-copy h1{font-size:58px;margin-block:16px}
 .hero-copy .actions{margin-block:18px}
 .hero-demo{--demo-caption-floor:34}
 .demo-steps button{min-height:39px;padding-block:5px}
 .demo-scene{padding-top:32px;padding-bottom:32px}
 .demo-window{min-height:64px}
 .demo-advance{top:47px}
 .demo-board h2,.hero-demo[data-demo-step='0'] .demo-board h2,.hero-demo[data-demo-step='1'] .demo-board h2{font-size:22px;min-height:53px;margin-block:8px}
 .demo-board textarea{height:56px;min-height:56px}
 .demo-flow{margin-bottom:9px}
 .hero-demo[data-demo-step='1'] .plan-title-block{margin-top:11px}
 .plan-title-block>div{padding-block:3px}
 .demo-caption p{font-size:11px;line-height:1.4}
}