: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 { min-height: 100%; scroll-behavior: smooth; overflow-x: clip; overflow-y: auto !important; overscroll-behavior-y: auto; }
body { min-height: 100%; margin: 0; background: var(--ink); color: #f3f4ef; font-family: var(--body); -webkit-font-smoothing: antialiased; overflow: visible !important; overscroll-behavior-y: auto; touch-action: pan-y; -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: visible; }
.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; }
.header-status[data-admin-easter] { cursor: pointer; transition: color .2s ease, transform .2s ease; }
.header-status[data-admin-easter]:hover, .header-status[data-admin-easter]:focus-visible { color: var(--red-dark); transform: translateY(-1px); }
.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 .nav-ttc-link { 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; } }

/* Scroll and small-screen safety net */
.typing-code { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 560px) {
  html, body { min-width: 0; width: 100%; }
  .site-shell { min-height: 100svh; overflow: visible; }
  main { min-width: 0; }
  .hero-console, .code-stage, .about-tet-bridge, .tet-countdown-wrap { max-width: 100%; }
}

/* Tet navigation block */
.site-nav { gap: 3px; padding: 5px; border: 1px solid rgba(193, 139, 56, .36); border-radius: 4px; background: linear-gradient(135deg, rgba(27, 35, 29, .94), rgba(24, 29, 26, .82)); box-shadow: 4px 4px 0 rgba(9, 11, 10, .42), inset 0 0 0 1px rgba(255, 230, 172, .035); }
.site-nav::before { content: ""; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1px; background: linear-gradient(90deg, transparent, rgba(188, 62, 49, .7), rgba(193, 139, 56, .6), transparent); opacity: .7; }
.site-nav a { min-height: 31px; display: inline-flex; align-items: center; padding: 0 13px; }
.nav-indicator { bottom: 5px; height: 31px; border-color: rgba(224, 165, 91, .72); border-radius: 2px; background: linear-gradient(135deg, rgba(177, 53, 42, .95), rgba(126, 42, 34, .96)); box-shadow: inset 0 0 0 1px rgba(255, 225, 163, .12), 3px 3px 0 rgba(90, 29, 24, .45); opacity: 1; transition: left .52s cubic-bezier(.22,1,.36,1), width .52s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nav-indicator::before { background: linear-gradient(90deg, transparent, rgba(255, 228, 165, .6), transparent); }
.nav-indicator::after { content: ""; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border: 1px solid rgba(247, 210, 137, .9); transform: rotate(45deg); opacity: .85; }
.site-nav:hover .nav-indicator { background: linear-gradient(135deg, rgba(193, 61, 48, .98), rgba(137, 43, 35, .98)); border-color: #f0b86e; }
.site-header--paper .site-nav { border-color: rgba(142, 46, 39, .32); background: linear-gradient(135deg, rgba(245, 235, 214, .96), rgba(229, 215, 186, .92)); box-shadow: 4px 4px 0 rgba(126, 74, 40, .14), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.site-header--paper .site-nav::before { background: linear-gradient(90deg, transparent, rgba(188, 62, 49, .65), rgba(193, 139, 56, .65), transparent); }
.site-header--paper .nav-indicator { border-color: rgba(245, 197, 111, .95); box-shadow: inset 0 0 0 1px rgba(255, 236, 179, .22), 3px 3px 0 rgba(118, 39, 31, .22); }
.site-nav--instant .nav-indicator { transition: none !important; }
@media (max-width: 560px) {
  .site-nav { top: 57px; right: 0; padding: 8px; border-radius: 4px; box-shadow: 5px 5px 0 rgba(9, 11, 10, .38); }
  .site-nav::before, .nav-indicator { display: none; }
  .site-nav a, .site-nav a:nth-child(1) { min-height: 42px; padding: 0 13px; }
}

/* Vietnamese village illustration */
.village-strip { height: 380px; padding: 0; background: #596d58; }
.village-strip > .village-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.village-strip > .village-sun,
.village-strip > .village-hill,
.village-strip > .village-house,
.village-strip > .village-tree,
.village-strip > .village-path { display: none; }
.village-scene .scene-firework,
.village-scene .scene-blossoms,
.village-scene .scene-kids,
.village-scene .scene-cooking path[fill="#e88342"] { transform-box: fill-box; }
.village-scene .scene-firework { transform-origin: center; animation: sceneFirework 3.4s ease-in-out infinite; }
.village-scene .scene-firework--gold { animation-delay: -1.7s; }
.village-scene .scene-blossoms { transform-origin: center bottom; animation: blossomSway 4s ease-in-out infinite alternate; }
.village-scene .scene-blossoms--yellow { animation-delay: -1.8s; }
.village-scene .scene-kids { transform-origin: center bottom; animation: kidBounce 2.8s ease-in-out infinite; }
.village-scene .scene-cooking path[fill="#e88342"] { transform-origin: center bottom; animation: fireFlicker .8s ease-in-out infinite alternate; }
.village-caption { padding-top: 10px; color: rgba(251, 242, 216, .86); text-shadow: 0 1px 10px rgba(31, 46, 31, .45); background: linear-gradient(180deg, transparent, rgba(33, 52, 38, .18)); }
@keyframes sceneFirework { 0%, 100% { opacity: .42; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes blossomSway { 0% { transform: rotate(-1deg); } 100% { transform: rotate(1.3deg); } }
@keyframes kidBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fireFlicker { 0% { transform: scaleY(.82) translateY(2px); opacity: .75; } 100% { transform: scaleY(1.12) translateY(-1px); opacity: 1; } }
@media (max-width: 560px) {
  .village-strip { height: 320px; }
  .village-caption { left: 12px; right: 12px; bottom: 12px; font-size: 7px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .village-scene .scene-firework,
  .village-scene .scene-blossoms,
  .village-scene .scene-kids,
  .village-scene .scene-cooking path[fill="#e88342"] { animation: none; }
}

/* Le Gia Huy / bright Tet home */
.home-page--tet { color: #422e25; background: #fff3dc; background-image: radial-gradient(circle at 12% 9%, rgba(211, 160, 79, .16), transparent 25%), radial-gradient(circle at 88% 74%, rgba(198, 66, 51, .12), transparent 28%), linear-gradient(90deg, rgba(120, 76, 43, .035) 1px, transparent 1px), linear-gradient(rgba(120, 76, 43, .035) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; }
.home-page--tet .site-header { color: #4b3429; }
.home-page--tet .brand { color: #4b3429; }
.home-page--tet .brand-mark { color: #fff; background: var(--red); }
.home-page--tet .site-nav a { color: #755d4c; }
.home-page--tet .site-nav a:hover, .home-page--tet .site-nav a:focus-visible, .home-page--tet .site-nav a.is-active { color: var(--red-dark); }
.home-page--tet .header-status { color: #8c7159; }
.home-hero--tet { min-height: 670px; align-items: center; padding-top: 78px; padding-bottom: 82px; }
.home-page--tet .hero-copy h1 { color: #4b3025; font: 700 clamp(54px, 7vw, 101px)/.96 var(--display); letter-spacing: -.105em; }
.home-page--tet .hero-copy h1 em { color: var(--red); font-style: normal; text-shadow: 0 7px 0 rgba(194, 135, 51, .12); }
.home-page--tet .hero-lede { max-width: 465px; color: #725a47; font-size: 15px; line-height: 1.85; }
.home-page--tet .hero-lede strong { color: #a13c32; }
.home-page--tet .hero-meta { color: #9c7853; }
.home-page--tet .meta-rule { background: #d2ad79; }
.text-link--paper { color: #8a5b39; }
.text-link--paper::after { background: #c24b3b; }
.home-tet-visual { min-height: 472px; margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(142, 83, 39, .32); background: #d59b56; box-shadow: 12px 12px 0 rgba(142, 83, 39, .15); transform: rotate(1deg); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.home-tet-visual:hover { transform: rotate(0) translateY(-4px); box-shadow: 15px 15px 0 rgba(142, 83, 39, .15); }
.home-tet-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(34, 21, 16, .05) 44%, rgba(34, 21, 16, .76) 100%); }
.home-tet-visual img { display: block; width: 100%; height: 100%; min-height: 472px; object-fit: cover; }
.home-tet-visual figcaption { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; display: flex; align-items: end; justify-content: space-between; color: #fff1cf; font: 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.home-tet-visual figcaption strong { color: #fff5dc; font: 600 31px var(--display); letter-spacing: -.07em; text-transform: none; }
.home-visual-seal { position: absolute; z-index: 3; top: 21px; right: 19px; width: 68px; height: 68px; display: grid; place-content: center; color: #f9d886; border: 1px solid rgba(249, 216, 134, .84); border-radius: 50%; background: rgba(130, 35, 27, .75); font: 700 20px/.85 var(--display); text-align: center; transform: rotate(8deg); }
.home-visual-seal small { margin-top: 5px; font: 7px var(--mono); letter-spacing: .05em; }
.home-manifesto--tet { border-top-color: rgba(137, 89, 48, .22); }
.home-page--tet .section-kicker, .home-page--tet .eyebrow { color: #9a6f43; }
.home-page--tet .eyebrow-line { background: var(--red); }
.home-page--tet .manifesto-grid h2 { color: #4a3025; }
.home-page--tet .manifesto-grid h2 span { color: #b1794b; }
.home-page--tet .manifesto-grid p { color: #806650; }
.home-portals--tet { gap: 20px; }
.home-portals--tet .portal-card { border-color: rgba(125, 81, 48, .24); box-shadow: 6px 6px 0 rgba(125, 81, 48, .08); }
.home-portals--tet .portal-card--code { background: #fff9eb; color: #4b342a; }
.home-portals--tet .portal-card--code .portal-head { color: #997352; }
.home-portals--tet .portal-card--code .portal-copy h3 { color: #4b342a; }
.home-portals--tet .portal-card--code .portal-copy p:last-child { color: #7e6955; }
.home-portals--tet .portal-card--tet { background: #d85843; border-color: #d85843; color: #fff2d2; }
.home-portals--tet .portal-card--tet .portal-head, .home-portals--tet .portal-card--tet .portal-copy p:last-child { color: #f8d8ae; }
.home-portals--tet .portal-card--tet .portal-copy h3 { color: #fff5dc; }
.home-portals--tet .portal-card--tet .period { color: #ffd484; }
.home-portals--tet .portal-card:hover { border-color: var(--red); box-shadow: 8px 8px 0 rgba(125, 81, 48, .14); }
.home-portals--tet .portal-art--terminal { opacity: .92; }
.home-portals--tet .portal-art--terminal .art-line--wide { background: #a86241; }
.home-portals--tet .portal-art--terminal .art-line--short { background: #d19b4c; }
.home-portals--tet .portal-art--terminal .art-line--medium { background: #c84939; }
.home-portals--tet .portal-art--terminal .art-caret { color: var(--red); }
.home-portals--tet .portal-card--tet .lantern-roof { background: #8c2e27; }
.home-portals--tet .portal-card--tet .lantern-body { background: #a92e2b; }
.home-portals--tet .portal-card--tet .lantern-tassel { background: #8c2e27; }
.home-footer-note--tet { color: #957b62; }
.home-footer-note--tet .footer-note-line { background: rgba(125, 81, 48, .2); }

/* About / Le Gia Huy computer science profile */
.about-page--lgh { background: radial-gradient(circle at 83% 13%, rgba(194, 76, 56, .15), transparent 25%), radial-gradient(circle at 12% 77%, rgba(209, 157, 75, .12), transparent 24%), #141715; }
.about-intro--lgh { min-height: 590px; grid-template-columns: 1fr .66fr; align-items: center; padding-top: 102px; }
.about-intro--lgh .about-intro-copy h1 { margin: 22px 0 25px; color: #e9ede5; font-size: clamp(52px, 7vw, 97px); }
.about-intro--lgh .about-intro-copy h1 em { color: #d8735d; font-style: normal; }
.about-lede { max-width: 470px; margin: 0; color: #919c91; font-size: 15px; line-height: 1.9; }
.profile-facts { max-width: 520px; display: grid; grid-template-columns: 1.4fr .65fr 1fr; gap: 15px; margin-top: 42px; padding-top: 15px; border-top: 1px solid rgba(225, 209, 171, .16); }
.profile-facts div { display: grid; gap: 8px; }
.profile-facts span { color: #8d6d4b; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.profile-facts strong { color: #c8d1c5; font: 500 12px/1.45 var(--mono); }
.lgh-profile-card { max-width: 360px; justify-self: end; padding: 20px; position: relative; overflow: hidden; border: 1px solid #526154; background: linear-gradient(145deg, #243129, #171e19 70%); box-shadow: 12px 12px 0 rgba(4, 7, 5, .42); transform: rotate(2deg); }
.lgh-profile-card::before { content: ""; position: absolute; right: -55px; top: 45px; width: 180px; height: 180px; border: 1px solid rgba(211, 159, 77, .3); border-radius: 50%; box-shadow: 0 0 0 19px rgba(211, 159, 77, .06), 0 0 0 40px rgba(211, 159, 77, .035); }
.lgh-card-top { display: flex; justify-content: space-between; color: #91a18f; font: 9px var(--mono); }
.lgh-card-avatar { width: 126px; height: 126px; display: grid; place-items: center; margin: 35px auto 23px; position: relative; color: #f2d28c; border: 1px solid #c79a5a; border-radius: 50%; background: rgba(179, 57, 44, .82); font: 700 30px var(--mono); letter-spacing: -.12em; box-shadow: 0 0 0 8px rgba(197, 148, 78, .08); }
.avatar-spark { position: absolute; right: 8px; top: 9px; color: #fff0bf; font: 16px serif; }
.lgh-card-name { margin: 0; color: #f0ead9; font: 600 25px var(--display); letter-spacing: -.07em; text-align: center; }
.lgh-card-role { margin: 7px 0 31px; color: #a89170; font: 9px var(--mono); text-align: center; }
.lgh-card-line { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid rgba(211, 184, 135, .14); color: #829181; font: 10px var(--mono); }
.lgh-card-line b { color: #d1a265; font-weight: 400; text-align: right; }
.about-tet-bridge--lgh { min-height: 174px; }
.about-tet-bridge--lgh .bridge-copy h2 { color: #eee9dd; }
.code-section--lgh { border-top-color: rgba(225, 209, 171, .14); }
.code-stage--lgh { border-color: #4c5a4d; box-shadow: 12px 12px 0 #0a0d0b; }
.code-stage--lgh .code-stage-bar { background: #1e2821; }
.code-stage--lgh .code-stage-footer { background: #161c18; }
.lgh-details { display: grid; grid-template-columns: .9fr 1fr; gap: 15%; border-top: 1px solid rgba(225, 209, 171, .14); }
.lgh-detail-block h2 { margin: 22px 0 25px; color: #ecefe7; font: 600 clamp(37px, 4.4vw, 58px)/1.08 var(--display); letter-spacing: -.08em; }
.lgh-detail-block h2 span { color: #9ca79b; }
.lgh-detail-block > p:not(.section-kicker) { max-width: 420px; margin: 0; color: #8d998d; font-size: 14px; line-height: 1.9; }
.lgh-skill-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.lgh-skill-tags span { padding: 8px 10px; color: #c7a064; border: 1px solid rgba(199, 160, 100, .35); font: 9px var(--mono); }
.lgh-attributes { border-top: 1px solid rgba(225, 209, 171, .15); }
.lgh-attribute { display: grid; grid-template-columns: .42fr 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid rgba(225, 209, 171, .15); }
.lgh-attribute span { color: #c46754; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.lgh-attribute strong { color: #cbd4ca; font: 500 13px/1.75 var(--mono); }
.capabilities--lgh { border-top-color: rgba(225, 209, 171, .14); }
.contact-section--lgh { border-top-color: rgba(225, 209, 171, .14); }

/* Tet photo page */
.tet-page--picture { background: #f6eddd; }
.tet-hero--picture { min-height: 600px; }
.tet-picture-section { padding-bottom: 42px; }
.tet-picture-frame { margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(112, 63, 35, .3); background: #b8704e; box-shadow: 13px 13px 0 rgba(132, 76, 39, .13); }
.tet-picture-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(33, 19, 13, .7) 100%); }
.tet-picture-frame img { display: block; width: 100%; max-height: 630px; object-fit: cover; object-position: center 60%; }
.tet-picture-frame figcaption { position: absolute; z-index: 1; right: 25px; bottom: 22px; left: 25px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: #f7e8c5; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tet-picture-frame figcaption strong { color: #fff5d7; font: 600 clamp(22px, 3.3vw, 42px) var(--display); letter-spacing: -.08em; text-transform: none; }
.activity-grid--picture { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.activity-card--picture { min-height: 425px; padding: 15px; border-color: rgba(130, 84, 47, .23); background: rgba(252, 246, 235, .68); }
.activity-card--picture:nth-child(2) { background: #e7d7bf; }.activity-card--picture:nth-child(3) { background: #f0dfc0; }.activity-card--picture:nth-child(4) { background: #e5d4bb; }
.activity-image { height: 172px; margin: 15px -1px 20px; overflow: hidden; border: 1px solid rgba(116, 73, 42, .18); background: #d5a16a; }
.activity-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(.98); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.activity-card--picture:hover .activity-image img, .activity-card--picture.is-open .activity-image img { transform: scale(1.07); }
.activity-image--cake img { object-position: 74% 78%; }.activity-image--market img { object-position: 24% 62%; }.activity-image--flag img { object-position: 27% 20%; }.activity-image--fireworks img { object-position: 77% 14%; }
.activity-card--picture h3 { margin: auto 0 10px; color: #493329; font-size: 19px; }
.activity-card--picture p { color: #806b57; }.activity-card--picture .activity-tag { color: var(--red); }

/* Mobile navigation: one compact horizontal Tet block */
@media (max-width: 560px) {
  .site-header { width: calc(100% - 24px); height: 64px; gap: 7px; }
  .site-header .brand > span:last-child { display: none; }
  .site-header .brand { flex: 0 0 auto; }
  .nav-toggle { display: none !important; }
  .site-nav, .site-nav.is-open { position: relative; top: auto; right: auto; width: auto; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 2px; padding: 4px; opacity: 1; pointer-events: auto; transform: none; overflow: visible; }
  .site-nav a, .site-nav a:nth-child(1) { min-height: 31px; display: inline-flex; flex: 1 1 auto; justify-content: center; padding: 0 7px; font-size: 8px; letter-spacing: -.02em; white-space: nowrap; }
  .site-nav .nav-tet-link { padding-left: 4px; padding-right: 6px; }
  .site-nav .nav-dot { width: 4px; height: 4px; margin-right: 4px; box-shadow: 0 0 0 3px rgba(188, 62, 49, .12); }
  .site-nav::before { left: 5px; right: 5px; bottom: 2px; }
  .site-nav .nav-indicator { display: block; bottom: 4px; height: 31px; }
  .home-hero--tet { padding-top: 62px; }
  .home-tet-visual { min-height: 330px; }.home-tet-visual img { min-height: 330px; }.home-tet-visual figcaption { right: 14px; bottom: 14px; left: 14px; font-size: 7px; }.home-tet-visual figcaption strong { font-size: 23px; }.home-visual-seal { top: 14px; right: 13px; width: 55px; height: 55px; font-size: 16px; }
  .profile-facts { grid-template-columns: 1fr 1fr; }.profile-facts div:first-child { grid-column: 1 / -1; }
  .about-intro--lgh { padding-top: 75px; }.lgh-profile-card { justify-self: stretch; max-width: none; }.about-intro--lgh .about-intro-copy h1 { font-size: 48px; }
  .lgh-details { grid-template-columns: 1fr; gap: 52px; }.lgh-attribute { grid-template-columns: .35fr 1fr; }
  .tet-picture-frame img { min-height: 365px; object-fit: cover; }.tet-picture-frame figcaption { right: 14px; bottom: 13px; left: 14px; display: grid; gap: 4px; font-size: 7px; }.tet-picture-frame figcaption strong { font-size: 25px; }
  .activity-grid--picture { grid-template-columns: 1fr 1fr; gap: 8px; }.activity-card--picture { min-height: 370px; padding: 11px; }.activity-image { height: 132px; margin-bottom: 14px; }.activity-card--picture h3 { font-size: 15px; }.activity-card--picture p { font-size: 10px; }.activity-card--picture .activity-number, .activity-card--picture .activity-tag { font-size: 8px; }
}

/* Private Sanity image archive */
.secret-page { min-height: 100vh; color: #e7ece3; background: radial-gradient(circle at 82% 12%, rgba(188, 62, 49, .17), transparent 27%), radial-gradient(circle at 13% 88%, rgba(193, 139, 56, .1), transparent 25%), #141715; }
.secret-page .site-header { color: #d5ded2; }.secret-page .site-nav { visibility: hidden; pointer-events: none; }.secret-main { padding-top: 95px; padding-bottom: 120px; }
.secret-shell { max-width: 900px; margin: 0 auto; padding: clamp(28px, 5vw, 65px); position: relative; overflow: hidden; border: 1px solid #485549; background: linear-gradient(140deg, rgba(34, 45, 36, .94), rgba(20, 25, 21, .92)); box-shadow: 15px 15px 0 rgba(4, 6, 5, .42); }
.secret-shell::before { content: "PRIVATE / 147569 / SANITY"; position: absolute; top: 25px; right: -55px; color: rgba(208, 169, 99, .35); font: 8px var(--mono); letter-spacing: .16em; transform: rotate(90deg); }
.secret-kicker { display: flex; align-items: center; gap: 10px; color: #d2a25e; font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }.secret-kicker .eyebrow-line { width: 32px; height: 1px; background: #be4b3b; }
.secret-intro { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 28px 0 55px; }.secret-intro h1 { margin: 0 0 19px; color: #eff1e8; font: 600 clamp(50px, 7vw, 88px)/.92 var(--display); letter-spacing: -.1em; }.secret-intro h1 em { color: #d8735d; font-style: normal; }.secret-intro p { max-width: 375px; margin: 0; color: #91a091; font-size: 13px; line-height: 1.85; }
.secret-seal { flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-content: center; color: #e4bd75; border: 1px solid #b78d54; border-radius: 50%; font: 700 22px/.8 var(--mono); text-align: center; transform: rotate(-9deg); }.secret-seal small { margin-top: 8px; font: 7px var(--mono); letter-spacing: .14em; }
.secret-login { max-width: 610px; padding-top: 22px; border-top: 1px solid rgba(225, 209, 171, .16); }.secret-login label { display: block; margin-bottom: 12px; color: #9eae9e; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.secret-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }.secret-input-row input { min-width: 0; height: 50px; padding: 0 16px; color: #e8eedf; border: 1px solid #526354; outline: 0; background: #182119; font: 15px var(--mono); letter-spacing: .24em; }.secret-input-row input:focus { border-color: #d09c5b; box-shadow: 0 0 0 3px rgba(208, 156, 91, .12); }.secret-input-row .button { min-height: 50px; }.secret-message { min-height: 16px; margin: 13px 0 0; color: #a4b1a0; font: 10px var(--mono); }.secret-message[data-kind="error"] { color: #e47c68; }.secret-message[data-kind="success"] { color: #b8d197; }
.secret-vault { margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(225, 209, 171, .16); }.vault-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.vault-head h2 { margin: 8px 0 0; color: #eef0e6; font: 600 clamp(28px, 4vw, 45px) var(--display); letter-spacing: -.08em; }.secret-logout { padding: 8px 0; color: #d4a769; border: 0; border-bottom: 1px solid #a95d4c; background: none; cursor: pointer; font: 9px var(--mono); text-transform: uppercase; }
.upload-zone { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 27px; padding: 22px; border: 1px dashed #637364; background: rgba(11, 16, 12, .32); }.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-zone label { min-height: 72px; display: grid; grid-template-columns: 48px 1fr; align-items: center; column-gap: 13px; cursor: pointer; }.upload-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #e4b966; border: 1px solid #9a7046; font: 25px var(--mono); }.upload-zone label strong { color: #d6dfd1; font: 500 13px var(--mono); }.upload-zone label small { grid-column: 2; color: #7f8f81; font: 9px var(--mono); }.upload-zone > .button { white-space: nowrap; }
.upload-preview { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding: 10px; border: 1px solid rgba(126, 155, 126, .28); background: rgba(13, 19, 14, .42); }.upload-preview img { width: 58px; height: 58px; object-fit: cover; }.upload-preview div { display: grid; gap: 5px; }.upload-preview span, .upload-result span { color: #c89859; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.upload-preview strong { color: #d4ded1; font: 11px var(--mono); overflow-wrap: anywhere; }.upload-results { display: grid; gap: 9px; margin-top: 18px; }.upload-result { display: flex; align-items: center; gap: 13px; padding: 9px; border: 1px solid rgba(126, 155, 126, .2); background: rgba(13, 19, 14, .32); }.upload-result img { width: 68px; height: 68px; object-fit: cover; }.upload-result div { display: grid; gap: 5px; }.upload-result strong { color: #d7e0d4; font: 11px var(--mono); overflow-wrap: anywhere; }.upload-result a { color: #dda968; font: 9px var(--mono); text-decoration: none; }.upload-result a:hover { color: #f0c27a; }
@media (max-width: 560px) { .secret-main { padding-top: 70px; }.secret-shell { padding: 24px 18px; box-shadow: 7px 7px 0 rgba(4, 6, 5, .42); }.secret-shell::before { display: none; }.secret-intro { align-items: start; margin-bottom: 38px; }.secret-seal { width: 65px; height: 65px; font-size: 16px; }.secret-intro h1 { font-size: 51px; }.secret-input-row { grid-template-columns: 1fr; }.upload-zone { grid-template-columns: 1fr; padding: 15px; }.upload-zone > .button { width: 100%; }.vault-head { align-items: start; }.secret-logout { margin-top: 15px; } }

/* Homepage hero stays code-first; Tet photography belongs only to /tet */
.home-code-visual { min-height: 472px; margin: 0; padding: 24px 25px; position: relative; overflow: hidden; border: 1px solid rgba(113, 72, 42, .34); background: linear-gradient(145deg, #fff9e9, #f0d6a5); box-shadow: 12px 12px 0 rgba(142, 83, 39, .15); transform: rotate(1deg); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.home-code-visual:hover { transform: rotate(0) translateY(-4px); box-shadow: 15px 15px 0 rgba(142, 83, 39, .15); }
.home-code-visual::before { content: ""; position: absolute; right: -80px; bottom: -90px; width: 280px; height: 280px; border: 1px solid rgba(188, 62, 49, .22); border-radius: 50%; box-shadow: 0 0 0 22px rgba(188, 62, 49, .045), 0 0 0 47px rgba(188, 62, 49, .03); }
.home-code-visual::after { content: ""; position: absolute; left: 23px; bottom: 21px; width: 74px; height: 1px; background: #c44b3d; transform: rotate(-34deg); transform-origin: left; }
.home-code-top { display: flex; justify-content: space-between; padding-bottom: 15px; color: #8c6947; border-bottom: 1px solid rgba(114, 79, 46, .2); font: 9px var(--mono); letter-spacing: .04em; }
.home-code-top span:first-child { display: flex; align-items: center; gap: 8px; }.home-code-top i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #c5493b; box-shadow: 0 0 0 4px rgba(197, 73, 59, .12); }
.home-code-body { min-height: 335px; display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; color: #5a3a2e; font: 13px/1.45 var(--mono); }
.home-code-body strong { display: block; font-weight: 500; white-space: nowrap; }.home-code-body b { color: #b33d33; font-weight: 600; }.home-code-body em { color: #8b672f; font-style: normal; }.home-code-body i { color: #a9643f; font-style: normal; }.home-code-comment { color: #9c855e; font-size: 10px; }
.home-code-cursor { width: 8px; height: 17px; margin-left: 2px; background: #c5493b; animation: blink 1.1s steps(2, start) infinite; }
.home-code-visual figcaption { position: absolute; z-index: 1; right: 25px; bottom: 21px; left: 25px; display: flex; align-items: end; justify-content: space-between; color: #8c6947; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.home-code-visual figcaption strong { color: #a33b31; font: 600 22px var(--display); letter-spacing: -.07em; text-transform: none; }
.home-code-seal { position: absolute; z-index: 2; top: 21px; right: 19px; width: 68px; height: 68px; display: grid; place-content: center; color: #f8dc95; border: 1px solid #b67c42; border-radius: 50%; background: #bd4437; font: 700 20px/.85 var(--display); text-align: center; transform: rotate(8deg); }
.home-code-seal small { margin-top: 5px; font: 7px var(--mono); letter-spacing: .08em; }
@media (max-width: 560px) { .home-code-visual { min-height: 365px; padding: 17px; }.home-code-body { min-height: 270px; gap: 8px; font-size: 10px; }.home-code-comment { font-size: 8px; }.home-code-visual figcaption { right: 17px; bottom: 15px; left: 17px; font-size: 7px; }.home-code-visual figcaption strong { font-size: 18px; }.home-code-seal { top: 14px; right: 13px; width: 55px; height: 55px; font-size: 16px; } }

/* Project mark from public/logoweb.jpg */
.brand-logo { width: 54px; height: 24px; display: block; flex: 0 0 auto; object-fit: cover; object-position: center; border-radius: 6px; mix-blend-mode: multiply; }
@media (max-width: 560px) { .brand-logo { width: 48px; height: 22px; } }

/* Readable data blocks / no glued labels */
.profile-facts { gap: 10px; margin-top: 38px; }
.profile-fact { min-width: 0; padding: 12px 13px 13px; position: relative; border: 1px solid rgba(225, 209, 171, .16); background: rgba(27, 35, 29, .5); }
.profile-fact .fact-key { display: block; color: #c46754; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.profile-fact strong { display: block; margin-top: 8px; color: #d9e1d5; font: 500 11px/1.45 var(--mono); overflow-wrap: anywhere; }
.profile-fact small { position: absolute; top: 12px; right: 12px; color: #627163; font: 8px var(--mono); }
.lgh-card-top { align-items: center; gap: 8px; }
.lgh-card-top > strong { min-width: 0; overflow: hidden; color: #d7dfd1; font: 500 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lgh-card-kind { color: #d06f58; font: 9px var(--mono); }
.lgh-card-badge { margin-left: auto; padding: 5px 7px; color: #e1b96e; border: 1px solid rgba(225, 185, 110, .35); font: 8px var(--mono); white-space: nowrap; }
.lgh-card-avatar { margin-top: 31px; }
.lgh-card-identity { padding-bottom: 19px; text-align: center; }
.lgh-card-identity .lgh-card-name { margin: 0; }
.lgh-card-identity .lgh-card-role { margin: 7px 0 0; }
.lgh-card-role i { color: #c46754; font-style: normal; }
.lgh-card-line { align-items: center; min-height: 38px; }
.lgh-card-line span { display: flex; align-items: center; gap: 9px; }.lgh-card-line span small { width: 14px; color: #5d6b5e; font: 8px var(--mono); }

/* Homepage code block: one datum per line */
.home-code-body { gap: 9px; }
.home-code-line { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: baseline; gap: 12px; min-width: 0; }
.home-code-line code { min-width: 0; color: #5a3a2e; font: 500 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.home-code-number { color: #b59a71; font: 9px var(--mono); text-align: right; user-select: none; }
.home-code-line code b { color: #b33d33; font-weight: 600; }.home-code-line code em { color: #8b672f; font-style: normal; }.home-code-line code i { color: #a9643f; font-style: normal; }
.home-code-line .home-code-cursor { grid-column: 2; margin-top: -4px; }
@media (max-width: 560px) {
  .profile-fact { padding: 10px; }.profile-fact strong { font-size: 9px; }.profile-fact small { top: 10px; right: 10px; }
  .home-code-line { grid-template-columns: 18px minmax(0, 1fr); gap: 7px; }.home-code-line code { font-size: 9px; }.home-code-number { font-size: 7px; }
}

/* About inherits the Tet countdown paper, red and brass palette */
.about-page--tet-theme { color: #49352a; background: #f6eddd; background-image: radial-gradient(circle at 86% 10%, rgba(195, 72, 54, .1), transparent 23%), radial-gradient(circle at 9% 74%, rgba(193, 139, 56, .12), transparent 26%), linear-gradient(90deg, rgba(120, 76, 43, .035) 1px, transparent 1px), linear-gradient(rgba(120, 76, 43, .035) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; }
.about-page--tet-theme::before { z-index: 0; opacity: .6; background-image: linear-gradient(rgba(123, 76, 43, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 76, 43, .03) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.about-page--tet-theme main, .about-page--tet-theme .site-header { z-index: 1; }
.about-page--tet-theme .site-header { color: #4d362b; }
.about-page--tet-theme .site-header--paper .brand { color: #4d362b; }
.about-page--tet-theme .site-header--paper .site-nav a { color: #765d49; }
.about-page--tet-theme .site-header--paper .site-nav a:hover, .about-page--tet-theme .site-header--paper .site-nav a:focus-visible, .about-page--tet-theme .site-header--paper .site-nav a.is-active { color: var(--red-dark); }
.about-page--tet-theme .header-status--paper { color: #8a6d52; }
.about-page--tet-theme .about-intro--lgh { position: relative; }
.about-page--tet-theme .about-intro--lgh::after { content: ""; position: absolute; right: 2%; top: 116px; width: 105px; height: 105px; border: 1px solid rgba(188, 62, 49, .22); border-radius: 50%; box-shadow: 0 0 0 13px rgba(188, 62, 49, .035), 0 0 0 31px rgba(193, 139, 56, .06); pointer-events: none; }
.about-page--tet-theme .about-intro::before { color: rgba(142, 46, 39, .43); }
.about-page--tet-theme .about-intro--lgh .about-intro-copy h1 { color: #4b3025; }
.about-page--tet-theme .about-intro--lgh .about-intro-copy h1 em { color: var(--red); text-shadow: 0 7px 0 rgba(193, 139, 56, .12); }
.about-page--tet-theme .eyebrow, .about-page--tet-theme .section-kicker { color: #966b43; }
.about-page--tet-theme .eyebrow-line { background: var(--red); }
.about-page--tet-theme .about-lede { color: #7d6651; }
.about-page--tet-theme .profile-facts { border-top-color: rgba(126, 76, 42, .22); }
.about-page--tet-theme .profile-fact { border-color: rgba(126, 76, 42, .2); background: rgba(255, 250, 239, .62); }
.about-page--tet-theme .profile-fact .fact-key { color: var(--red); }.about-page--tet-theme .profile-fact strong { color: #503a2d; }.about-page--tet-theme .profile-fact small { color: #aa8b68; }
.about-page--tet-theme .lgh-profile-card { border-color: rgba(126, 76, 42, .3); background: linear-gradient(145deg, #fff8e9, #ead7b6 92%); box-shadow: 12px 12px 0 rgba(126, 76, 42, .14); }
.about-page--tet-theme .lgh-profile-card::before { border-color: rgba(188, 62, 49, .24); box-shadow: 0 0 0 19px rgba(188, 62, 49, .045), 0 0 0 40px rgba(193, 139, 56, .05); }
.about-page--tet-theme .lgh-card-top { color: #8d6f50; }.about-page--tet-theme .lgh-card-top > strong { color: #563a2c; }.about-page--tet-theme .lgh-card-kind { color: var(--red); }.about-page--tet-theme .lgh-card-badge { color: #9b6b36; border-color: rgba(155, 107, 54, .38); }
.about-page--tet-theme .lgh-card-avatar { color: #f8de9a; background: var(--red); border-color: #b47a40; box-shadow: 0 0 0 8px rgba(193, 139, 56, .1); }
.about-page--tet-theme .lgh-card-name { color: #4b3025; }.about-page--tet-theme .lgh-card-role { color: #8d6c4d; }.about-page--tet-theme .lgh-card-line { color: #80664d; border-top-color: rgba(126, 76, 42, .18); }.about-page--tet-theme .lgh-card-line span small { color: #b29875; }.about-page--tet-theme .lgh-card-line b { color: #9c553e; }
.about-page--tet-theme .about-tet-bridge--lgh { border-color: rgba(142, 46, 39, .3); background: linear-gradient(105deg, #f8e9c7, #ead5ad 52%, #d75b46); box-shadow: 9px 9px 0 rgba(126, 74, 40, .13); }
.about-page--tet-theme .about-tet-bridge--lgh::after { border-color: rgba(255, 242, 201, .47); box-shadow: 0 0 0 18px rgba(255, 242, 201, .1), 0 0 0 38px rgba(255, 242, 201, .06); }
.about-page--tet-theme .bridge-terminal { color: #765e47; }.about-page--tet-theme .bridge-terminal::before { color: var(--red); }.about-page--tet-theme .bridge-terminal i { background: var(--red); }.about-page--tet-theme .bridge-terminal b { color: #8e5b32; }.about-page--tet-theme .bridge-copy h2 { color: #513529; }.about-page--tet-theme .bridge-copy h2 em { color: #9c3f34; }.about-page--tet-theme .about-tet-eyebrow { color: #9b6639; }.about-page--tet-theme .bridge-count { color: #795c42; border-left-color: rgba(126, 76, 42, .24); }.about-page--tet-theme .bridge-count strong { color: #a64135; }.about-page--tet-theme .bridge-count small { color: #85694c; }
.about-page--tet-theme .code-section--lgh, .about-page--tet-theme .lgh-details, .about-page--tet-theme .capabilities--lgh, .about-page--tet-theme .contact-section--lgh { border-top-color: rgba(126, 76, 42, .22); }
.about-page--tet-theme .code-section--lgh h2 { color: #4e3428; }.about-page--tet-theme .code-section--lgh h2 span { color: #9a7450; }.about-page--tet-theme .code-section-note { color: #866d55; }.about-page--tet-theme .code-section-note span { color: #a44a3b; }
.about-page--tet-theme .lgh-detail-block h2 { color: #4e3428; }.about-page--tet-theme .lgh-detail-block h2 span { color: #9a7450; }.about-page--tet-theme .lgh-detail-block > p:not(.section-kicker) { color: #7d6651; }.about-page--tet-theme .lgh-skill-tags span { color: #9b6b36; border-color: rgba(155, 107, 54, .35); }
.about-page--tet-theme .lgh-attributes { border-top-color: rgba(126, 76, 42, .22); }.about-page--tet-theme .lgh-attribute { border-bottom-color: rgba(126, 76, 42, .22); }.about-page--tet-theme .lgh-attribute span { color: var(--red); }.about-page--tet-theme .lgh-attribute strong { color: #5f4736; }
.about-page--tet-theme .capabilities--lgh .capability-list { border-top-color: rgba(126, 76, 42, .22); }.about-page--tet-theme .capabilities--lgh .capability-row { border-bottom-color: rgba(126, 76, 42, .22); }.about-page--tet-theme .capabilities--lgh .capability-row > span:first-child { color: #563b2d; }.about-page--tet-theme .capabilities--lgh .capability-items { color: #80674e; }.about-page--tet-theme .capabilities--lgh .capability-mark { color: var(--red); }
.about-page--tet-theme .contact-inner h2 { color: #4e3428; }.about-page--tet-theme .contact-inner h2 em { color: var(--red); }.about-page--tet-theme .contact-email { color: #593a2c; }.about-page--tet-theme .contact-caption, .about-page--tet-theme .contact-aside { color: #896f54; }.about-page--tet-theme .aside-index { color: #9b6b36; }
@media (max-width: 560px) { .about-page--tet-theme .about-intro--lgh::after { right: -25px; top: 95px; width: 72px; height: 72px; }.about-page--tet-theme .bridge-count { border-top-color: rgba(126, 76, 42, .24); } }

/* Final light-theme guard for About */
.about-page--tet-theme { background-color: #f6eddd !important; color: #49352a !important; }
.about-page--tet-theme .about-intro--lgh, .about-page--tet-theme .about-tet-bridge--lgh, .about-page--tet-theme .code-section--lgh, .about-page--tet-theme .lgh-details, .about-page--tet-theme .capabilities--lgh, .about-page--tet-theme .contact-section--lgh { color: #49352a; }
.about-page--tet-theme .about-intro--lgh .about-intro-copy, .about-page--tet-theme .lgh-detail-block, .about-page--tet-theme .contact-inner { color: #49352a; }

/* Native SVG activity icons: crisp at every size, no repeated raster imagery */
.activity-icon { height: 172px; margin: 15px -1px 20px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(116, 73, 42, .18); background: #d9c69b; }
.activity-icon svg { width: 100%; height: 100%; padding: 15px; overflow: visible; }
.activity-icon--cake { background: #ead8b8; }
.activity-icon--market { background: #e5cfa4; }
.activity-icon--flag { background: #f0dfc0; }
.activity-icon--fireworks { background: #263b4b; }
.activity-icon .icon-steam { animation: iconSteam 2.5s ease-in-out infinite; transform-origin: center bottom; }
.activity-icon .icon-flame { animation: iconFlame .75s ease-in-out infinite alternate; transform-origin: center bottom; }
.activity-icon .icon-ray { animation: iconFirework 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.activity-icon .icon-ray--red { animation-delay: -.9s; }
@keyframes iconSteam { 0%, 100% { opacity: .35; transform: translateY(3px) scale(.95); } 50% { opacity: .8; transform: translateY(-4px) scale(1.04); } }
@keyframes iconFlame { from { transform: scaleY(.9) translateY(3px); } to { transform: scaleY(1.05) translateY(-2px); } }
@keyframes iconFirework { 0%, 100% { opacity: .62; transform: scale(.88); } 48%, 62% { opacity: 1; transform: scale(1.06); } }
@media (max-width: 560px) {
  .activity-icon { height: 132px; margin-bottom: 14px; }
  .activity-icon svg { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-icon .icon-steam, .activity-icon .icon-flame, .activity-icon .icon-ray { animation: none; }
}

/* Two extra Tet moments: Ông Táo and a small interactive wish archive */
.activity-grid--picture { grid-template-columns: repeat(3, 1fr); }
.activity-card--picture:nth-child(5) { background: #e6d4ad; }
.activity-card--picture:nth-child(6) { background: #f0dfc0; }
.activity-icon--taoquan { background: #ead7b1; }
.activity-icon--wish { background: #e5c18d; }
.activity-icon--wish svg { filter: drop-shadow(0 6px 0 rgba(126, 66, 37, .08)); }
.activity-card--picture.is-open .activity-more { max-height: 150px; }
.activity-wish-more { display: flex; flex-direction: column; gap: 10px; }
.activity-wish { display: block; color: #725942; font: 11px/1.7 var(--body); }
.activity-wish-action { align-self: flex-start; padding: 7px 9px; color: #9d382f; border: 1px solid rgba(157, 56, 47, .35); background: rgba(255, 248, 230, .62); cursor: pointer; font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.activity-wish-action:hover, .activity-wish-action:focus-visible { color: #fff8e8; border-color: var(--red); background: var(--red); }
.activity-wish-action:focus-visible { outline: 2px solid #d4a34d; outline-offset: 3px; }
@media (max-width: 900px) {
  .activity-grid--picture { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .activity-grid--picture { grid-template-columns: 1fr 1fr; }
  .activity-wish { font-size: 10px; }
  .activity-wish-action { padding: 6px 7px; font-size: 8px; }
}

/* Public Tet guestbook */
.tet-comments { border-top: 1px solid var(--paper-line); }
.comments-heading { display: grid; grid-template-columns: 1fr .7fr; gap: 15%; align-items: end; margin-top: 30px; }
.comments-heading h2 { margin: 0; color: #4a352a; font: 600 clamp(37px, 5vw, 70px)/.98 var(--display); letter-spacing: -.09em; }
.comments-heading h2 span { color: var(--red); }
.comments-heading p { max-width: 360px; margin: 0; color: #806b55; font-size: 12px; line-height: 1.85; }
.comments-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14%; margin-top: 48px; }
.comment-form { padding: 25px; border: 1px solid rgba(126, 76, 42, .25); background: rgba(255, 249, 236, .65); box-shadow: 8px 8px 0 rgba(126, 76, 42, .1); }
.comment-form label { display: grid; gap: 9px; color: #986f45; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.comment-form input:not([type="file"]), .comment-form textarea { width: 100%; box-sizing: border-box; color: #4d382d; border: 1px solid rgba(126, 76, 42, .25); outline: 0; background: rgba(255, 253, 246, .78); font: 12px/1.6 var(--body); }
.comment-form input:not([type="file"]) { height: 43px; padding: 0 12px; }
.comment-form textarea { min-height: 126px; padding: 12px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(188, 62, 49, .1); }
.comment-form-top { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
.comment-honeypot { position: absolute !important; left: -10000px; width: 1px !important; height: 1px; overflow: hidden; }
.comment-upload { margin-top: 20px; padding: 15px; border: 1px dashed rgba(126, 76, 42, .35); background: rgba(247, 236, 212, .52); }
.comment-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.comment-upload-copy { display: flex; align-items: center; gap: 12px; }
.comment-upload-mark { width: 35px; height: 35px; display: grid; place-items: center; color: var(--red); border: 1px solid rgba(188, 62, 49, .45); font: 23px/1 var(--mono); }
.comment-file-label { display: block !important; color: #72543d !important; cursor: pointer; font-size: 10px !important; }
.comment-upload small { display: block; margin-top: 5px; color: #967d63; font: 9px var(--mono); line-height: 1.5; }
.comment-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.comment-file-list span { padding: 5px 7px; color: #76563c; border: 1px solid rgba(126, 76, 42, .2); background: rgba(255, 251, 240, .72); font: 8px var(--mono); overflow-wrap: anywhere; }
.comment-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; }
.comment-limit { color: #a18a6b; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.comment-form-bottom .button { flex: 0 0 auto; cursor: pointer; }
.comment-form-bottom .button:disabled { cursor: wait; opacity: .55; }
.comment-status { min-height: 16px; margin: 13px 0 0; color: #887158; font: 9px/1.6 var(--mono); }
.comment-status[data-kind="error"] { color: #b33d33; }.comment-status[data-kind="success"] { color: #5b744f; }
.comments-stream { min-width: 0; }
.comments-stream-head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 13px; color: #9a7049; border-bottom: 1px solid var(--paper-line); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.comments-list { display: grid; gap: 12px; margin-top: 12px; }
.comments-empty { margin: 0; padding: 24px 0; color: #937d65; font: 11px/1.7 var(--mono); }
.comment-item { padding: 17px 0 19px; border-bottom: 1px solid var(--paper-line); }
.comment-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.comment-item-head strong { color: #513a2d; font: 600 15px var(--display); letter-spacing: -.04em; }
.comment-item-head time { color: #a18a6b; font: 8px var(--mono); }
.comment-item > p { margin: 10px 0 0; color: #765e49; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-attachments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.comment-attachment { min-width: 0; overflow: hidden; border: 1px solid rgba(126, 76, 42, .2); background: #eadcc0; }
.comment-attachment img, .comment-attachment video { display: block; width: 100%; max-height: 270px; object-fit: cover; background: #2a3734; }
.comment-attachment audio { display: block; width: calc(100% - 14px); margin: 9px 7px 6px; }
.comment-attachment a { display: block; padding: 18px 12px; color: var(--red); font: 10px var(--mono); text-decoration: none; }
.comment-attachment a:hover { text-decoration: underline; }
.comment-attachment small { display: block; padding: 7px 9px; color: #8d7256; font: 8px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .comments-heading, .comments-layout { grid-template-columns: 1fr; gap: 32px; }
  .comments-layout { margin-top: 36px; }
}
@media (max-width: 560px) {
  .comments-heading h2 { font-size: 39px; }
  .comment-form { padding: 17px; box-shadow: 6px 6px 0 rgba(126, 76, 42, .1); }
  .comment-form-bottom { align-items: stretch; flex-direction: column; }
  .comment-form-bottom .button { width: 100%; }
  .comment-attachments { grid-template-columns: 1fr; }
  .comment-item-head { align-items: start; flex-direction: column; gap: 5px; }
}

/* TTC / Vietnamese traditional Tet transfer station */
.ttc-page { min-height: 100svh; overflow-x: hidden; color: #f8e9c8; background: #a6372e; background-image: radial-gradient(circle at 50% 12%, rgba(247, 213, 132, .2), transparent 25%), radial-gradient(circle at 6% 90%, rgba(36, 73, 53, .36), transparent 31%), linear-gradient(135deg, rgba(255, 232, 179, .05) 25%, transparent 25%, transparent 50%, rgba(255, 232, 179, .05) 50%, rgba(255, 232, 179, .05) 75%, transparent 75%); background-size: auto, auto, 72px 72px; }
.ttc-page::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(255, 224, 166, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 224, 166, .08) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.ttc-header { position: absolute; z-index: 4; top: 24px; right: clamp(20px, 5vw, 70px); left: clamp(20px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; }
.ttc-brand { display: inline-flex; align-items: center; gap: 10px; color: #ffe6b3; font: 10px var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.ttc-brand img { width: 42px; height: 27px; display: block; object-fit: cover; border: 1px solid rgba(248, 220, 147, .55); border-radius: 7px; mix-blend-mode: screen; }
.ttc-brand span span { padding-left: 4px; color: #f1c76e; }
.ttc-header-code { color: rgba(255, 226, 173, .7); font: 9px var(--mono); letter-spacing: .12em; }
.ttc-main { min-height: 100svh; position: relative; z-index: 1; display: grid; place-items: center; padding: 92px 20px 70px; }
.ttc-card { width: min(100%, 620px); position: relative; padding: clamp(45px, 8vw, 78px) clamp(24px, 6vw, 70px) clamp(35px, 6vw, 56px); border: 1px solid rgba(255, 224, 160, .58); background: linear-gradient(165deg, rgba(139, 40, 35, .68), rgba(112, 43, 37, .9)); box-shadow: 14px 14px 0 rgba(64, 23, 23, .27), inset 0 0 0 8px rgba(255, 225, 162, .05); text-align: center; }
.ttc-card::before, .ttc-card::after { content: ""; position: absolute; width: 22px; height: 22px; border-color: #f0ca70; border-style: solid; }
.ttc-card::before { top: 16px; left: 16px; border-width: 1px 0 0 1px; }.ttc-card::after { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }
.ttc-seal { position: absolute; top: 26px; right: 27px; width: 54px; height: 54px; display: grid; place-content: center; color: #9f312d; border: 1px solid #f0cb76; border-radius: 50%; background: #f4d889; font: 700 15px/.8 var(--display); transform: rotate(8deg); }
.ttc-seal small { margin-top: 5px; color: #b64a32; font: 9px serif; }
.ttc-kicker { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; color: #f3ce7b; font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ttc-kicker span { width: 25px; height: 1px; display: block; background: #e8b957; }
.ttc-sun { width: 70px; height: 70px; position: absolute; top: -37px; left: calc(50% - 35px); display: grid; place-items: center; border: 1px solid rgba(255, 224, 154, .65); border-radius: 50%; background: #d34e39; box-shadow: 0 0 0 9px rgba(255, 224, 154, .08); }
.ttc-sun::before, .ttc-sun::after { content: ""; position: absolute; width: 92px; height: 1px; background: rgba(244, 208, 120, .55); }.ttc-sun::after { transform: rotate(90deg); }
.ttc-sun span { width: 37px; height: 37px; display: block; border: 1px solid #f4d889; border-radius: 50%; }
.ttc-card h1 { margin: 27px 0 18px; color: #fff0ca; font: 700 clamp(48px, 8vw, 82px)/.94 var(--display); letter-spacing: -.1em; }
.ttc-card h1 em { color: #f5d47f; font-style: normal; }
.ttc-lede { max-width: 390px; margin: 0 auto; color: rgba(255, 236, 198, .78); font-size: 13px; line-height: 1.9; }
.ttc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 400px; margin: 34px auto 0; }
.ttc-button { min-height: 53px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; padding: 0 16px; border: 1px solid #f2d17f; cursor: pointer; font: 10px var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease; }
.ttc-button span { font-size: 16px; transition: transform .25s ease; }.ttc-button:hover, .ttc-button:focus-visible { transform: translateY(-3px); box-shadow: 5px 5px 0 rgba(66, 24, 23, .28); }.ttc-button:hover span, .ttc-button:focus-visible span { transform: translate(2px, -2px); }
.ttc-button:focus-visible { outline: 2px solid #fff0b6; outline-offset: 4px; }
.ttc-button--shop { color: #8e302a; background: #f4d681; }.ttc-button--home { color: #f9e4ac; background: rgba(110, 35, 32, .25); }
.ttc-route { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; color: rgba(255, 225, 162, .62); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.ttc-route i { width: 35px; height: 1px; display: block; background: rgba(243, 204, 116, .5); }
.ttc-note { margin: 25px 0 0; color: rgba(255, 229, 179, .55); font: 9px var(--mono); }
.ttc-footer { position: absolute; right: clamp(20px, 5vw, 70px); bottom: 25px; left: clamp(20px, 5vw, 70px); display: flex; justify-content: space-between; gap: 15px; margin: 0; color: rgba(255, 224, 165, .55); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ttc-easter { padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: color .2s ease, transform .2s ease; }.ttc-easter:hover, .ttc-easter:focus-visible { color: #f5d47f; transform: translateY(-2px); }.ttc-easter:disabled { cursor: wait; }
.ttc-decor { position: absolute; z-index: -1; top: 0; width: 220px; height: 100%; pointer-events: none; }.ttc-decor--left { left: -27px; }.ttc-decor--right { right: -27px; transform: scaleX(-1); }
.ttc-lantern { position: absolute; top: 13%; left: 33px; width: 64px; height: 130px; transform: rotate(-6deg); animation: ttcLantern 4.2s ease-in-out infinite; }.ttc-lantern i { position: absolute; top: 0; left: 31px; width: 1px; height: 43px; background: #f0c971; }.ttc-lantern b { position: absolute; top: 39px; left: 8px; width: 47px; height: 7px; background: #f0c971; }.ttc-lantern em { position: absolute; top: 45px; left: 2px; width: 60px; height: 72px; border-radius: 48% 48% 38% 38%; background: #d24a38; box-shadow: inset 9px 0 rgba(255, 226, 157, .18), inset -9px 0 rgba(100, 21, 21, .17); }.ttc-lantern em::after { content: "福"; position: absolute; inset: 0; display: grid; place-items: center; color: #f4d580; font: 25px serif; }.ttc-lantern em::before { content: ""; position: absolute; top: 72px; left: 29px; width: 1px; height: 30px; background: #f0c971; }
.ttc-branch { position: absolute; bottom: 15%; left: -13px; width: 210px; height: 145px; transform: rotate(-15deg); }.ttc-branch b { position: absolute; left: 26px; bottom: 30px; width: 190px; height: 9px; border-radius: 80%; background: #4b6b4a; transform: rotate(-18deg); }.ttc-branch i { position: absolute; width: 15px; height: 15px; border: 3px solid #e8b658; border-radius: 50%; background: #d64e39; }.ttc-branch i:nth-child(1) { left: 55px; bottom: 79px; }.ttc-branch i:nth-child(2) { left: 95px; bottom: 92px; }.ttc-branch i:nth-child(3) { left: 132px; bottom: 54px; }.ttc-branch i:nth-child(4) { left: 173px; bottom: 72px; }
@keyframes ttcLantern { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(5px); } }
@media (max-width: 700px) { .ttc-card { padding-top: 58px; }.ttc-decor { opacity: .42; transform: scale(.72); }.ttc-decor--left { left: -65px; }.ttc-decor--right { right: -65px; }.ttc-footer { align-items: center; flex-direction: column; bottom: 18px; text-align: center; } }
@media (max-width: 480px) { .ttc-header { top: 15px; }.ttc-header-code { display: none; }.ttc-main { padding: 85px 16px 85px; }.ttc-card { padding: 52px 18px 33px; box-shadow: 7px 7px 0 rgba(64, 23, 23, .27), inset 0 0 0 6px rgba(255, 225, 162, .05); }.ttc-seal { top: 20px; right: 18px; width: 46px; height: 46px; font-size: 12px; }.ttc-kicker { font-size: 7px; }.ttc-kicker span { width: 14px; }.ttc-card h1 { margin-top: 26px; font-size: 50px; }.ttc-lede { font-size: 12px; }.ttc-actions { grid-template-columns: 1fr; gap: 8px; margin-top: 27px; }.ttc-button { min-height: 48px; }.ttc-note { line-height: 1.6; }.ttc-decor { display: none; } }
@media (prefers-reduced-motion: reduce) { .ttc-lantern { animation: none; }.ttc-button, .ttc-button span { transition: none; } }

/* Tet shop launch button */
.tet-shop-launch-wrap { display: inline-grid; justify-items: start; gap: 12px; margin-bottom: 28px; padding-bottom: 8px; }
.shop-launch { width: 100px; height: 100px; position: relative; display: grid; place-items: center; padding: 0; margin: 0; color: #4a2800; text-shadow: 0 1px 1px rgba(255, 245, 195, 0.95), 0 -1px 0 rgba(70, 40, 0, 0.15); border: 2.5px solid #fff3c9; border-radius: 50%; outline: 0; background: radial-gradient(circle at 50% 25%, #fff2be 0%, #f4cb56 32%, #d69c28 68%, #9c6b0c 100%); box-shadow: 0 10px 0 #78500c, 0 12px 0 #523405, 0 16px 24px rgba(65, 40, 5, 0.45), inset 0 3px 6px rgba(255, 255, 255, 0.75), inset 0 -4px 6px rgba(110, 75, 10, 0.5); cursor: pointer; font: 800 13px/1.2 var(--display); letter-spacing: -.02em; text-align: center; transform: translateY(0); transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1), background .2s ease; -webkit-appearance: none; user-select: none; }
.shop-launch::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(115, 75, 10, 0.42); border-radius: 50%; pointer-events: none; }
.shop-launch::after { content: ""; position: absolute; top: 7px; left: 20px; right: 20px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); pointer-events: none; }
.shop-launch:hover, .shop-launch:focus-visible { background: radial-gradient(circle at 50% 22%, #fff7d1 0%, #fadb6d 32%, #e5aa36 68%, #aa7712 100%); box-shadow: 0 12px 0 #78500c, 0 14px 0 #523405, 0 20px 28px rgba(65, 40, 5, 0.52), inset 0 3px 6px rgba(255, 255, 255, 0.85), inset 0 -4px 6px rgba(110, 75, 10, 0.5); transform: translateY(-2px); }
.shop-launch:active { transform: translateY(8px) scale(1.04, 0.94); box-shadow: 0 2px 0 #78500c, 0 3px 0 #523405, 0 6px 12px rgba(65, 40, 5, 0.35), inset 0 2px 4px rgba(70, 40, 5, 0.4); }
.shop-launch:focus-visible { outline: 2px solid #b8861d; outline-offset: 5px; }
.shop-launch:disabled { cursor: wait; }
.shop-launch-label { position: relative; z-index: 1; text-transform: lowercase; transition: opacity .2s ease; }
.shop-launch-spinner { width: 32px; height: 32px; position: absolute; z-index: 2; border: 3px solid rgba(80, 45, 5, 0.25); border-top-color: #4a2800; border-radius: 50%; opacity: 0; transform: rotate(0deg); pointer-events: none; }
.shop-launch.is-loading, .is-loading .shop-launch { background: radial-gradient(circle at 50% 30%, #c49126 0%, #9a6d13 60%, #6d4b06 100%); transform: translateY(6px); box-shadow: 0 4px 0 #78500c, 0 5px 0 #523405, 0 8px 14px rgba(65, 40, 5, 0.38), inset 0 2px 6px rgba(0, 0, 0, 0.35); }
.is-loading .shop-launch-label { opacity: 0; }
.is-loading .shop-launch-spinner { opacity: 1; animation: shopSpinCounter 900ms linear infinite; }
.tet-shop-launch-wrap.is-crushed .shop-launch, .tet-shop-float.is-crushed .shop-launch { animation: shopSquash3D 580ms cubic-bezier(.22, 1, .36, 1); }
.shop-launch-status { min-height: 14px; color: #8f6c49; font: 700 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@keyframes shopSquash3D { 0% { transform: translateY(0) scale(1, 1); box-shadow: 0 10px 0 #78500c, 0 12px 0 #523405, 0 16px 24px rgba(65, 40, 5, 0.45), inset 0 3px 6px rgba(255, 255, 255, 0.75), inset 0 -4px 6px rgba(110, 75, 10, 0.5); } 22% { transform: translateY(11px) scale(1.28, 0.52); box-shadow: 0 1px 0 #78500c, 0 2px 0 #523405, 0 4px 8px rgba(65, 40, 5, 0.3), inset 0 3px 8px rgba(0, 0, 0, 0.45); } 48% { transform: translateY(-9px) scale(0.82, 1.25); box-shadow: 0 18px 0 #78500c, 0 20px 0 #523405, 0 26px 32px rgba(65, 40, 5, 0.58), inset 0 4px 8px rgba(255, 255, 255, 0.85); } 70% { transform: translateY(5px) scale(1.1, 0.92); box-shadow: 0 5px 0 #78500c, 0 7px 0 #523405, 0 10px 16px rgba(65, 40, 5, 0.38); } 86% { transform: translateY(-2px) scale(0.96, 1.04); box-shadow: 0 11px 0 #78500c, 0 13px 0 #523405, 0 18px 22px rgba(65, 40, 5, 0.46); } 100% { transform: translateY(0) scale(1, 1); box-shadow: 0 10px 0 #78500c, 0 12px 0 #523405, 0 16px 24px rgba(65, 40, 5, 0.45), inset 0 3px 6px rgba(255, 255, 255, 0.75), inset 0 -4px 6px rgba(110, 75, 10, 0.5); } }
@keyframes shopSpinCounter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .tet-shop-launch-wrap.is-crushed .shop-launch, .tet-shop-float.is-crushed .shop-launch, .is-loading .shop-launch-spinner { animation: none; } }

.calendar-easter { display: inline-block; margin-top: 24px; color: #827765; cursor: pointer; font: 10px var(--mono); letter-spacing: .05em; transition: color .2s ease, transform .2s ease; }
.calendar-easter:hover, .calendar-easter:focus-visible { color: var(--red-dark); transform: translateY(-1px); }

.ttc-actions { grid-template-columns: 1fr !important; }
.ttc-actions .ttc-button--shop { display: flex; width: 400px !important; max-width: 100%; height: 100px !important; min-height: 100px !important; border-radius: 14px; }

/* Private admin desk */
.admin-page { min-height: 100svh; color: #4a352a; background: #f3ead7; background-image: radial-gradient(circle at 82% 8%, rgba(188,62,49,.12), transparent 24%), linear-gradient(135deg, rgba(193,139,56,.06) 25%, transparent 25%, transparent 50%, rgba(193,139,56,.06) 50%, rgba(193,139,56,.06) 75%, transparent 75%); background-size: auto, 72px 72px; }
.admin-header { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0; display: flex; justify-content: space-between; gap: 20px; color: #886b4d; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.admin-brand { color: #a6372e; font-weight: 700; }.admin-brand span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; color: #f8e9c8; border-radius: 7px; background: #a6372e; font: 10px var(--display); letter-spacing: -.08em; }.admin-header-note { color: #a18a6b; }
.admin-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(55px, 9vw, 120px) 0 100px; }.admin-shell { max-width: 940px; margin: 0 auto; }.admin-kicker { margin: 0; color: #a6372e; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }.admin-shell h1 { margin: 22px 0 20px; color: #4a352a; font: 700 clamp(48px, 8vw, 92px)/.9 var(--display); letter-spacing: -.095em; }.admin-shell h1 em { color: #a6372e; font-style: normal; }.admin-intro { max-width: 440px; color: #846a50; font-size: 13px; line-height: 1.9; }
.admin-login { max-width: 620px; margin-top: 42px; padding: 22px; border: 1px solid rgba(126,76,42,.25); background: rgba(255,249,236,.72); box-shadow: 8px 8px 0 rgba(126,76,42,.1); }.admin-login label { display: block; margin-bottom: 10px; color: #986f45; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.admin-login-row { display: flex; gap: 8px; }.admin-login input { min-width: 0; flex: 1; height: 47px; padding: 0 13px; color: #4d382d; border: 1px solid rgba(126,76,42,.25); background: #fffdf6; font: 13px var(--mono); outline: 0; }.admin-login input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(188,62,49,.1); }.admin-button, .admin-logout, .admin-delete { cursor: pointer; border: 1px solid #a6372e; font: 10px var(--mono); letter-spacing: .04em; }.admin-button { padding: 0 16px; color: #fff8e8; background: #a6372e; }.admin-button span { padding-left: 10px; font-size: 16px; }.admin-button:hover, .admin-button:focus-visible { background: #822b26; }.admin-status { min-height: 18px; margin: 15px 0 0; color: #80664e; font: 10px var(--mono); }.admin-status[data-kind="error"] { color: #a6372e; }.admin-status[data-kind="success"] { color: #52704e; }
.admin-gate { max-width: 620px; margin-top: 42px; padding: 24px; border: 1px solid rgba(166,55,46,.3); background: rgba(166,55,46,.07); }.admin-gate p { margin: 0; color: #80664e; font: 11px/1.7 var(--mono); }.admin-gate .admin-gate-mark { margin-bottom: 12px; color: #a6372e; font-size: 9px; letter-spacing: .14em; }.admin-gate a { display: inline-block; margin-top: 18px; padding-bottom: 7px; color: #a6372e; border-bottom: 1px solid currentColor; font: 10px var(--mono); }.admin-gate a span { padding-left: 8px; font-size: 15px; }
.admin-panel { margin-top: 78px; padding-top: 28px; border-top: 1px solid rgba(126,76,42,.25); }.admin-panel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }.admin-panel h2 { margin: 10px 0 0; color: #4a352a; font: 600 clamp(34px, 5vw, 58px)/1 var(--display); letter-spacing: -.08em; }.admin-logout { padding: 10px 12px; color: #a6372e; background: transparent; }.admin-logout:hover, .admin-logout:focus-visible { color: #fff; background: #a6372e; }.admin-count { color: #a18a6b; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.admin-list { display: grid; gap: 12px; margin-top: 22px; }.admin-item { padding: 20px; border: 1px solid rgba(126,76,42,.2); background: rgba(255,249,236,.7); }.admin-item-head { display: flex; justify-content: space-between; gap: 14px; }.admin-item-head strong { color: #513a2d; font: 600 16px var(--display); }.admin-item-head time { color: #a18a6b; font: 9px var(--mono); }.admin-item > p { margin: 10px 0 0; color: #765e49; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }.admin-media { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 15px; }.admin-media img, .admin-media video { width: 100%; height: 145px; display: block; object-fit: cover; background: #2a3734; }.admin-media audio { width: 100%; margin-top: 45px; }.admin-media a { min-height: 90px; display: grid; place-items: center; padding: 10px; color: #a6372e; border: 1px solid rgba(126,76,42,.2); font: 10px var(--mono); text-align: center; }.admin-item-actions { display: flex; justify-content: flex-end; margin-top: 16px; }.admin-delete { padding: 8px 10px; color: #a6372e; border-color: rgba(166,55,46,.35); background: transparent; }.admin-delete:hover, .admin-delete:focus-visible { color: #fff; background: #a6372e; }.admin-delete:disabled { opacity: .5; cursor: wait; }.admin-empty { color: #80664e; font: 11px var(--mono); }
@media (max-width: 560px) { .admin-header { width: min(100% - 28px, 1180px); align-items: flex-start; flex-direction: column; gap: 10px; }.admin-main { width: min(100% - 28px, 1180px); padding-top: 50px; }.admin-login { padding: 16px; }.admin-login-row { align-items: stretch; flex-direction: column; }.admin-button { min-height: 45px; }.admin-panel-head { align-items: flex-start; flex-direction: column; }.admin-media { grid-template-columns: repeat(2, minmax(0,1fr)); }.admin-media img, .admin-media video { height: 120px; }.admin-item-head { align-items: flex-start; flex-direction: column; gap: 5px; } }