:root {
  --paper: #f4f3ec;
  --ink: #30382d;
  --muted: #838779;
  --line: #dfe1d5;
  --green: #5f7447;
  --lcd: #adbd86;
  --lcd-ink: #34462c;
  --sans: 'DM Sans', 'Noto Sans KR', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --pixel: 'Press Start 2P', 'IBM Plex Mono', monospace;
  --console-scale: 1;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button, a, [tabindex] { outline-offset: 5px; }
:focus-visible { outline: 2px solid #72954e; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(#6b76540a 1px, transparent 1px), linear-gradient(90deg, #6b76540a 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 51% 50%, #000 0, transparent 75%); pointer-events: none; }
.site-header { height: 96px; margin: 0 4.2vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.wordmark { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; letter-spacing: -.5px; }
.brand-pixel { width: 28px; height: 28px; color: #697b4c; }
.wordmark-sub { display: block; font: 8px var(--mono); letter-spacing: 1.65px; margin-top: 3px; color: #7d8375; }
.header-right { display: flex; align-items: center; gap: 25px; }
.edition { font: 10px var(--mono); letter-spacing: 1.5px; color: #777d6f; }
.header-divider { width: 1px; height: 17px; background: var(--line); }
.sound-button { padding: 8px 0 8px 8px; border: 0; background: none; display: flex; align-items: center; gap: 8px; font: 9px var(--mono); letter-spacing: .7px; }
.sound-button svg { width: 15px; height: 15px; }
.sound-button[aria-pressed="false"] .sound-wave, .sound-button[aria-pressed="true"] .sound-slash { display: none; }
.sound-button:hover { color: #7b9248; }
.playground { height: calc(100svh - 159px); min-height: 690px; position: relative; overflow: hidden; isolation: isolate; }
.background-orbit { position: absolute; width: 700px; height: 700px; left: 50%; top: 49%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #dce3bd96, #e5e9d450 55%, #e8ebda10 70%); z-index: -1; transition: left .9s var(--ease), opacity .7s; }
.background-orbit::after { content: ''; position: absolute; inset: 66px; border: 1px solid #bcc69f2a; border-radius: 50%; }
.ambient-label { position: absolute; left: 20px; top: 50%; writing-mode: vertical-rl; transform: rotate(180deg); font: 8px var(--mono); letter-spacing: 2px; color: #a1a795; }
.profile { position: absolute; top: 50%; left: 7.3%; width: calc(42.7% - 210px); max-width: 370px; min-width: 265px; transform: translateY(-48%); transition: opacity .3s, transform .65s var(--ease), visibility .3s; }
.eyebrow { display: flex; align-items: center; gap: 9px; font: 9px var(--mono); letter-spacing: 1px; color: #6f7b5f; margin-bottom: 25px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #78974e; box-shadow: 0 0 0 3px #78974e10; flex-shrink: 0; }
.eyebrow > span { color: #b4b9a7; padding: 0 3px; }
.profile h1 { font-size: clamp(27px, 2.28vw, 37px); line-height: 1.6; letter-spacing: -1.7px; font-weight: 600; margin: 0 0 28px; white-space: nowrap; }
.serif-accent { color: #6d7e53; position: relative; }
.serif-accent::after { content: ''; height: 6px; background: #c6d5a971; position: absolute; left: 0; right: 0; bottom: 3px; z-index: -1; transform: rotate(-2deg); }
.identity { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.identity strong { font-size: 20px; font-weight: 700; letter-spacing: -1px; }
.identity > span { font: 9px var(--mono); letter-spacing: 1.7px; color: #7d8374; }
.profile-role { font-size: 12px; font-weight: 500; line-height: 1.7; margin: 0; color: #59624f; }
.profile-description { font-size: 12px; line-height: 2; color: #888d7f; margin: 23px 0 24px; letter-spacing: -.2px; }
.contact-links { display: grid; gap: 14px; }
.contact-links a { display: flex; align-items: center; gap: 10px; font-size: 11px; width: fit-content; transition: color .2s, transform .2s; }
.contact-links a:hover { color: #79904d; transform: translateX(3px); }
.contact-links svg { width: 14px; height: 14px; }
.contact-links .link-arrow { width: 11px; height: 11px; margin-left: 4px; color: #8d9680; }
.resume-link { display: inline-flex; gap: 24px; font-size: 10px; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid #c6ceba; color: #6d7a5c; }
.resume-link:hover { border-color: var(--green); }
.profile-tags { display: flex; gap: 5px; margin-top: 28px; }
.profile-tags span { font: 8px var(--mono); letter-spacing: .3px; border: 1px solid #dce0d1; border-radius: 4px; padding: 5px 7px; color: #78836b; }

/* A CSS-built handheld: all controls are real, accessible buttons. */
.console-position { position: absolute; left: 50%; top: 50%; width: 360px; height: 576px; transform: translate(-50%, -50%) scale(var(--console-scale)); transform-origin: center; transition: left .85s var(--ease), top .85s var(--ease), transform .85s var(--ease); z-index: 2; }
.console-stage { position: relative; height: 100%; }
.console-top-note { position: absolute; top: -40px; width: 100%; text-align: center; color: #949d83; font: 7px var(--mono); letter-spacing: 1px; white-space: nowrap; }
.tiny-cross { font-size: 15px; margin-right: 6px; vertical-align: -1px; }
.gameboy { position: relative; width: 360px; height: 576px; border-radius: 18px 18px 76px 18px; background: linear-gradient(115deg, #e4e4dc 0%, #ddded5 40%, #d1d2c9 100%); box-shadow: inset 2px 2px 3px #ffffffec, inset -4px -5px 6px #8c908266, inset -1px 0 2px #919784, 10px 16px 22px -14px #5861455c, 26px 34px 46px -23px #6b745c40; border: 1px solid #cbcec0; }
.gameboy { transform: rotate(-5deg); transform-origin: center; }
.gameboy::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.23' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: .16; pointer-events: none; z-index: 3; }
.case-top { position: absolute; left: 0; right: 0; height: 27px; border-bottom: 3px solid #bfc3b7; box-shadow: 0 1px 0 #f5f5ec; }
.case-top span { position: absolute; top: 8px; left: 27px; border-radius: 9px; border: 1px solid #c9ccbf; box-shadow: 0 1px 1px #f0f1e8; padding: 1px 8px; font: 7px var(--mono); color: #8f9784; letter-spacing: .5px; text-shadow: 0 1px #fff9; }
.case-top i { position: absolute; top: 0; bottom: 0; width: 3px; background: #bfc3b7; box-shadow: 1px 0 #f0f1e8; left: 14px; }
.case-top i:last-child { left: auto; right: 14px; }
.screen-bezel { position: absolute; top: 47px; left: 24px; width: 310px; height: 278px; border-radius: 12px 12px 42px 12px; background: linear-gradient(125deg, #737a76, #636d68); box-shadow: inset 0 2px 2px #414c46, 1px 2px 0 #f1f1e4, 0 0 0 1px #9caa9b; }
.bezel-caption { display: flex; align-items: center; gap: 7px; position: absolute; top: 11px; left: 13px; right: 13px; }
.bezel-caption span { font: 5.8px var(--sans); letter-spacing: .6px; color: #d1d5ca; white-space: nowrap; }
.bezel-caption i { flex: 1; height: 5px; border-top: 2px solid #6a4d64; border-bottom: 1px solid #455975; }
.bezel-caption i:last-child { max-width: 30px; }
.battery { position: absolute; top: 88px; left: 7px; display: flex; align-items: center; flex-direction: column; gap: 7px; }
.battery i { width: 6px; height: 6px; background: #df6a56; border-radius: 50%; box-shadow: 0 0 7px #e6866380, inset 1px 1px 1px #f6b296; }
.battery span { color: #c7ccbe; font-size: 4.7px; letter-spacing: .2px; }
.lcd-screen { position: absolute; top: 33px; left: 38px; right: 17px; bottom: 24px; background: var(--lcd); color: var(--lcd-ink); box-shadow: inset 3px 4px 8px #384b4266, inset -1px -1px 2px #223f2530; overflow: hidden; border: 2px solid #465849; }
.lcd-screen::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, #2b482710 0px, #2b482710 1px, transparent 1px, transparent 3px); pointer-events: none; z-index: 3; }
.screen-menu { padding: 14px 12px 10px; }
.lcd-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 2px solid #425b3466; }
.lcd-top > span:first-child { display: flex; align-items: center; gap: 8px; font: 10px var(--pixel); letter-spacing: -.4px; }
.lcd-top svg { width: 12px; height: 12px; }
.lcd-battery { font-size: 10px; letter-spacing: -2px; border: 1px solid var(--lcd-ink); line-height: 8px; padding: 1px 3px 2px 1px; position: relative; }
.lcd-battery::after { content: ''; width: 2px; height: 5px; background: var(--lcd-ink); position: absolute; right: -3px; top: 2px; }
.lcd-subtitle { font: 6px var(--pixel); letter-spacing: -.25px; padding: 11px 0 9px; opacity: .75; }
.project-menu { height: 116px; overflow-y: auto; scrollbar-width: none; outline-offset: 1px; overscroll-behavior: contain; touch-action: pan-y; }
.project-menu::-webkit-scrollbar { display: none; }
.project-option { width: 100%; height: 23px; display: flex; align-items: center; gap: 7px; padding: 0 7px; font: 10px var(--mono); font-weight: 600; cursor: pointer; white-space: nowrap; }
.project-option .menu-cursor { width: 8px; opacity: 0; font-size: 10px; }
.project-option .menu-number { margin-left: auto; font-size: 8px; opacity: .6; }
.project-option[aria-selected="true"] { color: #bbcb98; background: #3c512e; box-shadow: 0 1px #c7d79e66; }
.project-option[aria-selected="true"] .menu-cursor { opacity: 1; }
.project-option:not([aria-selected="true"]):hover { background: #526a3829; }
.lcd-footer { display: flex; align-items: center; justify-content: space-between; font: 7px var(--mono); border-top: 1px solid #425b3466; margin-top: 7px; padding-top: 7px; font-weight: 600; }
.lcd-footer > span:last-child { font-size: 6px; letter-spacing: .3px; }
.lcd-footer b { display: inline-block; margin-left: 4px; animation: cursor-blink 1.6s steps(2, end) infinite; }
.console-brand { position: absolute; top: 339px; left: 28px; right: 27px; display: flex; justify-content: space-between; color: #465371; }
.console-brand > span { font: 700 13px var(--sans); letter-spacing: -.5px; }
.console-brand .gameboy-name { font-size: 20px; font-weight: 600; font-style: italic; letter-spacing: -1px; margin-left: 5px; }
.console-brand small { font-size: 7px; margin-top: 11px; margin-right: auto; }
.dpad-well { position: absolute; left: 25px; top: 387px; width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(135deg, #bfc2b632, #eceee052); box-shadow: inset 1px 2px 3px #b8bdae66, 1px 2px 1px #f3f4e470; }
.dpad { position: absolute; left: 9px; top: 9px; width: 94px; height: 94px; filter: drop-shadow(2px 4px 2px #39413166); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.dpad button, .dpad-center { border: none; background: #363a36; display: flex; align-items: center; justify-content: center; padding: 0; }
.dpad button { color: #5b6159; text-shadow: 0 -1px 1px #161e14; position: relative; }
.dpad button span { font-size: 11px; }
.dpad-up { grid-column: 2; grid-row: 1; border-radius: 4px 4px 0 0; box-shadow: inset 1px 2px 2px #818679; }
.dpad-left { grid-column: 1; grid-row: 2; border-radius: 4px 0 0 4px; box-shadow: inset 1px 2px 2px #818679; }
.dpad-center { grid-column: 2; grid-row: 2; }
.dpad-center i { width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(140deg, #272e28, #414740); box-shadow: inset 1px 1px 2px #141b1680, 0 1px 1px #6f7763; }
.dpad-right { grid-column: 3; grid-row: 2; border-radius: 0 4px 4px 0; box-shadow: inset 0 2px 1px #818679, inset -2px 0 1px #1c211e; }
.dpad-down { grid-column: 2; grid-row: 3; border-radius: 0 0 4px 4px; box-shadow: inset 1px 0 1px #777e71, inset 0 -3px 1px #212620; }
.dpad button:active:not(:disabled), .dpad button.pressed { background: #242c23; box-shadow: inset 1px 2px 5px #141b14; }
.action-well { position: absolute; top: 398px; right: 20px; display: flex; gap: 15px; padding: 9px 10px; border-radius: 50px; transform: rotate(-25deg); background: linear-gradient(160deg, #bec2b682, #edf0e0b0); box-shadow: inset 1px 2px 4px #a8b09c66, 0 2px 0 #e9eddd; }
.action-well > div { position: relative; }
.action-button { display: block; width: 49px; height: 49px; border-radius: 50%; border: 1px solid #75344c; background: linear-gradient(140deg, #a04764, #8c3954 55%, #792943); box-shadow: inset 1px 2px 2px #c2768b, inset -2px -3px 3px #6e223e, 2px 4px 2px #5b33435c; transition: box-shadow .08s, transform .08s; }
.action-button:active:not(:disabled), .action-button.pressed { transform: translateY(2px); box-shadow: inset 2px 3px 6px #5f243a, 0 1px 1px #5b33435c; }
.action-well > div > span { position: absolute; top: 61px; left: 21px; font-size: 12px; color: #465371; font-weight: 700; }
.system-buttons { position: absolute; top: 502px; left: 112px; display: flex; gap: 20px; transform: rotate(-25deg); }
.system-buttons > div { position: relative; }
.system-buttons button { width: 40px; height: 11px; display: block; padding: 0; border: 1px solid #788076; background: linear-gradient(#9aa18f, #7c8576); border-radius: 10px; box-shadow: 0 3px 2px #4a554273, 0 0 0 4px #bfc4b47d, inset 0 1px 1px #c0c5b5; }
.system-buttons button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 2px #49563d; }
.system-buttons span { position: absolute; top: 19px; width: 100%; text-align: center; font: 7px var(--sans); font-weight: 700; letter-spacing: 1px; color: #4e5b70; }
.speaker { position: absolute; bottom: 25px; right: 25px; display: flex; gap: 7px; transform: rotate(-27deg); }
.speaker i { display: block; width: 5px; height: 45px; border-radius: 8px; background: #a4ac99; box-shadow: inset 2px 1px 2px #656f5c, 1px 1px 0 #ebeddf; }
.case-bottom { position: absolute; left: 44px; bottom: 10px; color: #9ba28f; font: 5px var(--sans); letter-spacing: 1px; text-shadow: 0 1px #eff2df; }
.case-bottom span { margin-left: 5px; font-size: 9px; }
.console-shadow { position: absolute; width: 290px; height: 30px; background: #53623e28; filter: blur(14px); border-radius: 50%; left: 46px; bottom: -32px; z-index: -1; }
.console-caption, .locked-caption { position: absolute; bottom: -65px; left: -30px; right: -30px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #828d74; font: 7px var(--mono); letter-spacing: 1px; }
.caption-dot { width: 4px; height: 4px; background: #98a67c; border-radius: 50%; }
.locked-caption { font: 11px var(--sans); letter-spacing: -.2px; }
.locked-caption > span { font: 12px var(--mono); background: #e5e8dc; padding: 4px 6px; border-radius: 3px; }
.screen-playing { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; }
.playing-eyebrow { font: 7px var(--pixel); letter-spacing: 1px; }
.pixel-spark { font-size: 64px; line-height: 1.25; text-shadow: 3px 3px #768e5373; }
.screen-playing strong { font: 600 16px var(--mono); margin: 7px 0; }
.playing-category { font: 8px var(--mono); opacity: .75; }
.playing-lock { border: 1px solid #34462c66; font: 7px var(--mono); padding: 5px 9px; margin-top: 20px; letter-spacing: 1px; }

.invitation { position: absolute; top: 50%; left: calc(50% + 270px); width: 255px; transform: translateY(-43%); transition: opacity .3s, transform .6s var(--ease), visibility .3s; }
.invitation-top { display: flex; gap: 12px; align-items: center; color: #8a9575; }
.pixel-star { font: 42px Georgia, serif; color: #899b68; line-height: 1; }
.invitation-top > span:last-child { font: 8px var(--mono); letter-spacing: 1.3px; line-height: 1.8; }
.invitation h2 { font-size: 30px; line-height: 1.3; font-weight: 500; letter-spacing: -1.1px; margin: 25px 0 15px; }
.invitation h2 em { color: #7d8d60; font-family: Georgia, serif; font-size: 35px; font-weight: 400; }
.invitation > p { font-size: 12px; color: #929785; line-height: 1.9; }
.handdrawn-arrow { position: relative; height: 70px; margin-top: 5px; }
.handdrawn-arrow svg { width: 100px; height: 60px; position: absolute; left: -32px; top: 0; stroke: #a6af92; stroke-width: 1.5; }
.handdrawn-arrow > span { font-size: 10px; color: #8c9878; position: absolute; top: 18px; left: 79px; transform: rotate(-7deg); }
.how-to { margin-top: 17px; border-top: 1px solid var(--line); padding-top: 21px; display: grid; gap: 13px; }
.how-to > div { display: flex; align-items: center; gap: 16px; }
.how-to > div > span:first-child { display: flex; align-items: center; gap: 5px; width: 118px; }
.how-to > div > span:last-child { font-size: 10px; color: #919782; }
kbd { font: 10px var(--mono); display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d5dacb; background: #f9f9f37a; border-radius: 4px; padding: 3px 6px; box-shadow: 0 2px 0 #e2e5d8; color: #778568; }
.or { color: #b4bca6; padding: 0 3px; font-size: 10px; }
.key-enter { font-size: 8px; padding: 5px 6px; }
.mini-a { display: flex; align-items: center; justify-content: center; border: 1px solid #a5af95; color: #7e8b6d; border-radius: 50%; width: 19px; height: 19px; font: 10px var(--mono); }
.mouse-icon { display: inline-block; height: 20px; width: 14px; border: 1px solid #9ba88b; border-radius: 7px; position: relative; }
.mouse-icon::before { content: ''; position: absolute; top: 3px; left: 5px; width: 2px; height: 5px; border-radius: 3px; background: #9ba88b; }
.site-footer { height: 63px; margin: 0 4.2vw; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #909782; font: 8px var(--mono); letter-spacing: .8px; }
.footer-center { display: flex; align-items: center; gap: 8px; }
.footer-center i { width: 4px; height: 4px; background: #86996a; }
.footer-note > span { margin-left: 9px; font-size: 14px; }

/* Reading mode. The console is inert until the panel is closed. */
.is-open .profile { opacity: 0; visibility: hidden; transform: translate(-35px, -48%); pointer-events: none; }
.is-open .invitation { opacity: 0; visibility: hidden; transform: translate(30px, -43%); pointer-events: none; }
.is-open .console-position { left: 22%; transform: translate(-50%, -50%) scale(calc(var(--console-scale) * .88)); }
.is-open .background-orbit { left: 22%; opacity: .65; }
.is-open .console-top-note { opacity: .45; }
.detail-panel { position: absolute; top: 28px; bottom: 27px; left: 41%; right: 5%; border: 1px solid #dce1d1; border-radius: 16px; background: #fdfdf8; box-shadow: 0 20px 70px -35px #53613d38; display: flex; flex-direction: column; z-index: 4; opacity: 0; transform: translate(35px, 8px); transition: opacity .55s .15s, transform .7s .1s var(--ease); overflow: hidden; }
.is-open .detail-panel { opacity: 1; transform: translate(0, 0); }
.detail-panel.is-closing { opacity: 0; transform: translateX(calc(100% + 8vw)) rotate(4deg); transform-origin: bottom right; transition: transform .58s cubic-bezier(.55, .04, .78, .5), opacity .28s .24s ease; pointer-events: none; }
.detail-toolbar { flex-shrink: 0; min-height: 59px; padding: 12px 25px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4e8dd; }
.detail-toolbar > div { display: flex; align-items: center; gap: 9px; font: 9px var(--mono); letter-spacing: 1.1px; color: #7a886b; }
.close-button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font-size: 11px; padding: 5px 0 5px 8px; color: #727d65; }
.close-button:hover { color: #2e4824; }
.close-button kbd { font-size: 7px; padding: 3px 4px; }
.close-button svg { width: 17px; height: 17px; }
.detail-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9d2bb transparent; flex: 1; min-height: 0; }
.detail-content { padding: 32px; }
.project-category { font: 9px var(--mono); letter-spacing: 1px; color: #77896a; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.project-category .project-type { padding: 4px 7px; background: #edf1e4; border-radius: 3px; font: 8px var(--sans); }
.detail-title { font-size: clamp(29px, 3vw, 45px); letter-spacing: -1.5px; line-height: 1.15; margin: 0 0 13px; font-weight: 600; }
.detail-subtitle { margin: 0; color: #8a927e; font-size: 12px; line-height: 1.9; word-break: keep-all; }
.project-cover { height: 235px; margin: 26px 0 22px; border-radius: 9px; background: #e6ebd6; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 32px; isolation: isolate; }
.project-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #677d3610; border-radius: inherit; background-image: radial-gradient(#46592e13 1px, transparent 1px); background-size: 12px 12px; z-index: -1; }
.cover-eyebrow { font: 7px var(--mono); letter-spacing: 1.4px; margin-bottom: 16px; color: #677653; z-index: 2; }
.cover-headline { font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -1.5px; position: relative; z-index: 2; }
.cover-headline em { font-family: Georgia, serif; font-weight: 400; }
.cover-caption { position: absolute; left: 17px; bottom: 12px; font: 6px var(--mono); letter-spacing: 1px; opacity: .45; z-index: 2; }
.cover-graphic { position: absolute; right: 15px; top: 10px; width: 51%; height: calc(100% - 20px); color: #6f8351; }
.cover-graphic svg { width: 100%; height: 100%; stroke-width: 1; overflow: visible; }
.project-meta { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; padding: 4px 0 23px; border-bottom: 1px solid #e1e6d7; margin: 0; }
.project-meta dt { font: 8px var(--mono); letter-spacing: 1px; color: #99a38d; margin-bottom: 9px; }
.project-meta dd { font-size: 10px; line-height: 1.8; margin: 0; color: #5e6b51; word-break: keep-all; }
.project-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 21px 0 28px; }
.project-link { padding: 10px 14px; border: 1px solid #d7dfcb; display: inline-flex; align-items: center; gap: 8px; border-radius: 5px; font-size: 10px; transition: background .2s, transform .2s; }
.project-link svg { width: 12px; height: 12px; }
.project-link.primary { background: #495d38; color: #f9fbf1; border-color: #495d38; }
.project-link:hover { transform: translateY(-2px); background: #eaf0df; }
.project-link.primary:hover { background: #637c4b; }
.project-url { display: block; flex-basis: 100%; font: 9px var(--mono); color: #909b82; margin-top: 3px; word-break: break-all; }
.project-overview h3, .project-highlights h3, .project-stack h3 { font: 9px var(--mono); letter-spacing: 1.6px; color: #7f8d6e; margin: 27px 0 14px; display: flex; align-items: center; gap: 11px; }
.section-no { color: #abb59b; }
.project-overview p { font-size: 12px; line-height: 2.05; word-break: keep-all; color: #6f7865; }
.project-overview p b { font-weight: 600; color: #445237; }
.project-overview code, .source-content code { font: .9em var(--mono); background: #edf1e6; color: #647750; border-radius: 3px; padding: 2px 4px; overflow-wrap: anywhere; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.highlight-card { border: 1px solid #e1e7d7; border-radius: 6px; background: #f5f7ed; padding: 17px 13px; }
.highlight-card > span { font: 18px var(--mono); color: #849766; display: block; margin-bottom: 14px; }
.highlight-card h4 { font-size: 10px; color: #556743; margin: 0 0 8px; font-weight: 600; }
.highlight-card p { font-size: 10px; line-height: 1.8; color: #8b957f; margin: 0; word-break: keep-all; }
.stack-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-chips > span { border: 1px solid #dde4d1; padding: 6px 9px; border-radius: 4px; font: 9px var(--mono); color: #798b64; }
.technical-details { margin-top: 28px; border-top: 1px solid #dce3d0; border-bottom: 1px solid #dce3d0; }
.technical-details > summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; justify-content: space-between; gap: 10px; color: #637651; font-size: 11px; }
.technical-details > summary::-webkit-details-marker { display: none; }
.technical-details > summary > span:last-child { font: 14px var(--mono); }
.technical-details[open] > summary > span:last-child { transform: rotate(45deg); }
.source-content { --paper-2: #eef1e7; --accent: #688451; --teal: #4d7260; --ink-3: #8c9980; font-size: 11px; color: #748068; line-height: 1.9; padding: 0 0 18px; overflow-wrap: anywhere; }
.source-content h3 { color: #425838; font-size: 13px; margin: 22px 0 12px; }
.source-content h4 { font: 10px var(--mono); color: #526844; margin: 24px 0 10px; }
.source-content h5 { font-size: 11px; color: #596c47; margin: 18px 0 8px; }
.source-content h5 em { font-style: normal; margin-right: 8px; color: #9caa8c; }
.source-content p { margin: 0 0 12px; }
.source-content ul { padding-left: 16px; }
.source-content li { margin-bottom: 9px; }
.source-content table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; margin: 10px 0 20px; }
.source-content th, .source-content td { text-align: left; padding: 10px; vertical-align: top; border: 1px solid #dfe5d5; }
.source-content th { background: #f0f3e9; font-weight: 500; width: 25%; }
.source-content .prj-aside { border-top: 1px solid #dfe5d5; padding-top: 6px; }
.source-content .tree { white-space: pre-wrap; font: 9px/1.8 var(--mono); background: #f0f3e9; padding: 14px; overflow-x: auto; }
.source-content a { text-decoration: underline; }
.detail-end { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-end > span { font: 7px var(--mono); letter-spacing: 1px; color: #a3af94; }
.back-to-menu { font-size: 10px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 0; color: #6c8058; }
.back-to-menu:hover { color: #34482b; }
.noscript-note { position: fixed; bottom: 10px; left: 10px; right: 10px; z-index: 20; padding: 15px; background: white; border: 1px solid var(--line); text-align: center; font-size: 13px; }
.noscript-note a { text-decoration: underline; }
.cover-astra, .cover-cosmosea { background: #202b36; color: #eceddb; }
.cover-astra .cover-eyebrow, .cover-cosmosea .cover-eyebrow { color: #a9bba7; }
.cover-astra .cover-graphic, .cover-cosmosea .cover-graphic { color: #b8c9a1; }
.cover-signbot { background: #e7e2ed; color: #5d4b79; }
.cover-signbot .cover-graphic { color: #9a85b6; }
.cover-docmind { background: #e1e9e0; }
.cover-studyflow { background: #f0e6d4; color: #877148; }
.cover-studyflow .cover-graphic { color: #b39d72; }
.cover-signvoice { background: #e9e2d9; color: #846342; }
.cover-signvoice .cover-graphic { color: #b9a080; }
.cover-majubom { background: #e1e9df; }
.cover-hatrio { background: #e9dfd2; color: #805d43; }
.cover-hatrio .cover-graphic { color: #ae8968; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes entrance { from { opacity: 0; } to { opacity: 1; } }
body { animation: entrance .7s ease both; }

@media (min-width: 1600px) {
  :root { --console-scale: 1.1; }
  .profile { left: 10%; }
  .invitation { left: calc(50% + 300px); width: 275px; }
}
@media (max-height: 830px) and (min-width: 1001px) {
  :root { --console-scale: .87; }
  .site-header { height: 80px; }
  .playground { height: calc(100svh - 136px); min-height: 580px; }
  .site-footer { height: 56px; }
  .profile h1 { margin-bottom: 20px; }
  .profile-description { margin: 18px 0; }
  .profile-tags { margin-top: 20px; }
  .console-caption { bottom: -50px; }
  .detail-panel { top: 20px; bottom: 20px; }
  .invitation { left: calc(50% + 240px); }
}
@media (max-width: 1250px) {
  .profile { left: 5.5%; min-width: 245px; }
  .profile h1 { font-size: 27px; }
  .invitation { left: calc(50% + 220px); width: 215px; }
  .invitation h2 { font-size: 27px; }
  .invitation h2 em { font-size: 31px; }
  .how-to > div { gap: 4px; }
  .ambient-label { display: none; }
  .is-open .console-position { left: 21%; transform: translate(-50%, -50%) scale(calc(var(--console-scale) * .83)); }
  .detail-panel { left: 39%; right: 4%; }
  .detail-content { padding: 26px; }
  .project-cover { padding: 25px; }
  .cover-headline { font-size: 29px; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  :root { --console-scale: .83; }
  .profile { left: 4.5%; min-width: 225px; }
  .profile h1 { font-size: 25px; }
  .invitation { left: calc(50% + 183px); width: 208px; }
  .invitation h2 { font-size: 25px; }
}
@media (max-width: 1000px) {
  :root { --console-scale: .9; }
  .site-header { height: 82px; margin: 0 30px; }
  .playground { height: 960px; min-height: 0; overflow: hidden; }
  .console-position { top: 350px; }
  .profile { top: 720px; left: 8%; width: 42%; max-width: none; min-width: 0; transform: none; }
  .profile h1 { font-size: 24px; line-height: 1.5; margin-bottom: 17px; }
  .eyebrow { margin-bottom: 15px; font-size: 8px; }
  .identity strong { font-size: 17px; }
  .profile-role { font-size: 10px; }
  .profile-description, .profile-tags { display: none; }
  .contact-links { margin-top: 15px; gap: 11px; }
  .resume-link { margin-top: 15px; }
  .invitation { top: 720px; left: 58%; width: 32%; transform: none; }
  .invitation h2 { font-size: 24px; margin: 18px 0 10px; }
  .invitation h2 em { font-size: 28px; }
  .invitation > p, .handdrawn-arrow { display: none; }
  .invitation-top > span:last-child { font-size: 7px; }
  .invitation-top .pixel-star { font-size: 31px; }
  .how-to { padding-top: 15px; margin-top: 17px; }
  .background-orbit { top: 350px; }
  .site-footer { margin: 0 30px; height: 65px; }
  .footer-note { display: none; }
  .is-open .console-position { left: 19%; top: 350px; transform: translate(-50%, -50%) scale(.62); }
  .is-open .profile { transform: translateY(25px); }
  .is-open .invitation { transform: translateY(25px); }
  .is-open .playground { height: calc(100svh - 147px); min-height: 660px; }
  .detail-panel { left: 36%; right: 3%; top: 20px; bottom: 20px; }
  .detail-content { padding: 23px; }
  .detail-title { font-size: 31px; }
  .project-cover { height: 205px; padding: 21px; }
  .cover-headline { font-size: 27px; }
  .highlight-grid { grid-template-columns: 1fr; }
  .highlight-card { display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px; padding: 14px; }
  .highlight-card > span { grid-row: span 2; margin: 0; font-size: 17px; }
  .highlight-card h4 { margin: 0; }
  .highlight-card p { grid-column: 2; }
  .detail-toolbar { padding: 12px 20px; }
  .detail-toolbar > div { font-size: 8px; letter-spacing: .5px; }
  .close-button kbd { display: none; }
}
@media (max-width: 650px) {
  :root { --console-scale: .82; }
  .site-header { height: 74px; margin: 0 22px; }
  .wordmark { font-size: 16px; gap: 9px; }
  .brand-pixel { width: 24px; height: 24px; }
  .wordmark-sub { font-size: 6px; letter-spacing: 1.1px; }
  .edition, .header-divider { display: none; }
  .sound-button { font-size: 7px; gap: 5px; }
  .header-right { gap: 0; }
  .playground { height: 1080px; }
  .console-position { top: 323px; }
  .console-top-note { font-size: 7px; top: -40px; letter-spacing: .7px; }
  .background-orbit { top: 323px; width: 540px; height: 540px; }
  .profile { top: 707px; left: 8%; right: 8%; width: auto; }
  .profile h1 { font-size: 27px; line-height: 1.5; margin-bottom: 21px; }
  .identity strong { font-size: 19px; }
  .profile-role { font-size: 11px; }
  .contact-links { margin-top: 20px; gap: 14px; }
  .contact-links a { font-size: 11px; }
  .resume-link { margin-top: 21px; font-size: 11px; }
  .profile-tags { display: flex; margin-top: 22px; }
  .invitation { top: 622px; left: 8%; right: 8%; width: auto; }
  .invitation-top, .invitation h2 { display: none; }
  .how-to { margin: 0; padding: 17px 0; display: flex; justify-content: center; gap: 18px; border-bottom: 1px solid var(--line); }
  .how-to > div { gap: 7px; }
  .how-to > div > span:first-child { width: auto; }
  .how-to > div > span:last-child { font-size: 9px; }
  .how-to .or, .how-to .mouse-icon, .how-to .mini-a { display: none; }
  .site-footer { height: 66px; margin: 0 22px; font-size: 6px; letter-spacing: .5px; }
  .footer-center { gap: 5px; }
  .is-open .playground { min-height: 0; height: calc(100svh - 74px); }
  .is-open .console-position { top: 111px; left: 50%; transform: translate(-50%, -50%) scale(.29); }
  .is-open .console-top-note, .is-open .console-caption, .is-open .locked-caption { opacity: 0; }
  .is-open .background-orbit { top: 120px; left: 50%; opacity: .6; }
  .is-open .site-footer { display: none; }
  .detail-panel { top: 214px; left: 0; right: 0; bottom: 0; border-radius: 19px 19px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px #5c6b4320; }
  .detail-toolbar { min-height: 54px; padding: 11px 23px; }
  .detail-toolbar > div { font-size: 8px; }
  .close-button { gap: 11px; font-size: 11px; }
  .detail-content { padding: 27px 23px; }
  .detail-title { font-size: 34px; }
  .detail-subtitle { font-size: 11px; }
  .project-cover { height: 235px; margin-top: 24px; justify-content: flex-end; padding: 22px 21px 32px; }
  .cover-headline { font-size: 29px; }
  .cover-eyebrow { position: absolute; top: 22px; left: 21px; font-size: 6px; letter-spacing: .6px; }
  .cover-graphic { top: 27px; right: 2px; width: 50%; height: 119px; }
  .project-meta { gap: 18px; grid-template-columns: 1.15fr 1fr; }
  .project-meta dd { font-size: 10px; }
  .project-overview p { font-size: 12px; }
  .detail-end > span { font-size: 6px; letter-spacing: .5px; }
}
@media (max-width: 370px) {
  :root { --console-scale: .74; }
  .console-position { top: 300px; }
  .invitation { top: 575px; }
  .profile { top: 657px; }
  .playground { height: 1030px; }
  .cover-headline { font-size: 25px; }
  .site-header { margin: 0 16px; }
  .detail-content { padding: 23px 19px; }
}
@media (max-height: 700px) and (max-width: 650px) {
  .is-open .console-position { top: 76px; transform: translate(-50%, -50%) scale(.21); }
  .detail-panel { top: 151px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .profile, .console-position, .invitation, .site-footer, .background-orbit, .ambient-label, .detail-toolbar, .detail-end { display: none !important; }
  .is-open .playground, .playground { height: auto; min-height: 0; overflow: visible; }
  .detail-panel { position: static; border: 0; opacity: 1; transform: none; box-shadow: none; }
  .detail-scroll { overflow: visible; }
  .detail-content { padding: 0; }
  .project-cover { print-color-adjust: exact; }
}