*{box-sizing:border-box;min-width:0;min-height:0}
:root{color-scheme:dark;--bg:#030303;--ink:#ededE7;--muted:#bdbdb7;--heading-size:15px;--entry-size:14px;--body-size:12px;--caption-size:10px}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden}
body{font-family:"DejaVu Sans Mono","Noto Sans Mono CJK SC",monospace;font-size:var(--body-size);font-weight:400;-webkit-font-smoothing:antialiased}
p,h1,h2,h3{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:hover .entry-title,.contacts a:hover,.contacts button:hover{text-decoration:underline;text-underline-offset:4px}a:focus-visible,button:focus-visible{outline:1px dashed var(--ink);outline-offset:3px}
.terminal{height:100svh;width:100%;padding:8px 11px;display:grid;grid-template-rows:32px 24px 403px minmax(0,1fr) 24px;gap:8px 0;transform-origin:top left;overflow:hidden}
.framed{position:relative;isolation:isolate;overflow:hidden}.frame-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.safe-content{overflow:hidden}.artwork{display:block;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:3px 16px;gap:20px}.system-name{font-size:18px;line-height:22px;white-space:nowrap;letter-spacing:-.4px}.system-name span{font-size:15px}.system-status{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:10px;line-height:16px}.system-status b{font-size:8px;margin-left:5px}
.navigation{display:flex;align-items:center;gap:20px;padding:1px 18px;overflow:hidden;font-size:11px;line-height:18px}.navigation a{padding:1px 5px;white-space:nowrap}.navigation .is-current{background:var(--ink);color:var(--bg)}.nav-caption{margin-left:auto;font-size:10px;white-space:nowrap;letter-spacing:.2px}
.hero{margin:0}.hero-inset{position:absolute;inset:5px;z-index:-1}.hero-terminal{position:absolute;left:26px;top:20px;width:220px;height:210px;font-size:11px;line-height:15px}.commands{margin-top:14px}.rule{font-size:18px;line-height:14px;letter-spacing:-1px}.hero-terminal .rule{margin-top:10px}.terminal-quote{margin-top:16px;font-size:13px;line-height:21px;letter-spacing:.3px}
.portrait{position:absolute;left:21.4%;top:4%;width:30%;height:94%;z-index:2;background:transparent}.terrain{position:absolute;left:18px;bottom:36px;width:21%;height:72px;z-index:0}.satellite{position:absolute;left:15.4%;top:49%;width:28px;height:28px;z-index:0}
.hero-copy{position:absolute;left:52%;top:14%;width:46%;height:calc(89% - 28px);z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.hero-copy h1,#headline{height:74px;overflow:hidden;flex-shrink:0}#headline{width:430px;max-width:100%}.welcome{margin-top:14px;font-size:22px;line-height:32px;letter-spacing:1.4px}.intro-rule{margin-top:16px}.hero-description{margin-top:12px;font-size:13px;line-height:22px;letter-spacing:.3px}.log-rule{margin-top:16px}.status-logs{margin-top:12px;font-size:11px;line-height:18px;white-space:nowrap}.corner-copy{position:absolute;right:20px;top:18px;width:91px;font-size:8px;line-height:12px}.corner-copy span{display:inline-block;margin-top:6px}
.world{position:absolute;right:18px;bottom:36px;width:250px;height:118px;z-index:1}.world #globe{width:100%;height:100%}.globe-labels{position:absolute;left:132px;top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:112px;font-size:8px;line-height:10px;text-align:left}.globe-labels span{display:block;width:100%;text-align:left;white-space:nowrap}.hero-caption{position:absolute;bottom:12px;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden}.caption-left{left:26px;max-width:38%}.caption-right{right:22px;max-width:40%}
.columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;overflow:hidden;container-type:size;container-name:cards}
.card{display:grid;grid-template-rows:42px minmax(0,1fr) 28px;overflow:hidden}.card-heading{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:var(--heading-size);line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden}.number{display:block;flex-shrink:0;background:var(--ink);color:var(--bg);font-size:15px;font-weight:700;line-height:17px;padding:0 1px}.card-heading i{font-style:normal;font-size:12px;margin:0 2px}.card-heading small{font-size:10px;font-weight:400;line-height:16px}
.card-body{padding:22px 18px 12px;overflow:hidden;display:flex;flex-direction:column;gap:16px}.entry{display:block;flex-shrink:0;overflow:hidden}.entry-title{font-size:var(--entry-size);font-weight:500;line-height:20px;color:var(--ink);overflow-wrap:anywhere}.entry-description{font-size:var(--body-size);font-weight:400;line-height:18px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}.entry-list{justify-content:flex-start;gap:18px}.contacts{display:grid;gap:4px;font-size:var(--body-size);line-height:17px;color:var(--muted)}.contacts a,.contacts button{display:block;text-align:left;line-height:17px;white-space:nowrap;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}.contacts span{font-size:10px;color:var(--ink)}
.card-caption{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 19px 6px;font-size:var(--caption-size);line-height:14px;white-space:nowrap;overflow:hidden;color:var(--muted)}.card-caption span{color:var(--ink)}
.product-content{display:flex;align-items:center;justify-content:center;padding:22px 22px 14px}.product{width:100%;height:100%;max-height:none;padding:24px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}.product .entry-description{margin:0}.product .entry-title{letter-spacing:1.4px}#product-art{width:96px;height:32px;flex-shrink:0}
.footer{display:flex;justify-content:space-between;align-items:center;padding:3px 16px;gap:24px;font-size:10px;line-height:16px;letter-spacing:.3px;white-space:nowrap}
.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}
@container cards (max-height:230px){.card-body{padding-top:11px;gap:9px}.entry-description{margin-top:3px}.card{grid-template-rows:38px minmax(0,1fr) 24px}.contacts{gap:2px}.card-heading{padding-top:5px;padding-bottom:5px}.entry-list{gap:7px}.product-content{padding-top:11px}}
@container cards (max-height:210px){.card-body{padding-top:10px;padding-bottom:5px}.card{--body-size:11px;--entry-size:13px;--caption-size:9px;grid-template-rows:35px minmax(0,1fr) 21px}.entry-title{line-height:18px}.entry-description{line-height:15px;margin-top:3px}.contacts,.contacts a,.contacts button{line-height:15px}.card-body{gap:7px}.product{padding:8px}.card-caption{line-height:12px;padding-bottom:4px}}
@container cards (max-height:185px){.card .entry-description{display:none}.card .contacts{margin-top:4px}.card-body{padding-top:12px;padding-bottom:8px}.entry-list{justify-content:space-around}.card{grid-template-rows:34px minmax(0,1fr) 19px}.product .entry-description{display:block}.product{gap:5px}#product-art{height:25px}}
@media(min-width:1500px){.hero-copy{width:45%}#headline,.hero-copy h1{height:92px}#headline{width:460px}.welcome{margin-top:16px;font-size:22px;line-height:32px}.hero-description{font-size:14px;line-height:22px}.status-logs{font-size:12px;line-height:18px}.hero-terminal{font-size:12px;line-height:16px}.terminal-quote{font-size:14px;line-height:22px}.world{width:270px;height:128px}.globe-labels{left:142px;top:16px;font-size:8px;gap:9px;width:120px}.card-body{padding-top:24px}.entry-list{justify-content:start;gap:16px}}
@media(max-width:1100px){.terminal{width:1280px;height:800px;padding:8px 11px;grid-template-rows:32px 24px 403px minmax(0,1fr) 24px;gap:8px 0}}
@media(max-height:690px) and (min-width:1101px){.terminal{grid-template-rows:30px 22px 340px minmax(0,1fr) 22px;padding-top:6px;padding-bottom:6px;gap:6px 0}.hero-copy{top:8%}#headline,.hero-copy h1{height:72px}.welcome{margin-top:10px}.intro-rule,.log-rule{margin-top:12px}.hero-terminal{top:16px}.hero-caption{bottom:10px}}

/* T6 fine: preserve the layout, share text edges and character rhythm. */
.hero-copy{align-items:flex-start;text-align:left}
.hero-copy h1{width:430px;max-width:100%}
.card-heading{display:flex;gap:10px;align-items:center}
.card-heading .number{justify-self:start;font-size:15px;line-height:18px}
.card-heading>span{font-size:15px;font-weight:500;line-height:20px}
.card-heading i{margin:0;font-size:12px;line-height:20px}
.card-heading small{font-size:15px;font-weight:500;line-height:20px}
.card-body{text-align:left;gap:20px;padding-top:18px;padding-bottom:4px}
.entry-list{gap:18px}
.entry-description{margin-top:8px;line-height:19px}
.contacts{gap:7px}
.product{align-items:center;text-align:center;gap:16px}
@container cards (max-height:230px){.card-body{gap:9px}.entry-list{gap:9px}.entry-description{margin-top:3px;line-height:18px}.contacts{gap:3px}}
@container cards (max-height:210px){.entry-description{line-height:15px}.contacts{gap:2px}}

/* V2: optical grouping, hanging prompts and fuller left-side artwork. */
.card-heading .number{margin-right:1px}
.card-heading i{font-size:15px}
.entry-list .entry-title{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:8px}
.entry-list .entry-description{margin-left:18px}
.hero-terminal{font-size:12px;line-height:18px;height:246px;width:238px}
.commands{margin-top:14px;line-height:17px}
.hero-terminal .rule{margin-top:13px}
.terminal-quote{position:absolute;top:174px;left:0;margin-top:0;line-height:22px}
.terrain{width:36%;height:80px;bottom:34px}
.satellite{left:calc(17.5% - 3px);top:calc(52% - 3px);width:44px;height:44px}
.starfield{position:absolute;left:18px;top:18px;width:calc(100% - 36px);height:330px;pointer-events:none}
.globe-labels{top:12px;gap:10px;color:#deded7}

/* V4: greeting above the existing noise title; shared left edge and rhythm. */
.hero-copy .welcome{margin-top:0;font-size:28px;line-height:34px;flex-shrink:0}
.hero-copy h1{width:530px;max-width:100%;height:68px;margin-top:14px}
#headline{width:100%;height:68px}
.hero-copy .intro-rule{margin-top:20px}
.hero-copy .hero-description{margin-top:14px}
.hero-copy .log-rule{margin-top:18px}
.hero-copy .status-logs{margin-top:10px}

/* V5: keep the globe/labels on the upper decoration's actual right edge. */
.globe-labels{left:auto;right:0;width:max-content}

/* V8 */
.hero-copy{left:50.5%;top:14%}
.portrait{left:21%}
.hero-heading{flex-shrink:0;margin-top:16px}
.hero-copy .welcome{margin-top:0}
.hero-copy h1{width:500px;margin-top:4px}
.hero-copy .intro-rule{margin-top:12px}
.hero-copy .hero-description{margin-top:10px}
.hero-copy .log-rule{margin-top:14px}
.hero-copy .status-logs{margin-top:8px}
.corner-copy span{display:block;margin-top:4px;line-height:10px;width:max-content}

/* V9 */
.hero-copy{left:49.4%;top:10%}
.portrait{left:20.4%}

/* V10 */
.hero-copy{left:51%;overflow:visible}
.hero-copy .intro-rule{margin-top:8px}
.hero-copy .hero-description{margin-top:8px}
.hero-copy .log-rule{margin-top:10px}
.hero-copy .status-logs{margin-top:6px}

/* Reference-only homepage visual layers. All content/module geometry stays locked. */
.hero .portrait{left:16px;top:18px;width:604.5px;height:343.2px;z-index:2;pointer-events:none}
.hero .terrain,.hero .satellite{display:none}
.hero .starfield{left:16px;top:0;width:calc(100% - 34px);height:100%;z-index:0}
.hero .world{right:18px;bottom:36px;width:292.6px;height:128.1px}
.hero .globe-labels{left:196px;right:auto;top:7px;width:96px;gap:0;font-size:8px;line-height:10px;color:var(--ink)}
.hero .globe-labels span:nth-child(2){margin-top:10px}
.hero .globe-labels span:nth-child(3){margin-top:9px}
.hero .globe-labels span:nth-child(4){margin-top:8px}
@media(max-height:690px) and (min-width:1101px){.hero .portrait{width:527px;height:299.2px;top:12px}.hero .world{bottom:30px}}

.hero .portrait,.hero .starfield,.hero #globe{mix-blend-mode:screen}