:root {
  --ink: #141715;
  --ink-soft: #1d211e;
  --paper: #f3ead7;
  --paper-deep: #e8ddc5;
  --paper-soft: #f8f1e4;
  --red: #bc3e31;
  --red-dark: #8e2e27;
  --gold: #c18b38;
  --green: #2f5b47;
  --muted: #858d86;
  --line: rgba(240, 245, 236, .16);
  --paper-line: rgba(76, 50, 30, .18);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Be Vietnam Pro", sans-serif;
  --body: "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: #f3f4ef; font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
*:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell { min-height: 100vh; overflow: hidden; }
.container { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.section-pad { padding-top: 128px; padding-bottom: 128px; }
.section-pad--tight { padding-top: 90px; padding-bottom: 90px; }
.section-pad--small { padding-top: 34px; padding-bottom: 48px; }
.section-pad--topless { padding-top: 0; }
.skip-link { position: fixed; z-index: 50; left: 20px; top: -60px; padding: 10px 14px; background: var(--red); color: #fff; font: 12px var(--mono); transition: top .2s ease; }
.skip-link:focus { top: 20px; }
.site-header { width: min(1280px, calc(100% - 64px)); height: 74px; margin: 18px auto 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; font: 11px var(--mono); letter-spacing: .05em; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); background: #e8ece2; font: 700 14px var(--display); letter-spacing: -.08em; }
.brand-mark--red { color: #fff; background: var(--red); }
.brand-slash { color: var(--red); }
.site-nav { display: flex; align-items: center; gap: 34px; position: relative; padding: 0 5px 7px; color: #9ea59e; }
.site-nav a { position: relative; z-index: 1; transition: color .25s ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active { color: #f4f5ef; }
.nav-indicator { position: absolute; z-index: 0; left: var(--nav-left, 0px); bottom: 0; width: var(--nav-width, 0px); height: 24px; border: 1px solid rgba(188, 62, 49, .32); background: rgba(188, 62, 49, .08); border-radius: 2px; pointer-events: none; opacity: .75; transition: left .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease; overflow: hidden; }
.nav-indicator::before { content: ""; position: absolute; left: -24%; top: 0; width: 22%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 217, 190, .45), transparent); animation: navScan 2.7s ease-in-out infinite; }
.site-nav:hover .nav-indicator { opacity: 1; background: rgba(188, 62, 49, .14); border-color: rgba(188, 62, 49, .6); }
.site-header--paper .nav-indicator { background: rgba(188, 62, 49, .09); border-color: rgba(142, 46, 39, .28); }
.site-header--paper .site-nav:hover .nav-indicator { background: rgba(188, 62, 49, .16); }
.nav-toggle { display: none; width: 44px; height: 40px; padding: 0; place-content: center; gap: 6px; color: #cdd5ca; border: 1px solid #374039; background: transparent; cursor: pointer; }
.nav-toggle span { width: 16px; height: 1px; display: block; background: currentColor; transition: transform .3s ease, width .3s ease; }
.nav-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open span:last-child { width: 16px; transform: translateY(-3.5px) rotate(-45deg); }
.site-header--paper .nav-toggle { color: #5b4a3a; border-color: var(--paper-line); }
.nav-tet-link { color: #d5a69d !important; }
.nav-dot, .status-pulse { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(188, 62, 49, .14); margin-right: 7px; vertical-align: 1px; }
.status-pulse { width: 5px; height: 5px; background: #79a876; box-shadow: 0 0 0 4px rgba(121, 168, 118, .12); }
.header-status { color: #788078; font-size: 10px; }
.site-header--paper .site-nav { color: #867b69; }
.site-header--paper .site-nav a:hover, .site-header--paper .site-nav a:focus-visible, .site-header--paper .site-nav a.is-active { color: var(--red-dark); }
.header-status--paper { color: #827765; }
.site-header--paper .brand { color: var(--ink); }

.eyebrow, .section-kicker { margin: 0; color: #838c84; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--red, .section-kicker--red { color: var(--red); }
.eyebrow-line { display: inline-block; width: 32px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
.home-hero { min-height: calc(100vh - 110px); display: grid; grid-template-columns: 1fr .91fr; gap: clamp(60px, 10vw, 160px); align-items: center; padding-top: 100px; }
.hero-copy h1, .about-intro-copy h1 { margin: 28px 0 24px; font: 700 clamp(42px, 5.6vw, 78px)/1.07 var(--display); letter-spacing: -.075em; }
h1 em, h2 em { color: var(--red); font-style: normal; }
.hero-copy h1 em { position: relative; }
.hero-copy h1 em::after { content: ""; position: absolute; height: 9px; left: 4px; right: -6px; bottom: -1px; background: var(--red); opacity: .9; z-index: -1; }
.hero-lede { max-width: 440px; margin: 0; color: #aab0a8; font: 15px/1.9 var(--body); }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 40px; }
.button { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 0 18px; border: 1px solid transparent; font: 11px var(--mono); letter-spacing: .04em; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.button span { font-size: 18px; line-height: 0; }
.button--solid { color: var(--ink); background: #ecefe7; }
.button--solid:hover, .button--solid:focus-visible { background: var(--red); color: #fff; }
.button--red { color: #fff; background: var(--red); }
.button--red:hover, .button--red:focus-visible { background: var(--red-dark); }
.text-link { font: 11px var(--mono); letter-spacing: .03em; border-bottom: 1px solid currentColor; padding-bottom: 8px; transition: color .2s ease, border-color .2s ease; }
.text-link span { padding-left: 10px; font-size: 17px; }
.text-link--light { color: #d1d6cf; }
.text-link--light:hover, .text-link--light:focus-visible { color: #fff; }
.hero-meta { display: flex; gap: 14px; align-items: center; margin-top: 74px; color: #606a62; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.meta-rule { width: 42px; height: 1px; background: #495149; }

.hero-console { min-height: 490px; position: relative; border: 1px solid #3a423b; background: #1a1f1c; box-shadow: 18px 18px 0 #0e100f; overflow: hidden; }
.console-topbar, .code-stage-bar { height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid #343b35; color: #89938a; font: 10px var(--mono); }
.console-file { display: flex; align-items: center; gap: 9px; }
.file-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.console-actions { display: flex; gap: 5px; }
.console-actions i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #687168; }
.console-body { min-height: 446px; padding: 56px 52px 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.console-stamp { position: absolute; right: 30px; top: 30px; color: #617069; font: 10px var(--mono); }
.console-code { display: flex; flex-direction: column; gap: 19px; color: #d7ded4; font: 14px/1.2 var(--mono); }
.console-code > span { white-space: nowrap; }
.console-code b { display: inline-block; width: 30px; color: #49554c; font-weight: 400; }
.code-purple { color: #c89bf3; font-weight: 400; }.code-blue { color: #81c5e9; font-weight: 400; }.code-orange { color: #e9a765; }.code-green { color: #9ec68f; }.code-white { color: #d6ded4; }
.cursor-block { display: inline-block; width: 8px; height: 17px; margin-left: 5px; vertical-align: -3px; background: var(--red); animation: blink 1s steps(2, start) infinite; }
.console-foot { display: flex; justify-content: space-between; color: #667169; font: 10px var(--mono); }
.orbit { position: absolute; width: 320px; height: 320px; border: 1px solid rgba(188, 62, 49, .18); border-radius: 50%; right: -110px; bottom: -120px; }.orbit--two { width: 210px; height: 210px; right: -52px; bottom: -66px; border-color: rgba(193, 139, 56, .3); }
.orbit::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--red); top: 26px; left: 32px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity: 1; transform: none; }.reveal-delay-1 { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .22s; }
.home-manifesto { border-top: 1px solid var(--line); }.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 34px; }.manifesto-grid h2, .code-section h2, .detail-block h2, .tet-intro h2 { margin: 0; font: 600 clamp(30px, 3.4vw, 48px)/1.2 var(--display); letter-spacing: -.06em; }.manifesto-grid h2 span, .code-section h2 span, .detail-block h2 span, .tet-intro h2 span { color: #828c83; }.manifesto-grid p { max-width: 420px; margin: 5px 0 0; color: #929b92; font-size: 14px; line-height: 1.95; }
.home-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.portal-card { min-height: 535px; display: flex; flex-direction: column; padding: 28px; position: relative; overflow: hidden; border: 1px solid #343b35; transition: border-color .3s ease, transform .3s ease; }.portal-card:hover, .portal-card:focus-visible { border-color: #879286; transform: translateY(-4px); }.portal-card--code { background: #1d2420; }.portal-card--tet { background: #d4b36e; color: #2d241b; border-color: #d4b36e; }.portal-card--tet .eyebrow { color: #73542b; }.portal-head { display: flex; justify-content: space-between; color: #849087; font: 10px var(--mono); }.portal-card--tet .portal-head { color: #775931; }.portal-arrow { font-size: 22px; transition: transform .25s ease; }.portal-card:hover .portal-arrow { transform: translate(3px,-3px); }.portal-art { flex: 1; min-height: 270px; display: grid; place-content: center; position: relative; }.portal-art--terminal { gap: 13px; }.art-line { display: block; height: 10px; background: #85a88a; }.art-line--wide { width: 170px; }.art-line--medium { width: 130px; margin-left: 42px; background: #d19d64; }.art-line--short { width: 80px; margin-left: 10px; background: #a68fd2; }.art-caret { color: var(--red); font: 36px var(--mono); position: absolute; left: calc(50% + 80px); bottom: 70px; animation: blink 1.2s steps(2,start) infinite; }.portal-art--lantern { transform: translateY(8px); }.lantern-roof { width: 92px; height: 15px; position: absolute; top: 80px; left: calc(50% - 46px); background: #a23228; border-radius: 50% 50% 4px 4px; }.lantern-body { width: 72px; height: 110px; position: absolute; top: 94px; left: calc(50% - 36px); background: #c44735; border-radius: 48% 48% 42% 42%; box-shadow: inset 12px 0 0 rgba(255,240,181,.16), inset -12px 0 0 rgba(106,31,25,.15); }.lantern-body::after { content: "N"; position: absolute; inset: 0; display: grid; place-items: center; color: #f4d78e; font: 600 29px var(--display); }.lantern-tassel { width: 4px; height: 54px; position: absolute; top: 204px; left: calc(50% - 2px); background: #a23228; }.portal-copy { position: relative; z-index: 1; }.portal-copy h3 { margin: 11px 0 12px; font: 600 32px var(--display); letter-spacing: -.06em; }.portal-card--tet .portal-copy h3 { color: #2c211b; }.period { color: var(--red); }.portal-copy p:last-child { max-width: 300px; margin: 0; color: #858f86; font-size: 13px; line-height: 1.7; }.portal-card--tet .portal-copy p:last-child { color: #684d2c; }.home-footer-note { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; color: #667067; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.footer-note-line { height: 1px; background: var(--line); }

/* About */
.about-intro { min-height: 540px; display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 70px; padding-top: 105px; }.about-intro-copy h1 { margin-bottom: 26px; }.about-intro-copy h1 em { color: #c98b61; }.about-signal { align-self: center; padding: 25px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #859087; font: 10px var(--mono); }.signal-label { display: block; margin-bottom: 34px; text-transform: uppercase; letter-spacing: .08em; }.signal-wave { display: flex; align-items: center; gap: 5px; height: 72px; }.signal-wave span { width: 7px; background: #839a85; animation: signal 1.3s ease-in-out infinite alternate; }.signal-wave span:nth-child(1) { height: 22%; animation-delay: -.8s; }.signal-wave span:nth-child(2) { height: 58%; animation-delay: -.4s; }.signal-wave span:nth-child(3) { height: 34%; animation-delay: -.7s; }.signal-wave span:nth-child(4) { height: 85%; animation-delay: -.2s; }.signal-wave span:nth-child(5) { height: 50%; animation-delay: -.6s; }.signal-wave span:nth-child(6) { height: 73%; animation-delay: -.1s; }.signal-wave span:nth-child(7) { height: 42%; animation-delay: -.5s; }.signal-wave span:nth-child(8) { height: 95%; animation-delay: -.3s; }.signal-wave span:nth-child(9) { height: 63%; animation-delay: -.9s; }.signal-wave span:nth-child(10) { height: 30%; animation-delay: -.1s; }.signal-wave span:nth-child(11) { height: 70%; animation-delay: -.6s; }.signal-wave span:nth-child(12) { height: 45%; animation-delay: -.3s; }.signal-value { display: block; margin-top: 28px; color: #d3dbd1; font-size: 20px; letter-spacing: -.06em; }
.code-section { border-top: 1px solid var(--line); }.code-section-top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; }.code-section h2 { margin-top: 22px; }.code-section-note { margin: 0; color: #6f796f; font: 10px/1.8 var(--mono); text-align: right; text-transform: uppercase; }.code-section-note span { color: #adb5ac; }.code-stage { border: 1px solid #384139; background: #181d1a; box-shadow: 12px 12px 0 #0e100f; }.code-stage-bar { color: #879187; }.code-stage-mode { text-transform: uppercase; }.code-stage-mode .status-pulse { background: #c58d55; }.code-stage-body { display: grid; grid-template-columns: 58px 1fr; min-height: 355px; padding: 45px 34px 45px 0; }.line-numbers { color: #4d574e; font: 13px/2.05 var(--mono); text-align: right; padding-right: 18px; border-right: 1px solid #2a312b; user-select: none; }.typing-code { margin: 0; padding-left: 34px; color: #d3ddd1; font: clamp(16px, 2vw, 25px)/2.05 var(--mono); white-space: pre-wrap; }.typing-cursor { width: 10px; height: 25px; display: inline-block; margin-left: 4px; vertical-align: -3px; background: var(--red); animation: blink 1s steps(2,start) infinite; }.code-stage-footer { height: 47px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 0 17px; border-top: 1px solid #303830; color: #869086; font: 10px var(--mono); }.stage-progress { height: 2px; background: #3d463e; }.stage-progress span { display: block; width: 0%; height: 100%; background: var(--red); transition: width .1s linear; }.about-details { display: grid; grid-template-columns: .8fr 1fr; gap: 15%; border-top: 1px solid var(--line); }.detail-block h2 { margin: 22px 0 25px; }.detail-block > p:not(.section-kicker) { max-width: 380px; margin: 0 0 35px; color: #8b948b; font-size: 14px; line-height: 1.95; }.principles { border-top: 1px solid var(--line); }.principle { display: grid; grid-template-columns: 38px 1fr; column-gap: 18px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }.principle span { color: var(--red); font: 10px var(--mono); }.principle h3 { margin: 0; color: #e7ebe4; font: 600 16px var(--display); letter-spacing: -.03em; }.principle p { grid-column: 2; max-width: 370px; margin: 8px 0 0; color: #858e86; font-size: 12px; line-height: 1.75; }.capabilities { border-top: 1px solid var(--line); }.capability-list { margin-top: 34px; border-top: 1px solid var(--line); }.capability-row { display: grid; grid-template-columns: .6fr 1fr 20px; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); font: 12px var(--mono); }.capability-row > span:first-child { color: #e7ebe4; }.capability-items { color: #7f897f; }.capability-mark { color: var(--red); font-size: 17px; }.contact-section { display: grid; grid-template-columns: 1fr .4fr; gap: 20%; border-top: 1px solid var(--line); }.contact-inner h2 { margin: 25px 0 33px; font: 600 clamp(44px, 6vw, 80px)/1.02 var(--display); letter-spacing: -.08em; }.contact-email { display: inline-block; padding-bottom: 9px; border-bottom: 1px solid var(--red); color: #e4e9e0; font: 16px var(--mono); transition: color .2s ease; }.contact-email:hover { color: var(--red); }.contact-email span { padding-left: 16px; color: var(--red); font-size: 21px; }.contact-caption { margin: 19px 0 0; color: #737d73; font: 11px var(--mono); }.contact-aside { align-self: end; padding-bottom: 10px; color: #69736b; font: 11px/1.7 var(--mono); }.aside-index { display: block; margin-bottom: 36px; color: #a0aaa0; }.contact-aside p { margin: 0 0 8px; }

/* Tet */
.tet-page { background: var(--paper); color: #342920; }.tet-page .site-header { color: var(--ink); }.tet-hero { min-height: 610px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-top: 100px; padding-bottom: 90px; }.tet-copy h1 { margin: 17px 0 20px; font: 700 clamp(48px, 6.8vw, 94px)/.98 var(--display); letter-spacing: -.1em; }.tet-copy h1 em { color: var(--red); }.tet-year { display: flex; align-items: end; gap: 15px; color: var(--red); }.year-script { font: 700 34px var(--display); letter-spacing: -.1em; }.year-number { color: #92765b; font: 12px var(--mono); letter-spacing: .08em; padding-bottom: 6px; }.tet-lede { max-width: 370px; margin: 0; color: #766653; font-size: 14px; line-height: 1.9; }.tet-countdown-wrap { min-height: 330px; padding: 63px 42px 32px; position: relative; background: #eadfc8; border: 1px solid var(--paper-line); box-shadow: 12px 12px 0 rgba(137, 90, 47, .12); }.countdown-label { display: flex; justify-content: space-between; align-items: center; color: #80694e; font: 10px var(--mono); }.countdown-badge { padding: 7px 8px; color: #fff; background: var(--red); font-size: 9px; letter-spacing: .08em; }.countdown-grid { display: grid; grid-template-columns: 1fr 15px 1fr 15px 1fr 15px 1fr; align-items: center; margin: 46px 0 30px; }.count-unit strong { display: block; color: var(--red-dark); font: 700 clamp(30px, 4vw, 57px)/1 var(--mono); letter-spacing: -.1em; }.count-unit span { display: block; margin-top: 10px; color: #927d63; font: 10px var(--mono); text-transform: uppercase; }.count-separator { align-self: start; padding-top: 4px; color: #b0936b; font: 25px var(--mono); }.countdown-rule { display: flex; align-items: center; gap: 8px; }.countdown-rule span { flex: 1; height: 1px; background: #cbb795; }.countdown-rule i { width: 5px; height: 5px; display: block; border-radius: 50%; background: var(--red); }.countdown-note { margin: 17px 0 0; color: #927e65; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; }.tet-lantern { position: absolute; top: -72px; width: 55px; height: 145px; }.tet-lantern--left { left: 24px; transform: rotate(-4deg); }.tet-lantern--right { right: 29px; transform: rotate(6deg) scale(.82); }.lantern-wire { position: absolute; top: -100px; left: 27px; width: 1px; height: 103px; background: #857458; }.lantern-cap { position: absolute; top: 99px; left: 11px; width: 34px; height: 7px; background: var(--red-dark); }.lantern-shape { position: absolute; top: 105px; left: 2px; width: 52px; height: 71px; background: var(--red); border-radius: 48% 48% 42% 42%; box-shadow: inset 9px 0 0 rgba(244,221,155,.2), inset -9px 0 0 rgba(92,25,20,.16); }.lantern-shape::after { content: "福"; position: absolute; inset: 0; display: grid; place-items: center; color: #f2d894; font: 22px serif; }.lantern-string { position: absolute; top: 175px; left: 27px; width: 1px; height: 24px; background: var(--red-dark); }.lantern-string::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 12px; height: 5px; background: var(--gold); }
.village-strip { height: 250px; position: relative; overflow: hidden; background: #d8c796; border-top: 1px solid rgba(77, 55, 34, .2); border-bottom: 1px solid rgba(77, 55, 34, .2); }.village-sun { position: absolute; width: 72px; height: 72px; top: 39px; right: 20%; border-radius: 50%; background: #e6bd70; }.village-hill { position: absolute; left: -5%; width: 110%; border-radius: 50% 50% 0 0; }.village-hill--far { height: 120px; bottom: 37px; background: #8e9b73; }.village-hill--near { height: 90px; bottom: 0; background: #687957; }.village-house { position: absolute; z-index: 2; left: 22%; bottom: 37px; width: 143px; height: 76px; }.house-roof { position: absolute; left: -17px; top: 0; width: 175px; height: 42px; background: #8b4e35; clip-path: polygon(50% 0,100% 100%,0 100%); }.house-wall { position: absolute; left: 10px; top: 35px; width: 120px; height: 54px; background: #c6a36e; }.house-door { position: absolute; left: 60px; bottom: 0; width: 30px; height: 40px; background: #563b2c; }.house-smoke { position: absolute; left: 113px; top: -27px; width: 6px; height: 35px; border-radius: 50%; border-left: 3px solid rgba(111,98,69,.55); transform: rotate(18deg); }.village-tree { position: absolute; z-index: 3; bottom: 43px; width: 72px; height: 125px; }.village-tree--left { left: 9%; }.village-tree--right { right: 11%; transform: scale(.8); }.village-tree b { position: absolute; left: 32px; bottom: 0; width: 12px; height: 62px; background: #614635; }.village-tree i { position: absolute; display: block; border-radius: 50%; background: #41624b; }.village-tree i:nth-child(1) { width: 58px; height: 58px; left: 0; bottom: 46px; }.village-tree i:nth-child(2) { width: 48px; height: 48px; left: 22px; bottom: 75px; background: #547250; }.village-tree i:nth-child(3) { width: 45px; height: 45px; left: 30px; bottom: 38px; background: #3e5a43; }.village-tree--left i::after { content: ""; width: 7px; height: 7px; position: absolute; background: var(--red); border-radius: 50%; top: 16px; left: 11px; box-shadow: 25px 22px 0 var(--red), 37px -7px 0 #d3a342; }.village-path { position: absolute; z-index: 4; left: 47%; bottom: 0; width: 120px; height: 95px; background: #af9c68; clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); opacity: .8; }.village-caption { position: absolute; z-index: 5; bottom: 16px; left: 19px; right: 19px; display: flex; justify-content: space-between; color: rgba(53, 48, 32, .72); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.tet-intro { border-bottom: 1px solid var(--paper-line); }.tet-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 30px; }.tet-intro-grid p { max-width: 410px; margin: 4px 0 0; color: #806f5a; font-size: 14px; line-height: 1.95; }.activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.activity-card { min-height: 370px; padding: 22px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--paper-line); background: rgba(248,241,228,.52); }.activity-card:nth-child(2) { background: #dfd1b5; }.activity-card:nth-child(3) { background: #e7d7bf; }.activity-card:nth-child(4) { background: #e9dfc9; }.activity-number, .activity-tag { color: #947b5d; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.activity-illustration { height: 130px; position: relative; margin: 18px 0 22px; display: grid; place-items: center; }.activity-illustration--cake span { width: 115px; height: 42px; position: absolute; bottom: 35px; background: #8b5940; border-radius: 50%; box-shadow: 0 10px 0 #be8756; }.activity-illustration--cake i { width: 103px; height: 35px; position: absolute; bottom: 59px; background: #ded0a9; border: 5px solid #6e4e3d; border-radius: 50%; }.activity-illustration--cake b { width: 68px; height: 7px; position: absolute; bottom: 77px; background: #7c9a6e; border-radius: 50%; }.activity-illustration--market span { width: 120px; height: 48px; position: absolute; bottom: 33px; background: #c74737; clip-path: polygon(0 0,100% 0,85% 100%,15% 100%); }.activity-illustration--market i { width: 92px; height: 6px; position: absolute; bottom: 61px; background: #f0d795; box-shadow: 0 15px 0 #f0d795, 0 30px 0 #f0d795; }.activity-illustration--market b { width: 5px; height: 60px; position: absolute; bottom: 30px; background: #6e513d; }.activity-illustration--envelope span { width: 118px; height: 83px; position: absolute; bottom: 30px; background: var(--red); border: 1px solid var(--red-dark); }.activity-illustration--envelope span::after { content: "福"; position: absolute; inset: 0; display: grid; place-items: center; color: #f4d78e; font: 28px serif; }.activity-illustration--envelope i { width: 47px; height: 47px; position: absolute; bottom: 48px; background: #e6bb67; transform: rotate(45deg); }.activity-illustration--envelope b { width: 118px; height: 1px; position: absolute; bottom: 72px; background: #812d26; }.activity-illustration--tea span { width: 75px; height: 42px; position: absolute; bottom: 40px; left: calc(50% - 40px); background: #789173; border-radius: 4px 4px 25px 25px; }.activity-illustration--tea i { width: 30px; height: 20px; position: absolute; bottom: 51px; left: calc(50% + 26px); border: 5px solid #789173; border-left: 0; border-radius: 0 20px 20px 0; }.activity-illustration--tea b { width: 4px; height: 28px; position: absolute; bottom: 80px; left: calc(50% - 4px); background: rgba(138,100,66,.25); border-radius: 50%; transform: rotate(15deg); }.activity-card h3 { margin: auto 0 10px; color: #47352a; font: 600 18px var(--display); letter-spacing: -.05em; }.activity-card p { min-height: 43px; margin: 0 0 18px; color: #806e58; font-size: 11px; line-height: 1.7; }.activity-tag { color: var(--red); }.tet-calendar { border-top: 1px solid var(--paper-line); }.calendar-layout { display: grid; grid-template-columns: .6fr 1fr; gap: 15%; margin-top: 36px; }.calendar-title { display: flex; flex-direction: column; color: #8f785c; font: 16px/1.55 var(--display); letter-spacing: -.05em; }.calendar-title strong { color: var(--red); font: 700 clamp(44px, 5.4vw, 76px)/.98 var(--display); letter-spacing: -.1em; }.calendar-list { border-top: 1px solid var(--paper-line); }.calendar-item { display: grid; grid-template-columns: 60px 1fr 22px; gap: 20px; align-items: center; min-height: 90px; border-bottom: 1px solid var(--paper-line); }.calendar-date { color: var(--red); font: 700 25px/.9 var(--display); letter-spacing: -.08em; }.calendar-date small { color: #8e7b62; font: 8px var(--mono); letter-spacing: .06em; }.calendar-item h3 { margin: 0 0 5px; color: #4a392e; font: 600 14px var(--display); }.calendar-item p { margin: 0; color: #8b765b; font-size: 11px; }.calendar-mark { color: #a18b6c; font: 9px var(--mono); }.tet-closing { min-height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid var(--paper-line); }.closing-seal { width: 66px; height: 66px; display: grid; place-content: center; margin-bottom: 26px; color: var(--red); border: 1px solid var(--red); font: 700 22px/.75 serif; transform: rotate(-8deg); }.closing-seal small { margin-top: 5px; font: 7px var(--mono); letter-spacing: .1em; }.tet-closing p { margin: 0; color: var(--red); font: 600 clamp(38px, 5vw, 67px)/1 var(--display); letter-spacing: -.08em; }.tet-closing > span { margin: 18px 0 31px; color: #8c775e; font: 11px var(--mono); }.tet-closing .button { margin-top: 2px; }
.error-page { padding-top: 20vh; }.error-page h1 { margin: 28px 0; font: 700 clamp(48px, 7vw, 100px)/1 var(--display); letter-spacing: -.09em; }

/* interaction layer */
.code-stage { cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.code-stage:hover, .code-stage.is-paused { border-color: #a15a4e; box-shadow: 12px 12px 0 #0e100f, 0 0 34px rgba(188, 62, 49, .08); }
.code-stage:active { transform: translateY(2px); }
.reveal.is-visible[data-tilt] { transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transition: opacity .7s ease, transform .25s ease; }
.activity-card { cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.activity-card:hover, .activity-card:focus-visible, .activity-card.is-open { border-color: var(--red); box-shadow: 7px 7px 0 rgba(188, 62, 49, .12); transform: translateY(-3px); }
.activity-more { display: block; max-height: 0; overflow: hidden; margin: 0; color: #725942; font: 10px/1.7 var(--body); opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.activity-card.is-open .activity-more { max-height: 72px; margin: -3px 0 14px; opacity: 1; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes navScan { 0%, 22% { left: -24%; opacity: 0; } 38% { opacity: 1; } 72%, 100% { left: 120%; opacity: 0; } }
@keyframes signal { to { transform: scaleY(.4); opacity: .5; } }
@media (max-width: 900px) { .site-header, .container { width: min(100% - 40px, 700px); }.header-status { display: none; }.home-hero, .about-intro, .tet-hero { grid-template-columns: 1fr; gap: 64px; padding-top: 80px; }.home-hero { min-height: auto; }.hero-console { min-height: 420px; }.manifesto-grid, .tet-intro-grid, .about-details, .contact-section { grid-template-columns: 1fr; gap: 40px; }.home-portals { grid-template-columns: 1fr; }.portal-card { min-height: 460px; }.activity-grid { grid-template-columns: repeat(2, 1fr); }.calendar-layout { grid-template-columns: 1fr; gap: 45px; }.about-intro { min-height: auto; }.about-signal { max-width: 440px; width: 100%; }.contact-aside { justify-self: start; }.tet-countdown-wrap { margin-top: 20px; } }
@media (max-width: 560px) { .container, .site-header { width: calc(100% - 32px); }.site-header { margin-top: 8px; height: 64px; }.site-nav { gap: 14px; font-size: 9px; }.site-nav a:nth-child(1) { display: none; }.section-pad { padding-top: 82px; padding-bottom: 82px; }.section-pad--tight { padding-top: 62px; padding-bottom: 62px; }.hero-copy h1, .about-intro-copy h1 { font-size: 43px; }.hero-lede { font-size: 13px; }.hero-console { min-height: 385px; box-shadow: 7px 7px 0 #0e100f; }.console-body { padding: 40px 22px 20px; min-height: 340px; }.console-code { gap: 14px; font-size: 11px; }.console-code b { width: 24px; }.hero-meta { margin-top: 46px; font-size: 8px; }.hero-meta .meta-rule { width: 20px; }.manifesto-grid h2, .code-section h2, .detail-block h2, .tet-intro h2 { font-size: 31px; }.home-footer-note { grid-template-columns: 1fr auto; font-size: 8px; }.home-footer-note p { grid-column: 1 / -1; order: 2; }.footer-note-line { order: 1; }.home-footer-note span { order: 3; }.code-section-top { display: block; }.code-section-note { margin-top: 20px; text-align: left; }.code-stage { box-shadow: 6px 6px 0 #0e100f; }.code-stage-body { grid-template-columns: 38px 1fr; padding-right: 12px; }.line-numbers { padding-right: 10px; font-size: 10px; }.typing-code { padding-left: 15px; font-size: 12px; }.typing-cursor { width: 7px; height: 17px; }.code-stage-footer { grid-template-columns: auto 1fr auto; gap: 9px; padding: 0 9px; font-size: 8px; }.about-details { gap: 50px; }.capability-row { grid-template-columns: 1fr 20px; gap: 10px; }.capability-items { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }.tet-copy h1 { font-size: 55px; }.tet-countdown-wrap { padding: 45px 17px 25px; }.countdown-label { font-size: 8px; }.countdown-grid { margin-top: 38px; }.count-unit strong { font-size: 21px; }.count-unit span { font-size: 8px; }.count-separator { font-size: 16px; }.tet-lantern { transform: scale(.7); }.tet-lantern--left { left: -5px; }.tet-lantern--right { right: -5px; }.village-strip { height: 210px; }.village-house { left: 17%; transform: scale(.8); transform-origin: bottom left; }.village-tree--right { right: -6%; }.village-caption { font-size: 7px; }.activity-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.activity-card { min-height: 325px; padding: 15px; }.activity-card h3 { font-size: 14px; }.activity-card p { font-size: 10px; }.activity-illustration { transform: scale(.8); margin-left: -10px; margin-right: -10px; }.calendar-item { grid-template-columns: 43px 1fr 18px; gap: 10px; }.calendar-date { font-size: 19px; }.calendar-item h3 { font-size: 12px; }.calendar-item p { font-size: 9px; line-height: 1.4; }.tet-closing { min-height: 400px; }.tet-closing > span { max-width: 280px; font-size: 9px; line-height: 1.6; }.contact-inner h2 { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.cursor-block, .typing-cursor, .signal-wave span { animation: none; }.portal-card, .site-nav a::after { transition: none; } }
@media (max-width: 560px) {
  .nav-toggle { display: grid; margin-left: auto; margin-right: 10px; }
  .site-nav { position: absolute; top: 57px; right: 0; width: min(220px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: #1b211d; border: 1px solid #3a443b; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav a, .site-nav a:nth-child(1) { display: block; padding: 12px 10px; }
  .nav-indicator { display: none; }
  .site-header--paper .site-nav { background: #eadfc8; border-color: var(--paper-line); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-visible[data-tilt] { transform: none; }
  .nav-indicator::before { animation: none; }
}

/* About page / Tet x code treatment */
.about-page { background: radial-gradient(circle at 82% 15%, rgba(188, 62, 49, .12), transparent 26%), radial-gradient(circle at 12% 78%, rgba(193, 139, 56, .07), transparent 28%), #141715; }
.about-page::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(245, 226, 183, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 226, 183, .025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.about-page main, .about-page .site-header { position: relative; z-index: 1; }
.about-page .about-intro { position: relative; }
.about-page .about-intro::before { content: "TẾT / CODE"; position: absolute; top: 48px; right: 0; color: rgba(193, 139, 56, .5); font: 9px var(--mono); letter-spacing: .18em; transform: rotate(90deg) translateX(100%); transform-origin: right top; }
.about-page .about-intro-copy h1 em { text-shadow: 0 0 26px rgba(188, 62, 49, .16); }
.about-page .about-signal { position: relative; }
.signal-seal { position: absolute; right: 0; bottom: 19px; width: 35px; height: 35px; display: grid; place-items: center; color: #d9a563; border: 1px solid rgba(193, 139, 56, .7); font: 19px serif; transform: rotate(-8deg); opacity: .85; }
.about-tet-bridge { min-height: 164px; display: grid; grid-template-columns: .65fr 1.25fr .55fr; align-items: center; gap: 34px; padding: 25px 29px; position: relative; overflow: hidden; border: 1px solid rgba(193, 139, 56, .28); background: linear-gradient(105deg, rgba(47, 91, 71, .22), rgba(31, 39, 32, .72) 43%, rgba(142, 46, 39, .18)); box-shadow: 9px 9px 0 rgba(9, 11, 10, .45); }
.about-tet-bridge::after { content: ""; position: absolute; right: -30px; top: -62px; width: 175px; height: 175px; border: 1px solid rgba(193, 139, 56, .2); border-radius: 50%; box-shadow: 0 0 0 18px rgba(193, 139, 56, .035), 0 0 0 38px rgba(193, 139, 56, .025); }
.bridge-terminal { display: flex; align-items: center; gap: 9px; color: #9daf98; font: 10px var(--mono); }
.bridge-terminal::before { content: ">"; color: var(--red); }
.bridge-terminal i { width: 7px; height: 14px; background: var(--red); animation: blink 1.1s steps(2, start) infinite; }
.bridge-terminal b { margin-left: auto; color: #d5a160; font-weight: 400; }
.bridge-copy { position: relative; z-index: 1; }
.about-tet-eyebrow { color: #d49a55; }
.bridge-copy h2 { margin: 13px 0 0; color: #e5ebe0; font: 600 clamp(22px, 3vw, 35px)/1.15 var(--display); letter-spacing: -.07em; }
.bridge-copy h2 em { color: #de7960; font-style: normal; }
.bridge-count { position: relative; z-index: 1; display: grid; justify-items: end; padding-left: 28px; border-left: 1px solid rgba(193, 139, 56, .28); color: #879588; font: 9px var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.bridge-count strong { margin: 3px 0 4px; color: #d6a25d; font: 700 41px/1 var(--mono); letter-spacing: -.1em; }
.bridge-count small { color: #8c7960; font: 9px var(--mono); letter-spacing: .02em; text-transform: none; }
.code-stage { position: relative; overflow: hidden; }
.code-tet-ornament { position: absolute; z-index: 2; pointer-events: none; opacity: .8; }
.code-tet-ornament--left { left: -2px; top: 70px; width: 72px; height: 85px; }
.code-tet-ornament--left::before { content: ""; position: absolute; left: 1px; top: 45px; width: 74px; height: 1px; background: #b98a4e; transform: rotate(-38deg); transform-origin: left center; }
.code-tet-ornament--left::after { content: ""; position: absolute; left: 0; top: 38px; width: 28px; height: 26px; border-left: 1px solid #b98a4e; border-radius: 50%; transform: rotate(-28deg); }
.code-tet-ornament--left i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #bd483b; box-shadow: 25px -23px 0 #bd483b, 46px -17px 0 #d6a15b; }
.code-tet-ornament--left i:nth-child(1) { left: 12px; top: 45px; }.code-tet-ornament--left i:nth-child(2) { left: 35px; top: 24px; }.code-tet-ornament--left i:nth-child(3) { left: 55px; top: 32px; }
.code-tet-ornament--left b { position: absolute; left: 15px; bottom: 7px; width: 35px; height: 1px; background: #bd483b; transform: rotate(-45deg); }
.code-tet-lantern { position: absolute; z-index: 2; right: 21px; top: 57px; width: 42px; height: 74px; pointer-events: none; opacity: .75; }
.code-tet-lantern::before { content: ""; position: absolute; top: -57px; left: 20px; width: 1px; height: 59px; background: #aa824f; }
.code-tet-lantern span { position: absolute; left: 4px; top: 1px; width: 34px; height: 7px; background: #91372d; border-radius: 50% 50% 2px 2px; }
.code-tet-lantern i { position: absolute; left: 0; top: 7px; width: 42px; height: 51px; display: grid; place-items: center; color: #e0b665; background: #ad3a30; border-radius: 48% 48% 42% 42%; font: 15px serif; font-style: normal; box-shadow: inset 7px 0 rgba(255, 221, 145, .12), inset -7px 0 rgba(50, 12, 10, .18); }
.code-tet-lantern b { position: absolute; left: 20px; top: 58px; width: 2px; height: 17px; background: #aa342b; }
.code-tet-lantern b::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 12px; height: 3px; background: #d09e53; }
.code-stage-body, .code-stage-footer, .code-stage-bar { position: relative; z-index: 3; }
.code-stage-body { background: linear-gradient(90deg, transparent 0 70%, rgba(188, 62, 49, .025) 100%); }
.about-page .code-stage-footer { border-top-color: rgba(193, 139, 56, .2); }
@media (max-width: 900px) { .about-tet-bridge { grid-template-columns: 1fr 1.6fr .65fr; gap: 20px; }.about-page .about-intro::before { display: none; } }
@media (max-width: 560px) { .about-tet-bridge { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }.bridge-count { justify-items: start; padding: 15px 0 0; border-top: 1px solid rgba(193, 139, 56, .28); border-left: 0; text-align: left; }.bridge-count strong { font-size: 34px; }.code-tet-ornament--left { left: -18px; transform: scale(.75); transform-origin: left top; }.code-tet-lantern { right: 7px; transform: scale(.75); transform-origin: right top; }.signal-seal { right: 4px; bottom: 14px; transform: scale(.8) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .bridge-terminal i { animation: none; } }