/* Project palette; the screenshots provide the visual focus. */
:root{--bg:#202326;--panel:#2b2f33;--ink:#f0f2f4;--muted:#bbc3cb;--accent:#69b7e8;--line:#535d66;font-family:"Segoe UI",Arial,sans-serif}body{font-family:"Segoe UI",Arial,sans-serif}.preview{background:#294c60;color:#c5e8fc}.hero{grid-template-columns:.75fr 1.3fr;gap:45px;padding:60px 0 85px}.hero h1{font-size:clamp(38px,4vw,58px)}.primary{background:#3c9fda;color:#fff}.primary:hover{background:#238cc7}.dot{display:inline-block}.strip{background:#292d31}.guide-section{background:#f1f4f6;color:#17242d}.guide-section .eyebrow{color:#0073a8}.section-intro,figcaption{color:#465b68}.guide-section a{color:#006a9e}aside{border-color:#c3ced5}aside a,.steps article{border-color:#c3ced5}aside a:hover{color:#0073a8}.number{color:#0073a8;border-color:#9eafba}.steps code{background:#e8eef2}.note{background:#d7ecf6;border-color:#0073a8}.screenshot-stage{position:relative;height:465px;min-width:0}.screen{position:absolute;display:block;border:1px solid #535d66;border-radius:7px;background:#2b2f33;padding:7px;box-shadow:0 18px 35px #0006;text-decoration:none;transition:box-shadow .2s}.screen:hover{box-shadow:0 22px 45px #0009}.screen>span{display:block;color:#bbc3cb;font-size:9px;letter-spacing:.1em;line-height:1.5;padding:3px 3px 7px}.screen span .dot{width:5px;height:5px;margin-right:5px}.screen img{border-radius:3px;width:100%}.screen-catalog{width:83%;top:0;left:0;transform:rotate(-3deg);z-index:1}.screen-details{width:28%;right:-1%;top:48px;transform:rotate(3deg);z-index:2}.screen-home{width:90%;left:3%;top:150px;z-index:3;transform:rotate(-.7deg)}.composition-caption{position:absolute;bottom:-5px;left:3%;font-size:12px;color:#bbc3cb}.footer-coffee{background:transparent;color:var(--muted);font-size:13px;border:0;padding:0;text-align:left;text-decoration:underline;text-underline-offset:4px}.footer-coffee:hover{color:var(--accent)}.step-image{max-width:410px;margin:24px 0}.step-image img{border:1px solid #9eafba;border-radius:5px;max-height:240px;width:auto;object-fit:contain}.step-image figcaption{font-size:12px}.guide-section figure img{border:1px solid #9eafba}dialog{border-radius:8px}dialog .primary{background:#294c60;border:1px solid #69b7e8}.brand{color:#f0f2f4}.hero .lead{max-width:430px}@media(max-width:900px){.hero{grid-template-columns:1fr}.screenshot-stage{height:540px;max-width:760px;width:100%;margin:auto}.screen-home{top:180px}.composition-caption{bottom:0}}@media(max-width:600px){.screenshot-stage{height:auto;display:grid;grid-template-columns:1fr;gap:15px}.screen{position:static;width:100%;transform:none}.screen-home{order:-1}.screen-details{width:55%;margin:auto}.composition-caption{position:static}.hero{padding:35px 0}.hero h1{font-size:43px}.step-image{max-width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.screen{transition:none}}@media print{.screenshot-stage{display:none}}
.screenshot-stage{height:520px}.screen-home{width:78%;left:4%;top:220px}.screen-catalog{width:88%}.screen-details{width:26%;top:75px;right:0}.detail-crop{position:relative;overflow:hidden;aspect-ratio:294/565}.detail-crop img{position:absolute;max-width:none;width:435.374%;left:-331.292%;top:-21.239%;border-radius:0}.connection-crop,.simulation-crop{display:block;position:relative;overflow:hidden;border-radius:5px}.connection-crop{width:282px;max-width:100%;aspect-ratio:282/219}.simulation-crop{width:410px;max-width:100%;aspect-ratio:828/125}.step-image .connection-crop img{position:absolute;max-width:none;max-height:none;width:453.9%;left:-347.16%;top:-183.56%;border:0}.step-image .simulation-crop img{position:absolute;max-width:none;max-height:none;width:154.59%;left:-46.014%;top:-114.4%;border:0}@media(max-width:900px){.screenshot-stage{height:580px}.screen-home{top:240px}}@media(max-width:600px){.screenshot-stage{height:auto}.screen-home,.screen-catalog{width:100%}.screen-details{width:55%}}
.connection-crop{width:410px;aspect-ratio:460/104}.step-image .connection-crop img{width:135%;left:-31.52%;top:-701.92%}.simulation-crop{aspect-ratio:315/139}.step-image .simulation-crop img{width:197.143%;left:-86.03%;top:-169.06%}

/* Calmer guide surface and stable, self-contained illustrations. */
.guide-section{background:#cdd5da;color:#20303b}.guide-section .section-intro,.guide-section figcaption{color:#405565}.guide-section .eyebrow,.guide-section a{color:#155575}.guide-section .note{background:#bbcbd6;border-color:#28769f}.guide-section .steps code{background:#bdc9d1}.guide-section aside,.guide-section aside a,.guide-section .steps article{border-color:#a5b5c0}.guide-section .number{color:#155575;border-color:#8098aa}.screen-catalog{width:93%;left:3%;top:0}.screen-home{width:93%;left:0;top:210px}.screenshot-stage{height:585px}.step-image{max-width:560px}.step-image .guide-illustration{display:block;width:100%}.step-image .guide-illustration img{position:static;width:100%;height:auto;max-height:none;max-width:100%;border:1px solid #8098aa;object-fit:contain}.step-image:has(.guide-illustration){max-width:510px}.composition-caption{bottom:0}@media(max-width:900px){.screenshot-stage{height:650px}.screen-home{top:235px}}@media(max-width:600px){.screenshot-stage{height:auto}.screen-catalog,.screen-home{width:100%}.guide-section{background:#cdd5da}}@media print{.guide-section{background:#fff}.guide-section .note{background:#eee}}