:root {
  --paper: #FFF8F0;
  --surface: #FFFFFF;
  --ink: #2B2B3A;
  --muted: #7A6E82;
  --accent: #F76C5E;
  --line: #FFE0D6;
  --accent-ink: color-mix(in srgb, var(--accent) 50%, var(--ink) 50%);
  --container: 1080px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
::selection { color: var(--surface); background: var(--accent); }
.shell { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--surface); padding: 10px 14px; }
.skip-link:focus { top: 16px; }
h1, h2, p { margin-top: 0; }

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { min-height: 70px; display: flex; align-items: center; gap: 38px; }
.identity { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 13px; font-weight: 750; white-space: nowrap; }
.identity-glyph { font-family: Georgia, serif; font-size: 28px; font-weight: 700; letter-spacing: -.12em; line-height: 1; }
.identity-glyph span { color: var(--accent); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 25px; }
.site-header nav a { font-size: 12px; text-decoration: none; border-bottom: 1px solid transparent; padding: 5px 0; }
.site-header nav a:hover { border-color: var(--accent); }
.header-side { margin-left: auto; color: var(--muted); font-size: 10px; letter-spacing: .1em; }

.works-section { background: var(--paper); padding: 65px 0 80px; }
.works-intro { margin-bottom: 34px; }
.overline { color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .13em; margin-bottom: 14px; }
.works-intro h1 { font-size: clamp(29px, 3vw, 36px); font-weight: 700; letter-spacing: -.055em; margin-bottom: 10px; }
.works-intro > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.work-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.card-visual { height: 205px; position: relative; overflow: hidden; }
.work-arknights .card-visual { background: linear-gradient(145deg, #2b3333, #131917); }
.work-zeta .card-visual { background: radial-gradient(circle at 70% 25%, #59618c, #1c2444 70%); }
.visual-code, .visual-bottom { position: absolute; font-size: 9px; letter-spacing: .13em; color: #d5d7d1; }
.visual-code { left: 22px; top: 20px; }
.visual-bottom { right: 22px; bottom: 19px; }
.visual-arch { position: absolute; left: 50%; top: 55%; width: 154px; height: 154px; transform: translate(-50%, -50%) rotate(-9deg); border: 15px solid #d7dfd5; border-bottom-color: transparent; border-left-color: #92a79a; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.15), inset 0 0 0 17px rgba(255,255,255,.05); }
.visual-arch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 47px; height: 47px; transform: translate(-50%, -50%) rotate(45deg); background: #e8a35d; box-shadow: 0 0 30px rgba(231,176,105,.27); }
.arch-tick { position: absolute; width: 2px; height: 11px; background: #a5b6a9; }
.tick-1 { top: -42px; left: 50%; }
.tick-2 { top: 63px; right: -43px; transform: rotate(90deg); }
.tick-3 { bottom: -35px; left: 34px; transform: rotate(40deg); }
.visual-pages { position: absolute; left: 50%; top: 51%; width: 185px; height: 148px; transform: translate(-50%, -50%); }
.visual-pages span { position: absolute; left: 30px; top: 10px; width: 104px; height: 115px; border: 1px solid #c2b7e8; border-radius: 6px; background: #eee8ff; transform: rotate(-14deg); }
.visual-pages span:nth-child(2) { left: 56px; top: 22px; background: #ccd2f2; transform: rotate(2deg); }
.visual-pages span:nth-child(3) { left: 78px; top: 34px; background: #fcf9fa; transform: rotate(16deg); }
.visual-pages span::after { content: ""; position: absolute; left: 17px; right: 17px; top: 30px; height: 2px; background: #9e9bc4; box-shadow: 0 18px #9e9bc4, 0 36px #9e9bc4; }
.card-content { padding: 22px 24px 24px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 23px; margin-bottom: 20px; color: var(--muted); font-size: 9px; letter-spacing: .07em; }
.status { display: inline-block; padding: 5px 8px; border-radius: 2px; font-size: 10px; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
.status-live { color: #d6ead9; background: #29483d; }
.status-prep { color: #e3ddff; background: #343a60; }
.work-card h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; letter-spacing: -.055em; margin-bottom: 11px; }
.work-card p { min-height: 64px; max-width: 440px; color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.card-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; text-decoration: none; font-size: 12px; font-weight: 750; }
.card-link span { font-size: 18px; font-weight: 400; }
.card-link:hover span { transform: translate(3px, -3px); }
.card-link-pending { color: var(--muted); font-weight: 400; }

.about-section { padding: 55px 0 65px; background: var(--surface); border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 34% 1fr; gap: 8%; }
.about-section h2 { font-size: 22px; letter-spacing: -.04em; margin-bottom: 0; }
.about-copy > p { max-width: 600px; color: var(--muted); font-size: 13px; line-height: 2; margin-bottom: 20px; }
.about-signature { display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--line); padding-top: 13px; color: var(--muted); font-size: 11px; }
.signature-glyph { color: var(--accent-ink); font-family: Georgia, serif; font-size: 27px; font-weight: 700; letter-spacing: -.15em; }
.site-footer { background: var(--ink); color: var(--paper); padding: 23px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; margin-left: auto; }
.footer-links a { text-decoration: none; font-size: 12px; }
.footer-links a:hover { text-decoration: underline; }
.footer-inner > span { font-size: 10px; opacity: .65; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  .header-inner { gap: 15px; }
  .site-header nav { margin-left: auto; gap: 12px; }
  .site-header nav a { font-size: 10px; }
  .header-side { display: none; }
  .works-section { padding: 43px 0 58px; }
  .works-intro { margin-bottom: 25px; }
  .works-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-card p { min-height: 0; }
  .about-grid { grid-template-columns: 1fr; gap: 15px; }
  .about-section { padding: 48px 0 55px; }
}
@media (max-width: 410px) {
  .identity { font-size: 11px; }
  .identity-glyph { font-size: 24px; }
  .site-header nav { gap: 9px; }
  .card-content { padding: 19px; }
  .card-meta { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }