:root{color-scheme:dark;--ink:#0b222d;--ink-2:#102f3b;--text:#f6f4ed;--muted:#b8c9c9;--gold:#e8bb62;--gold-dark:#af8137;--paper:#f7f5ee;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--ink);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
::selection{background:var(--gold);color:var(--ink)}
.shell{min-height:100vh;max-width:1440px;margin:auto;padding:0 clamp(20px,4.7vw,68px);display:flex;flex-direction:column}
.topbar{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff20}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:720;letter-spacing:-.025em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--gold);border-radius:9px;color:var(--gold);font-size:14px;font-weight:800;letter-spacing:-.06em}
.prototype-label{color:var(--muted);font-size:12px;letter-spacing:.05em;text-align:right}
.intro{flex:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(38px,6vw,105px);padding:80px 0 70px}
.intro-copy{align-self:center;max-width:560px;padding-bottom:50px}
h1{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:clamp(46px,5.15vw,77px);line-height:1.09;letter-spacing:-.034em;font-weight:400;margin:0 0 34px;text-wrap:balance}
h1 em{color:var(--gold);font-weight:400;font-style:normal}
.intro-copy>p{font-size:clamp(17px,1.6vw,20px);line-height:1.65;color:#d7e2df;max-width:41ch;margin:0 0 42px}
.intro-note{display:flex;align-items:flex-start;gap:14px;color:#c0cfca;font-size:13px;line-height:1.6;max-width:38ch}
.note-line{width:27px;min-width:27px;height:1px;background:var(--gold);margin-top:10px}
.workbench{position:relative;width:100%;max-width:650px;margin-left:auto;background:#f3f2eb;color:var(--ink);border-radius:18px;box-shadow:0 36px 70px -30px #0009,0 10px 26px -16px #0009;overflow:hidden}
.workbench-top{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 30px;background:#fffdfa;border-bottom:1px solid #dbe0d8}
.workbench-title{font-size:14px;font-weight:730;letter-spacing:-.01em}
.workbench-status{display:flex;align-items:center;gap:8px;color:#477469;font-size:12px;font-weight:600}
.status-dot{height:7px;width:7px;border-radius:50%;background:#4c9c79}
.stepper{height:78px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 28px;border-bottom:1px solid #dde2da;background:#fffdfa}
.step-button{min-height:44px;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#65736e;cursor:pointer;border-radius:9px;padding:5px 2px;font-size:12px;font-weight:700;white-space:nowrap;transition:color .2s ease}
.step-button:hover{color:var(--ink)}
.step-button.is-active{color:var(--ink)}
.step-number{width:25px;height:25px;display:grid;place-items:center;border:1px solid #bbc8c1;border-radius:50%;font-variant-numeric:tabular-nums;font-size:11px;transition:background .25s ease,border-color .25s ease,color .25s ease}
.step-button.is-active .step-number{background:var(--ink);border-color:var(--ink);color:white}
.step-rail{flex:1;height:1px;max-width:40px;background:#ccd4cc}
.scene-stage{position:relative;height:444px;overflow:hidden;background:radial-gradient(circle at 78% 100%,#e5ebe5 0,#f3f2eb 46%)}
.scene{position:absolute;inset:0;padding:29px 34px 28px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .38s ease,transform .55s var(--ease),visibility .38s;pointer-events:none}
.scene.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.scene-heading{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.scene-heading span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#668078;font-weight:750}
.scene-heading strong{font-size:22px;line-height:1.2;letter-spacing:-.025em}
.client-line{display:flex;align-items:start;gap:12px;max-width:415px;margin-bottom:19px}
.client-avatar,.message-avatar{width:35px;height:35px;min-width:35px;border-radius:50%;background:#cbdad0;color:#315e53;display:grid;place-items:center;font-size:13px;font-weight:800}
.client-line>div{background:#fffdfa;border-radius:5px 15px 15px 15px;padding:14px 17px;box-shadow:0 10px 19px -16px #102f3b5c}
.client-line small,.request-sheet small{font-size:11px;color:#587168;font-weight:680}
.client-line p{font-size:14px;line-height:1.5;margin:6px 0 0;max-width:34ch}
.request-sheet{margin-left:47px;max-width:366px;background:#fffdfa;border-radius:13px;padding:19px 22px 21px;box-shadow:0 17px 28px -23px #102f3b85}
.request-sheet>div:first-child{display:flex;flex-direction:column;gap:6px}
.request-sheet strong{font-size:15px}
.price-row{border-top:1px solid #e7e8e1;margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.price-anchor{display:inline-block;width:80px;height:31px;flex:none}
.scene-foot{position:absolute;bottom:22px;left:34px;right:34px;color:#63766e;font-size:12px;line-height:1.45;margin:0}
.message-frame{max-width:420px;margin:0 auto;background:#fffdfa;border-radius:14px;box-shadow:0 20px 40px -28px #0b222d7a;overflow:hidden}
.message-head{height:50px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#e1eae3;color:#214b3f;font-size:12px;font-weight:720}
.message-avatar{height:26px;width:26px;min-width:26px;font-size:10px;background:#bdd4c1}
.message-dots{margin-left:auto;font-size:20px;letter-spacing:2px;line-height:1}
.message-body{margin:18px 17px 12px 45px;padding:15px 17px;background:#e2f3e6;border-radius:13px 3px 13px 13px;font-size:14px;line-height:1.4;box-shadow:0 10px 17px -16px #0b222d6b}
.message-body p{margin:0 0 7px}.message-body p:last-child{margin:5px 0 0}
.message-body .price-anchor{height:31px}
.message-review{min-height:39px;display:flex;align-items:center;gap:7px;padding:0 17px 12px;color:#376353;font-size:11px;font-weight:700}
.message-review svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.paper{width:min(310px,100%);min-height:275px;margin:-3px auto 0;background:#fffdfa;border-radius:3px;padding:23px 26px;box-shadow:0 24px 38px -26px #0b222d8c;transform:rotate(-1deg)}
.paper-top{display:flex;justify-content:space-between;align-items:start;color:#20433a;font-size:11px;font-weight:800;letter-spacing:.12em}
.paper-top svg{width:24px;height:24px;fill:none;stroke:#a58447;stroke-width:1.5;stroke-linejoin:round}
.paper-service{font-size:17px;font-weight:710;margin:40px 0 15px}
.paper-rule{height:1px;background:#d9dfd5}
.paper-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-size:13px}
.paper small{display:block;margin-top:22px;color:#66746d;font-size:10px}
.shared-price{position:absolute;z-index:5;display:inline-grid;place-items:center;width:80px;height:31px;border-radius:6px;background:#efd394;color:#35260c;font-size:15px;font-weight:840;letter-spacing:-.035em;box-shadow:0 8px 13px -9px #4b3412a6;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;visibility:hidden}
.playbar{height:67px;display:flex;align-items:center;gap:16px;padding:0 30px;background:#fffdfa;border-top:1px solid #dde2da}
.play-button{display:flex;align-items:center;gap:8px;min-width:111px;min-height:44px;padding:0;border:0;background:transparent;color:#24483e;font-size:12px;font-weight:750;cursor:pointer}
.play-button:hover{text-decoration:underline;text-underline-offset:3px}
.play-button svg{width:20px;height:20px;fill:currentColor;stroke:none}
.progress-track{height:4px;flex:1;background:#dce4dc;border-radius:4px;overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:#ae7d2e;border-radius:4px;transform-origin:left}
.duration{font-size:11px;color:#66766f;font-variant-numeric:tabular-nums}
.footer{display:flex;justify-content:space-between;gap:18px;padding:25px 0 35px;border-top:1px solid #ffffff20;color:#a9bebb;font-size:11px;line-height:1.5}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:40px;padding:58px 0 70px}.intro-copy{padding-bottom:0;max-width:650px}.intro-copy>p{margin-bottom:23px}.workbench{margin:0;max-width:650px}}
@media(max-width:540px){.shell{padding:0 15px}.topbar{min-height:70px}.brand{font-size:16px}.prototype-label{font-size:10px;max-width:150px}.intro{padding:42px 0 55px;gap:32px}h1{font-size:clamp(39px,10.5vw,55px);margin-bottom:23px}.intro-copy>p{font-size:16px;line-height:1.55}.workbench{border-radius:13px}.workbench-top{min-height:57px;padding:0 17px}.workbench-title{font-size:12px}.workbench-status{font-size:10px}.stepper{height:65px;gap:5px;padding:0 12px}.step-button{font-size:10px;gap:4px}.step-number{width:22px;height:22px}.step-rail{max-width:12px}.scene-stage{height:420px}.scene{padding:22px 18px}.scene-heading{margin-bottom:20px}.scene-heading strong{font-size:19px}.client-line{gap:8px}.client-avatar{width:28px;height:28px;min-width:28px}.client-line>div{padding:11px 12px}.client-line p{font-size:12px}.request-sheet{margin-left:36px;padding:16px;max-width:calc(100% - 36px)}.price-row{gap:5px}.request-sheet small{font-size:10px}.message-body{margin:14px 12px 11px 30px;padding:12px;font-size:12px}.message-review{font-size:10px;padding-left:12px}.paper{min-height:262px;padding:20px 23px}.scene-foot{left:18px;right:18px;bottom:18px;font-size:11px}.playbar{padding:0 17px}.footer{flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene,.step-number,.step-button{transition:none!important}.paper{transform:none}}