@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');

:root { --paper:#f6f4ef; --white:#fdfcf9; --ink:#252625; --muted:#626560; --yellow:#ffe58d; --mint:#c9e7d8; --blue:#c2e3f4; --pink:#f6c6cb; --line:#e4e3dc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans JP',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,summary:focus-visible { outline:3px solid #366f88; outline-offset:6px; }
::selection { background:var(--yellow); color:var(--ink); }
.skip-link { position:fixed; top:12px; left:12px; padding:12px 20px; background:var(--yellow); z-index:10; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.page-shell { width:min(1280px,calc(100% - 64px)); margin:auto; }
.site-header { min-height:126px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-symbol { display:grid; place-items:center; width:54px; height:48px; background:var(--ink); color:var(--white); border-radius:18px; font:900 21px/1 monospace; letter-spacing:-3px; padding-right:3px; transform:rotate(-7deg); }
.brand strong { font-size:19px; letter-spacing:.04em; font-weight:900; }
.brand small { display:block; margin-top:5px; font-size:12px; letter-spacing:.18em; font-weight:700; }
nav { display:flex; gap:42px; margin-left:auto; }
nav a { font-size:12px; font-weight:800; letter-spacing:.08em; padding:12px 0; }
nav a span { display:block; font-size:12px; font-weight:500; letter-spacing:0; margin-top:5px; }
nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.header-note { border-left:1px solid #d2d3cc; padding-left:28px; margin-left:10px; font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.7; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; }
.hero-copy { background:var(--white); border-radius:32px; padding:48px 44px 24px; position:relative; }
.eyebrow { font-size:12px; letter-spacing:.13em; font-weight:800; margin:0 0 22px; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:9px; }
.tiny-star { font-size:23px; line-height:1; }
h1 { margin:24px 0 24px; font-size:clamp(42px,4.4vw,65px); font-weight:900; line-height:1.5; letter-spacing:.01em; }
.headline-mark { position:relative; z-index:0; white-space:nowrap; }
.headline-mark::after { content:''; position:absolute; bottom:8px; height:16px; background:var(--yellow); left:0; right:0; border-radius:10px; z-index:-1; transform:rotate(-2deg); }
.hero-description { font-size:15px; line-height:2; letter-spacing:.05em; margin:0 0 32px; }
.pill-button { min-height:52px; padding:8px 9px 8px 25px; display:inline-flex; align-items:center; gap:35px; color:var(--white); background:var(--ink); border-radius:50px; font-size:13px; font-weight:700; transition:transform .2s; }
.pill-button:hover { transform:translateY(-3px); }
.button-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--yellow); color:var(--ink); font:23px/1 sans-serif; }
.hero-foot { display:flex; justify-content:space-between; gap:14px; margin-top:45px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.05em; }
.hero-visual { position:relative; background:#eeeae1; border-radius:32px; overflow:hidden; min-height:530px; }
.visual-top { position:absolute; z-index:2; inset:27px 28px auto; display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; letter-spacing:.1em; }
.visual-top span:last-child { font-size:24px; font-weight:400; }
.hero-art { position:absolute; inset:0; display:grid; place-items:center; }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.code-art { font:bold 50px/1 monospace; transform:rotate(-10deg); }
.visual-caption { position:absolute; bottom:53px; right:23px; background:var(--white); border-radius:20px 20px 6px 20px; padding:22px 23px; display:flex; align-items:flex-end; gap:22px; transform:rotate(3deg); box-shadow:0 4px 25px #00000003; }
.visual-caption>span:first-child { font-size:23px; line-height:1.65; font-weight:800; letter-spacing:.05em; }
.round-arrow { display:grid; place-items:center; border-radius:50%; background:var(--yellow); width:38px; height:38px; font:22px/1 sans-serif; }
.visual-index { position:absolute; bottom:25px; left:28px; font-size:12px; letter-spacing:.08em; font-weight:600; }
.section-space { margin-top:92px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:0 7px 29px; gap:20px; }
.section-heading .eyebrow { margin-bottom:10px; }
h2 { font-size:34px; font-weight:800; letter-spacing:.025em; line-height:1.65; margin:0; }
.title-dot { color:#878b70; }
.section-aside { font-size:12px; line-height:1.9; margin:0 0 4px; }
.section-aside span { font-size:12px; letter-spacing:.1em; color:var(--muted); }
.project-card { display:grid; grid-template-columns:1.12fr 1fr; background:var(--white); border-radius:28px; overflow:hidden; }
a.project-cover { color:inherit; transition:transform .2s; }
a.project-cover:hover { transform:translateY(-3px); }
.project-copy .pill-button { margin:0 0 22px; }
.project-card + .project-card { margin-top:20px; }
.project-cover.cover-blue { background:var(--blue); }
.cover-blue .outline-chip { border-color:#4f6e7c; }
.cover-blue .game-asterisk { color:#4f6e7c; }
.project-cover { padding:27px 31px 25px; background:var(--mint); display:flex; flex-direction:column; justify-content:space-between; min-height:370px; }
.cover-meta,.cover-bottom { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:12px; letter-spacing:.08em; font-weight:600; }
.outline-chip { border:1px solid #667d70; padding:7px 12px; border-radius:30px; font-size:12px; }
.game-title { font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:-.07em; font-size:88px; line-height:.9; padding:25px 0; }
.game-title>span { display:block; }
.game-title>span:last-child { display:flex; align-items:center; justify-content:space-between; }
.game-asterisk { display:inline-block; font-family:Arial,sans-serif; font-size:100px; line-height:.8; font-weight:400; color:#547362; transform:rotate(12deg); }
.cover-note { font-size:12px; letter-spacing:0; opacity:.8; }
.project-copy { padding:42px 40px 30px; position:relative; }
.project-meta { display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.tag { font-size:12px; font-weight:700; letter-spacing:.09em; }
.status { display:inline-block; padding:5px 12px; border-radius:20px; background:var(--yellow); font-size:12px; font-weight:700; }
h3 { font-size:36px; margin:24px 0 16px; letter-spacing:.03em; }
.project-copy>p { font-size:14px; line-height:2; color:var(--muted); margin:0 0 29px; }
.project-details { position:relative; z-index:1; }
.project-details summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:12px; font-weight:700; list-style:none; padding:14px 0; border-top:1px solid var(--line); }
.project-details summary::-webkit-details-marker { display:none; }
.details-icon { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:var(--paper); font-size:18px; font-weight:400; transition:transform .2s; }
.project-details[open] .details-icon { transform:rotate(45deg); }
.details-content { padding:0 0 15px; }
.details-content p { font-size:14px; line-height:1.9; margin:6px 0; }
.details-content .details-note { font-size:12px; color:var(--muted); }
.project-number { display:block; font-size:12px; color:var(--muted); text-align:right; margin-top:16px; }
.works-foot { display:flex; align-items:center; gap:10px; margin:21px 8px; }
.small-square { width:7px; height:7px; border-radius:2px; background:#636a57; }
.works-foot p { margin:0; font-size:12px; color:var(--muted); }
.works-foot>span:last-child { margin-left:auto; font-size:12px; letter-spacing:.08em; color:var(--muted); }
.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:45px; background:var(--white); border-radius:28px; padding:47px 55px; }
.about-label { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
.about-label .eyebrow { margin-bottom:0; }
.about-graphic { display:block; padding:24px 0; color:#4f6e7c; font:bold 63px/1.2 monospace; letter-spacing:-7px; transform:rotate(-9deg); }
.mini-label { font-size:12px; letter-spacing:.1em; font-weight:600; }
.about-copy h2 { font-size:29px; line-height:1.8; }
.about-copy p { font-size:14px; line-height:2.2; margin:21px 0; }
.interest-tags { display:flex; flex-wrap:wrap; gap:8px; }
.interest-tags span { padding:7px 15px; border-radius:6px; font-size:12px; font-weight:600; }
.interest-tags span:nth-child(1) { background:var(--yellow); }
.interest-tags span:nth-child(2) { background:var(--blue); }
.interest-tags span:nth-child(3) { background:var(--pink); }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:32px; padding:63px 8px 25px; }
.footer-wordmark { font-size:23px; font-weight:900; letter-spacing:.025em; }
.site-footer p { font-size:12px; font-weight:600; letter-spacing:.08em; margin-top:9px; }
.back-top { display:flex; gap:18px; align-items:center; font-size:12px; letter-spacing:.06em; font-weight:700; }
.back-top .round-arrow { width:44px; height:44px; background:var(--white); }
.back-top:hover .round-arrow { background:var(--yellow); }
.footer-bottom { flex-basis:100%; display:flex; justify-content:space-between; border-top:1px solid #dddcd4; padding-top:22px; font-size:12px; letter-spacing:.06em; color:var(--muted); }
@media(min-width:1450px) { .hero-copy { padding-top:58px; }.hero-visual { min-height:580px; } }
@media(max-width:1000px) { .page-shell { width:calc(100% - 40px); }.header-note { display:none; }.hero-copy { padding:32px 27px 22px; }.hero-visual { min-height:480px; }h1 { font-size:44px; }.hero-foot { flex-wrap:wrap; gap:7px; }.project-copy { padding:32px 27px 20px; }.game-title { font-size:74px; }.game-asterisk { font-size:75px; }.about { padding:38px; gap:30px; }.about-copy h2 { font-size:25px; } }
@media(max-width:700px) {
  .page-shell { width:calc(100% - 28px); }.site-header { min-height:95px; gap:14px; padding:0 5px; }.brand { gap:9px; }.brand-symbol { width:38px; height:37px; font-size:16px; border-radius:12px; }.brand strong { font-size:14px; }.brand small { font-size:12px; letter-spacing:.08em; }nav { gap:20px; }nav a { font-size:12px; }nav a span { display:none; }
  .hero { grid-template-columns:1fr; gap:13px; }.hero-copy { padding:34px 28px 22px; border-radius:24px; }.eyebrow { font-size:12px; }h1 { font-size:clamp(40px,9.8vw,60px); margin:20px 0; line-height:1.5; }.hero-description { font-size:14px; margin-bottom:23px; }.pill-button { min-height:51px; font-size:13px; }.hero-foot { margin-top:31px; justify-content:space-between; font-size:12px; }.hero-visual { min-height:360px; border-radius:24px; }.visual-top { inset:22px 24px auto; }.visual-caption { bottom:39px; padding:17px 20px; right:20px; }.visual-caption>span:first-child { font-size:19px; }.visual-index { bottom:20px; font-size:12px; }.hero-art img { object-position:center 46%; }
  .section-space { margin-top:59px; }.section-heading { margin:0 7px 22px; }h2 { font-size:28px; }.section-aside { font-size:12px; max-width:135px; }.section-aside span { display:none; }.section-heading .eyebrow { font-size:12px; }.project-card { grid-template-columns:1fr; border-radius:24px; }.project-cover { min-height:315px; padding:23px 27px; }.game-title { font-size:82px; padding:28px 0; }.game-asterisk { font-size:90px; }.project-copy { padding:29px 27px 20px; }h3 { font-size:31px; margin:20px 0 13px; }.project-copy>p { font-size:14px; margin-bottom:24px; }.project-details summary { font-size:13px; }.project-number { margin-top:10px; }.works-foot { gap:8px; }.works-foot p { font-size:12px; }.works-foot>span:last-child { display:none; }
  .about { grid-template-columns:1fr; gap:30px; padding:31px 28px; border-radius:24px; }.about-label { flex-direction:row; align-items:center; gap:15px; }.about-graphic { font-size:35px; padding:0; letter-spacing:-4px; }.mini-label { display:none; }.about-label .eyebrow { font-size:12px; }.about-copy h2 { font-size:26px; }.about-copy p { font-size:14px; }.site-footer { padding:46px 7px 22px; gap:26px; }.footer-wordmark { font-size:19px; }.site-footer p { font-size:12px; }.back-top { gap:10px; font-size:12px; }.back-top .round-arrow { width:36px; height:36px; }.footer-bottom { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }* { transition:none!important; } }

/* Content remains legible across screen sizes. */
.hero-description,.project-copy>p,.details-content p,.about-copy p { font-size:1rem; }
nav a,.pill-button,.project-details summary,.status,.interest-tags span { font-size:.875rem; }
.hero-foot { flex-wrap:wrap; }
.hero>*,.project-card>*,.about>* { min-width:0; }
@media(max-width:700px) { .game-title { font-size:clamp(48px,17vw,82px); }.game-asterisk { font-size:clamp(55px,17vw,90px); } }
@media(max-width:700px) { .header-note,.brand small,.hero-foot span:last-child,.section-aside,.cover-bottom>span:first-child,.back-top>span:first-child { display:none; } nav { gap:14px; } .brand strong { font-size:14px; } .cover-bottom { justify-content:flex-end; } .about-copy h2 { font-size:clamp(22px,6vw,26px); } }