:root{color-scheme:dark;--bg:#080a12;--panel:#0d101b;--panel2:#111522;--text:#f7f7fb;--muted:#a2a7b8;--line:rgba(173,181,208,.13);--purple:#7548ff;--purple2:#a342ff;--blue:#397dff;--max:1160px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:86px}
    body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    button{font:inherit}
    .wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
    .topbar{height:76px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(8,10,18,.84);backdrop-filter:blur(18px)}
    .nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:10px;font:800 27px/1 'Manrope',sans-serif;letter-spacing:-1.2px;white-space:nowrap}
    .brand-mark{width:37px;height:37px;display:grid;place-items:center;filter:drop-shadow(0 0 14px rgba(117,72,255,.35))}
    .brand-mark svg{width:100%;height:100%}
    .navlinks{display:flex;align-items:center;gap:36px;margin-left:56px}
    .navlinks a{font-size:13px;color:#c5c8d3;transition:color .2s}
    .navlinks a:hover,.navlinks a.active{color:#fff}
    .navlinks a.active:after{content:"";display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--purple2));margin-top:7px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;background:linear-gradient(110deg,#4b3cf5,#a33cf5);color:#fff;font-weight:600;font-size:13px;box-shadow:0 8px 28px rgba(105,57,255,.2);transition:transform .2s,box-shadow .2s,border-color .2s}
    .btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(105,57,255,.35)}
    .btn-outline{background:transparent;border-color:rgba(171,181,208,.25);box-shadow:none;color:#d4d6e0}
    .btn-outline:hover{border-color:rgba(172,127,255,.7);box-shadow:0 0 24px rgba(117,72,255,.12)}
    .arrow{font-size:18px;line-height:1}
    .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px;padding:7px}
    .hero{min-height:545px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);display:flex;align-items:center}
    .hero:before{content:"";position:absolute;width:500px;height:350px;right:13%;top:25px;background:radial-gradient(ellipse,rgba(71,31,221,.21),transparent 70%);filter:blur(18px);pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:.91fr 1.09fr;align-items:center;gap:32px;padding:49px 0 57px;position:relative}
    .eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#b1a1ff;font-weight:600}
    h1,h2,h3,p{margin-top:0}
    h1{font:800 clamp(38px,4.2vw,57px)/1.08 'Manrope',sans-serif;letter-spacing:-2.3px;margin:17px 0 19px;max-width:540px}
    .gradient-text{background:linear-gradient(100deg,#8660ff 8%,#bc4dff 60%,#5792ff);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero-copy{font-size:14px;line-height:1.85;color:var(--muted);max-width:460px;margin-bottom:24px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
    .hero-art{height:390px;position:relative;display:grid;place-items:center;perspective:1000px}
    .orb{position:absolute;width:340px;height:340px;right:2%;top:4%;border-radius:47% 53% 62% 38%/47% 48% 52% 53%;background:linear-gradient(140deg,#5627ec 8%,#25106e 53%,#15113e 73%);filter:drop-shadow(0 0 35px rgba(89,39,255,.48));transform:rotate(-18deg)}
    .orb:after{content:"";position:absolute;inset:13px;border-radius:inherit;background:linear-gradient(140deg,#090b14 18%,#110c2a 70%,transparent);}
    .light-trail{position:absolute;width:90%;height:80px;bottom:33px;left:4%;background:radial-gradient(ellipse,rgba(64,88,255,.54),rgba(112,35,255,.25) 33%,transparent 70%);filter:blur(14px)}
    .laptop{width:min(98%,610px);position:relative;z-index:2;transform:rotateY(-8deg) rotateX(2deg);filter:drop-shadow(0 20px 25px rgba(0,0,0,.5))}
    .screen{height:290px;border:2px solid #8792b0;border-bottom:5px solid #343a4d;border-radius:17px 17px 7px 7px;padding:11px;background:linear-gradient(145deg,#111725,#080c15 65%);box-shadow:inset 0 0 0 1px #0a0d16,0 0 30px rgba(46,81,255,.16);transform:rotate(-1deg)}
    .screen-inner{height:100%;overflow:hidden;border-radius:8px;background:#090d16;border:1px solid #252b3b;display:grid;grid-template-columns:112px 1fr 99px;font:10px/1.65 Consolas,monospace;color:#c5ccda}
    .app-side{border-right:1px solid #1c2330;padding:13px 9px;background:#0c111c;color:#9099ad;font-size:8px}
    .app-logo{font:700 12px 'Manrope',sans-serif;color:#f4f4fa;margin-bottom:18px;display:flex;gap:6px;align-items:center}
    .app-logo b{color:#8856ff;font-size:18px}
    .app-nav{padding:5px 6px;margin:4px 0;border-radius:5px}.app-nav.sel{background:#201a3a;color:#d9ccff}
    .code-area{padding:13px 12px;position:relative}
    .tab{font-size:8px;color:#d7dbea;border-bottom:1px solid #202638;padding-bottom:8px;margin:-1px -1px 12px}
    .ln{display:inline-block;width:18px;color:#596276}.kw{color:#c678dd}.fn{color:#61afef}.str{color:#d9c17d}.cm{color:#5e7792}
    .preview{margin:15px 9px;border:1px solid #242a3b;border-radius:8px;background:linear-gradient(155deg,#101627,#101024);padding:13px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 20px rgba(106,55,255,.14)}
    .preview-mark{font-size:33px;line-height:1;color:#7a50ff;text-shadow:0 0 20px #763fff;margin-bottom:9px}.preview p{font:600 9px/1.45 'DM Sans',sans-serif;color:#fff;margin:0}
    .base{height:25px;margin-top:-1px;background:linear-gradient(180deg,#8189a0,#282d3b 45%,#12151f);clip-path:polygon(7% 0,93% 0,100% 78%,96% 100%,4% 100%,0 78%);border-radius:0 0 18px 18px;position:relative}
    .base:after{content:"";position:absolute;top:0;left:42%;width:16%;height:4px;border-radius:0 0 8px 8px;background:#222837}
    .code-chip{position:absolute;z-index:3;left:6%;bottom:57px;padding:10px 15px;border-radius:10px;border:1px solid rgba(141,113,255,.3);background:rgba(13,15,29,.84);color:#c5b4ff;font:11px Consolas,monospace;box-shadow:0 8px 30px rgba(0,0,0,.3);backdrop-filter:blur(10px)}
    .why{padding:49px 0 68px;text-align:center;background:linear-gradient(180deg,rgba(10,12,21,.4),#090b13)}
    .section-title{font:800 clamp(27px,3vw,36px)/1.2 'Manrope',sans-serif;letter-spacing:-1.2px;margin:10px 0 10px}
    .section-lead{max-width:610px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.8}
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:34px}
    .feature{padding:0 10px}
    .feature-icon{width:53px;height:53px;border-radius:15px;margin:0 auto 12px;display:grid;place-items:center;color:#986cff;background:linear-gradient(145deg,rgba(91,54,188,.25),rgba(36,31,75,.45));border:1px solid rgba(135,93,255,.13);box-shadow:0 8px 30px rgba(57,37,137,.12)}
    .feature-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .feature h3{font:700 15px 'Manrope',sans-serif;margin:0 0 6px}
    .feature p{font-size:12px;color:var(--muted);line-height:1.7;margin:0 auto;max-width:225px}
    .services{padding:86px 0;border-top:1px solid var(--line);background:#0a0c15}
    .services-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
    .services-head .section-lead{margin:8px 0 0;max-width:480px}
    .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .service-card{min-height:200px;padding:25px;border-radius:17px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(20,24,39,.88),rgba(12,14,23,.88));transition:transform .2s,border-color .2s}
    .service-card:hover{transform:translateY(-4px);border-color:rgba(130,88,255,.42)}
    .service-card .feature-icon{margin:0 0 19px;width:45px;height:45px;border-radius:13px}
    .service-card h3{font:700 17px 'Manrope',sans-serif;margin-bottom:8px}
    .service-card p{font-size:13px;color:var(--muted);margin-bottom:0}
    .about{padding:82px 0;background:radial-gradient(ellipse at 15% 50%,rgba(77,42,177,.12),transparent 55%)}
    .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
    .about h2{font:800 clamp(29px,3.2vw,41px)/1.2 'Manrope',sans-serif;letter-spacing:-1.3px;margin:12px 0 15px}
    .about p{font-size:14px;color:var(--muted);line-height:1.85}
    .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
    .stat{padding:19px;border:1px solid var(--line);background:rgba(18,21,34,.72);border-radius:14px}
    .stat strong{display:block;font:800 27px 'Manrope',sans-serif;background:linear-gradient(90deg,#8d70ff,#c654ff);-webkit-background-clip:text;color:transparent}
    .stat span{font-size:12px;color:var(--muted)}
    .contact{padding:0 0 82px}
    .contact-panel{padding:46px 40px;border:1px solid rgba(142,103,255,.23);border-radius:22px;text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(105,55,223,.2),transparent 65%),linear-gradient(135deg,#111323,#0d0f19)}
    .contact-panel h2{font:800 clamp(26px,3vw,36px)/1.2 'Manrope',sans-serif;letter-spacing:-.8px;margin:8px 0}
    .contact-panel p{max-width:530px;margin:0 auto 22px;color:var(--muted);font-size:13px}
    footer{border-top:1px solid var(--line);padding:24px 0;color:#83899b;font-size:12px}
    .footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
    .footer-links{display:flex;gap:22px}.footer-links a:hover{color:white}
    @media(max-width:850px){.navlinks{gap:20px;margin-left:0}.hero-grid{grid-template-columns:1fr 1fr;gap:10px}.hero-art{transform:scale(.91);transform-origin:center right}.screen{height:245px}.screen-inner{grid-template-columns:85px 1fr 75px}.app-side{font-size:7px}.code-area{font-size:8px}.orb{width:280px;height:280px}.features{gap:18px}.about-grid{gap:35px}}
    @media(max-width:680px){.wrap{width:min(var(--max),calc(100% - 36px))}.topbar{height:67px}.brand{font-size:24px}.brand-mark{width:33px;height:33px}.nav>.btn{display:none}.menu-toggle{display:block}.navlinks{display:none;position:absolute;top:66px;left:0;right:0;padding:12px 22px 20px;background:rgba(8,10,18,.97);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:3px}.navlinks.open{display:flex}.navlinks a{padding:10px 2px}.navlinks a.active:after{display:none}.hero{min-height:0}.hero-grid{grid-template-columns:1fr;padding:55px 0 40px;gap:15px}.hero-copy{max-width:540px}.hero-art{height:300px;transform:none;transform-origin:center}.orb{width:250px;height:250px;right:7%;top:1%}.laptop{width:min(100%,500px)}.screen{height:215px}.screen-inner{grid-template-columns:75px 1fr 70px}.app-side{padding:8px 5px}.app-logo{font-size:9px;margin-bottom:10px}.app-nav{padding:3px}.code-area{padding:9px 7px;font-size:7px}.preview{margin:10px 4px;padding:8px 3px}.preview-mark{font-size:24px}.preview p{font-size:7px}.base{height:19px}.code-chip{bottom:35px;left:1%;font-size:9px}.why{padding:46px 0 54px}.features{grid-template-columns:repeat(2,1fr);row-gap:28px}.services{padding:62px 0}.services-head{display:block}.services-head .btn{margin-top:18px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.about{padding:60px 0}.about-grid{grid-template-columns:1fr;gap:25px}.contact{padding-bottom:55px}.contact-panel{padding:36px 20px}.footer-row{flex-direction:column;text-align:center}.footer-links{gap:16px}}
    @media(max-width:380px){.hero-actions .btn{padding:0 16px}.screen{height:188px}.screen-inner{grid-template-columns:65px 1fr 60px}.features{gap:20px 8px}.feature{padding:0 3px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
      /* Hero polish: closer to the reference layout and stronger depth on the laptop. */
    .hero{min-height:420px}
    .hero:before{width:600px;height:400px;right:9%;top:5px;background:radial-gradient(ellipse,rgba(78,37,255,.28),rgba(44,30,163,.09) 40%,transparent 72%);filter:blur(20px)}
    .hero-grid{grid-template-columns:.88fr 1.12fr;gap:22px;padding:38px 0 42px}
    h1{font-size:clamp(36px,4.1vw,51px);line-height:1.06;letter-spacing:-2px;margin:16px 0 17px;max-width:510px}
    .hero-art{height:350px}
    .orb{width:365px;height:365px;right:-1%;top:-2%;background:conic-gradient(from 25deg at 50% 50%,#4215e8,#9b23ff,#3816ca,#592cff,#271074,#4215e8);filter:drop-shadow(0 0 43px rgba(97,48,255,.7))}
    .orb:after{inset:15px;background:linear-gradient(145deg,#090b14 15%,#100c26 67%,#11112d)}
    .light-trail{width:105%;height:94px;bottom:15px;left:-1%;background:radial-gradient(ellipse,rgba(55,88,255,.63),rgba(113,36,255,.33) 36%,transparent 72%);filter:blur(16px)}
    .laptop{width:min(108%,660px);transform:rotateY(-15deg) rotateX(3deg) rotateZ(-1deg);filter:drop-shadow(0 25px 31px rgba(0,0,0,.57))}
    .screen{border-color:#929bb8;box-shadow:inset 0 0 0 1px #0a0d16,0 0 38px rgba(64,72,255,.24)}
    .code-chip{display:none}
    @media(max-width:850px){.hero-grid{grid-template-columns:.92fr 1.08fr;gap:10px}.hero-art{transform:scale(.95);transform-origin:center right}.orb{width:300px;height:300px}}
    @media(max-width:680px){.hero-grid{grid-template-columns:1fr;padding:43px 0 33px;gap:8px}.hero-art{height:285px;transform:none}.orb{width:260px;height:260px;right:7%;top:1%}.laptop{width:min(105%,520px);transform:rotateY(-12deg) rotateX(2deg) rotateZ(-1deg)}h1{font-size:clamp(32px,9vw,42px);letter-spacing:-1.7px}}
  
/* The laptop interface is decorative, so its mock code cannot be selected. */
.hero-art, .hero-art * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
/* Refined editor window and product preview inside the laptop. */
.screen-inner {
  grid-template-columns: 112px minmax(0, 1fr) 118px;
  grid-template-rows: 31px minmax(0, 1fr);
  background: #0a0e17;
  color: #d5deed;
  font: 10px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.window-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border-bottom: 1px solid #1b2230;
  background: linear-gradient(180deg, #121824, #0e131d);
  color: #78849b;
}
.window-controls, .window-location, .window-tools { display: flex; align-items: center; }
.window-controls { gap: 5px; }
.window-controls i, .preview-browser i { width: 6px; height: 6px; border-radius: 50%; background: #fb5f57; }
.window-controls i:nth-child(2), .preview-browser i:nth-child(2) { background: #f4bd4f; }
.window-controls i:nth-child(3), .preview-browser i:nth-child(3) { background: #35c96f; }
.window-location { gap: 6px; font: 9px "DM Sans", sans-serif; color: #aab4c5; }
.location-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, #7548ff, #a342ff); color: white; font: 700 9px "Manrope", sans-serif; }
.location-sep { color: #4f5a70; }
.window-tools { gap: 10px; font-size: 14px; }
.app-side { grid-column: 1; grid-row: 2; position: relative; padding: 11px 9px 32px; border-right: 1px solid #1d2432; background: linear-gradient(180deg, #0d131d, #0c111a); color: #8792a7; font: 8px/1.4 "DM Sans", sans-serif; }
.app-logo { gap: 7px; margin: 0 2px 17px; font: 700 11px "Manrope", sans-serif; }
.app-logo b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(123, 82, 255, .16); color: #9b7bff; font-size: 14px; }
.app-logo i { width: 5px; height: 5px; border-radius: 50%; background: #3dd69a; margin-left: auto; box-shadow: 0 0 8px rgba(61,214,154,.7); }
.side-caption { margin: 0 4px 7px; color: #58647a; font: 600 6px "DM Sans", sans-serif; letter-spacing: .13em; }
.app-nav { display: flex; align-items: center; gap: 7px; margin: 3px 0; padding: 6px 6px; border: 1px solid transparent; border-radius: 6px; color: #8c96a9; }
.app-nav.sel { border-color: rgba(126, 88, 255, .16); background: linear-gradient(90deg, rgba(113, 74, 255, .2), rgba(113, 74, 255, .08)); color: #ded5ff; }
.side-icon { width: 12px; color: #75819a; text-align: center; font-size: 10px; }
.app-nav.sel .side-icon { color: #a58aff; }
.side-bottom { position: absolute; bottom: 8px; left: 9px; right: 9px; display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid #1b2230; color: #8e99ac; font-size: 7px; }
.avatar { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; background: linear-gradient(135deg,#2a3450,#39445c); color: #cbd4e6; font-size: 6px; }
.more { margin-left: auto; color: #66728a; font-size: 13px; }
.code-area { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; padding: 0; background: #0a0e17; }
.tab { display: flex; align-items: center; gap: 7px; height: 30px; flex: 0 0 30px; margin: 0; padding: 0 9px; border-bottom: 1px solid #1b2230; color: #d6deec; font: 9px "DM Sans", sans-serif; }
.file-icon { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: rgba(241, 180, 87, .14); color: #e6b263; font: 700 6px "DM Sans", sans-serif; }
.tab-close { margin-left: auto; color: #5f6a7e; font-size: 13px; }
.code-lines { flex: 1; min-height: 0; padding: 8px 0 4px; overflow: hidden; }
.code-row { display: flex; align-items: center; height: 19px; white-space: pre; color: #c9d4e6; font: 9px/19px "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.code-row code { font: inherit; }
.code-row .ln { flex: 0 0 30px; width: 30px; padding-right: 10px; color: #49566c; text-align: right; }
.code-row.active-line { background: rgba(122, 92, 255, .08); box-shadow: inset 2px 0 #7858ec; }
.kw { color: #c792ea; }
.prop { color: #9fbdff; }
.str { color: #c3df93; }
.arg { color: #f0b77b; }
.op { color: #82c9ff; }
.fn { color: #80caff; }
.cm { color: #697c96; }
.caret { display: inline-block; width: 1px; height: 11px; margin-left: 1px; vertical-align: -2px; background: #a78bfa; }
.editor-status { display: flex; align-items: center; justify-content: space-between; height: 17px; flex: 0 0 17px; padding: 0 8px; border-top: 1px solid #1b2230; color: #69758b; font: 7px "DM Sans", sans-serif; }
.editor-status i, .preview-tag i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #46d39b; }
.preview { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-width: 0; margin: 11px 9px; padding: 0 7px 8px; overflow: hidden; border: 1px solid #252c3c; border-radius: 8px; background: linear-gradient(155deg, #121929, #0e1220 58%, #111027); box-shadow: 0 9px 23px rgba(0,0,0,.22), 0 0 16px rgba(105,70,255,.1); text-align: left; }
.preview-browser { display: flex; align-items: center; gap: 3px; height: 18px; margin: 0 -7px 9px; padding: 0 6px; border-bottom: 1px solid #252d3c; background: rgba(255,255,255,.015); }
.preview-browser i { width: 4px; height: 4px; }
.preview-browser b { margin-left: auto; color: #7e8aa0; font: 6px "DM Sans", sans-serif; }
.preview-browser > span:last-child { color: #65728a; font-size: 7px; }
.preview-art { position: relative; display: grid; place-items: center; height: 46px; margin: 0 2px 8px; overflow: hidden; border: 1px solid rgba(147,116,255,.18); border-radius: 6px; background: radial-gradient(ellipse at 55% 80%, rgba(126,74,255,.5), transparent 55%), linear-gradient(140deg, #171b36, #17102d 68%, #10162c); }
.preview-art:before, .preview-art:after { content: ""; position: absolute; width: 56px; height: 20px; border: 1px solid rgba(142,112,255,.32); border-radius: 50%; transform: rotate(-28deg); }
.preview-art:after { width: 42px; height: 14px; transform: rotate(31deg); border-color: rgba(71,142,255,.34); }
.preview-art > span { position: relative; z-index: 1; color: #c8baff; font: 700 24px "Manrope", sans-serif; text-shadow: 0 0 17px #8d61ff; }
.preview-art > i { position: absolute; width: 7px; height: 7px; right: 15px; top: 9px; border-radius: 50%; background: #7b59ff; box-shadow: 0 0 12px #8d61ff; }
.preview-copy { display: flex; flex-direction: column; gap: 1px; margin: 0 1px 8px; font: 7px/1.35 "DM Sans", sans-serif; }
.preview-copy strong { color: #f0efff; font-size: 8px; }
.preview-copy span { color: #8d97ad; }
.preview-tag { margin: auto 1px 7px; color: #8792aa; font: 5px "DM Sans", sans-serif; letter-spacing: .08em; }
.preview-tag i { width: 4px; height: 4px; margin-right: 3px; }
.preview-button { display: flex; align-items: center; justify-content: space-between; height: 19px; padding: 0 6px; border: 1px solid rgba(163,130,255,.26); border-radius: 5px; background: linear-gradient(100deg, rgba(101,67,226,.38), rgba(124,57,203,.3)); color: #e5dcff; font: 6px "DM Sans", sans-serif; }
@media(max-width:850px) {
  .screen-inner { grid-template-columns: 88px minmax(0, 1fr) 92px; }
  .app-side { padding-inline: 6px; }
  .side-bottom { left: 6px; right: 6px; }
  .code-row { font-size: 8px; }
  .code-row .ln { flex-basis: 24px; width: 24px; padding-right: 7px; }
  .preview { margin-inline: 6px; padding-inline: 6px; }
}
@media(max-width:680px) {
  .screen-inner { grid-template-columns: 70px minmax(0, 1fr) 72px; grid-template-rows: 25px minmax(0,1fr); }
  .window-bar { padding-inline: 7px; }
  .window-controls { gap: 3px; }
  .window-controls i { width: 5px; height: 5px; }
  .window-location { font-size: 7px; }
  .window-tools { gap: 5px; font-size: 11px; }
  .app-side { padding: 8px 4px 27px; font-size: 6px; }
  .app-logo { gap: 4px; margin: 0 1px 11px; font-size: 8px; }
  .app-logo b { width: 15px; height: 15px; font-size: 11px; }
  .side-caption { font-size: 5px; }
  .app-nav { gap: 3px; padding: 5px 3px; font-size: 6px; }
  .side-icon { width: 9px; font-size: 8px; }
  .side-bottom { left: 4px; right: 4px; font-size: 5px; }
  .avatar { width: 13px; height: 13px; font-size: 5px; }
  .tab { height: 24px; flex-basis: 24px; gap: 4px; padding-inline: 5px; font-size: 7px; }
  .file-icon { width: 11px; height: 11px; font-size: 5px; }
  .code-lines { padding-top: 6px; }
  .code-row { height: 17px; line-height: 17px; font-size: 6.5px; }
  .code-row .ln { flex-basis: 19px; width: 19px; padding-right: 5px; }
  .editor-status { height: 14px; flex-basis: 14px; padding-inline: 4px; font-size: 5px; }
  .preview { margin: 8px 4px; padding: 0 4px 5px; border-radius: 6px; }
  .preview-browser { height: 14px; margin: 0 -4px 6px; padding-inline: 4px; }
  .preview-browser i { width: 3px; height: 3px; }
  .preview-art { height: 34px; margin-bottom: 6px; }
  .preview-art > span { font-size: 18px; }
  .preview-copy { font-size: 6px; }
  .preview-copy strong { font-size: 6px; }
  .preview-tag { font-size: 4px; }
  .preview-button { height: 15px; font-size: 5px; }
}
/* Keep the tiny interface text crisp at browser scale. */
.laptop { transform: none; }
.screen { transform: none; }
.hero-art { transform: none; }
.screen-inner { font-size: 11px; }
.window-location { font-size: 10px; }
.app-side { font-size: 9px; }
.side-caption { font-size: 7px; }
.app-nav { font-size: 9px; }
.side-icon { font-size: 11px; }
.tab { font-size: 10px; }
.code-row { height: 17px; line-height: 17px; font-size: 10px; }
.code-row .ln { font-size: 8px; }
.editor-status { font-size: 8px; }
.preview-copy { font-size: 7px; }
.preview-copy strong { font-size: 9px; }
.preview-tag { font-size: 6px; }
.preview-button { font-size: 7px; }
@media(max-width:850px) {
  .screen-inner { grid-template-columns: 88px minmax(0, 1fr) 92px; }
  .window-location { font-size: 8px; }
  .app-side, .app-nav { font-size: 8px; }
  .side-caption { font-size: 6px; }
  .code-row { font-size: 9px; }
  .code-row .ln { font-size: 7px; }
  .preview-copy strong { font-size: 8px; }
}
@media(max-width:680px) {
  .screen-inner { grid-template-columns: 70px minmax(0, 1fr) 72px; }
  .window-location { font-size: 7px; }
  .app-side, .app-nav { font-size: 7px; }
  .side-caption { font-size: 5px; }
  .code-row { height: 17px; line-height: 17px; font-size: 8px; }
  .code-row .ln { font-size: 6px; }
  .editor-status { font-size: 5px; }
  .preview-copy strong { font-size: 7px; }
  .preview-tag { font-size: 4px; }
  .preview-button { font-size: 6px; }
}
.laptop { filter: none; }