:root { font-family: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif; color: #17191a; background: #eee9de; }
    * { box-sizing: border-box; }
    body { margin: 0; min-width: 320px; }
    a { color: inherit; }
    .page { min-height: 100svh; background: #eee9de; }
    .top { max-width: 1600px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 25px clamp(20px,6vw,90px); gap: 18px; }
    .back { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; text-decoration: none; }
    .back span { color: #d93832; font-size: 24px; line-height: 1; }
    .back:hover, .back:focus-visible { color: #d93832; }
    .top-meta { color: #77736c; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
    .intro { max-width: 1600px; margin: auto; padding: clamp(45px,7vh,90px) clamp(20px,6vw,90px) 45px; display: grid; grid-template-columns: 1fr minmax(240px,340px); gap: 50px; align-items: end; }
    .eyebrow { color: #d83832; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
    h1 { font-size: clamp(85px,12vw,180px); letter-spacing: -.11em; line-height: .95; margin: 13px 0 0; }
    h1 span { color: #d83832; }
    .intro p { font-size: 15px; line-height: 1.75; margin: 0 0 7px; color: #5e5a53; }
    .catalog { max-width: 1600px; margin: auto; padding: 0 clamp(20px,6vw,90px) 100px; }
    .catalog-line { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; border-top: 2px solid #17191a; padding: 15px 0 25px; font-size: 11px; font-weight: 800; }
    .catalog-line span:last-child { color: #77736c; font-weight: 500; }
    .grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(13px,2vw,28px); }
    .work { min-width: 0; background: #f7f3eb; border: 1px solid #b8b0a4; }
    .work-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
    .work-trigger:focus-visible { outline: 3px solid #e13b34; outline-offset: 3px; }
    .visual { position: relative; height: clamp(285px,26vw,370px); overflow: hidden; }
    .visual::before { content: attr(data-kind); position: absolute; z-index: 3; top: 21px; left: 23px; font-size: clamp(25px,3.1vw,45px); font-weight: 900; letter-spacing: -.06em; }
    .visual::after { content: attr(data-code); position: absolute; z-index: 3; bottom: 20px; right: 24px; font-size: 10px; letter-spacing: .16em; font-weight: 800; }
    .visual-book { background: #0b0d0e; color: #fff; }
    .visual-book .red { position: absolute; border-radius: 50%; background: #e63731; width: 50px; height: 50px; top: 20%; right: 12%; box-shadow: -260px 195px 0 -13px #e63731, 110px 140px 0 -18px #e63731; }
    .visual-book img { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%) rotate(-5deg); width: min(55%,275px); height: auto; filter: drop-shadow(17px 22px 13px #0009); }
    .visual-course { background: #d9e8ed; color: #102536; }
    .visual-course .screen { position: absolute; width: 69%; height: 61%; left: 16%; top: 25%; background: #142638; box-shadow: 14px 20px 0 #8daeba; border: 2px solid #142638; transform: rotate(-4deg); }
    .visual-course .screen::before { content: "●  ●  ●"; position: absolute; top: 0; left: 0; right: 0; height: 24px; padding: 4px 12px; background: #d3e1e6; color: #e53a32; font-size: 9px; letter-spacing: .25em; }
    .visual-course .screen strong { position: absolute; left: 10%; top: 24%; font-size: clamp(50px,8vw,130px); color: #f4f2e9; letter-spacing: -.09em; line-height: 1; }
    .visual-course .screen small { position: absolute; bottom: 11%; right: 9%; color: #80c4db; font-size: 11px; letter-spacing: .1em; }
    .visual-translation { background: #d5c9b6; color: #201f1d; }
    .visual-translation .page-stack { position: absolute; width: 61%; height: 66%; left: 19%; top: 23%; background: #f4f0e5; box-shadow: 12px 11px 0 #c0b29c, 23px 21px 0 #ad9d84; transform: rotate(5deg); padding: 10% 8%; }
    .visual-translation .page-stack::before { content: "译"; position: absolute; right: 8%; top: 7%; color: #d73730; font-size: clamp(48px,7vw,110px); font-weight: 900; line-height: 1; opacity: .28; }
    .visual-translation .page-stack strong { display: block; position: relative; z-index: 2; font-size: clamp(27px,2.6vw,43px); line-height: 1.15; letter-spacing: -.07em; }
    .visual-translation .page-stack small { position: absolute; left: 13%; bottom: 12%; color: #786f60; font-size: 11px; }
    .visual-tool { background: #111c2b; color: #f6f1e4; }
    .visual-tool .app-window { position: absolute; width: 64%; height: 67%; left: 18%; top: 22%; border: 7px solid #65707c; border-radius: 16px; background: #0f1724; box-shadow: 14px 17px 0 #0a101a; transform: rotate(-5deg); overflow: hidden; }
    .visual-tool .app-window::before { content: ""; position: absolute; left: 10%; top: 10%; right: 10%; bottom: 10%; border: 1px solid #f0e2bc33; border-radius: 8px; }
    .visual-tool img { position: absolute; width: 40%; height: auto; left: 30%; top: 28%; border-radius: 50%; }
    .visual-tool .state { position: absolute; z-index: 3; left: 23px; bottom: 20px; color: #77c8e2; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
    .fictional-tag { position: absolute; z-index: 4; top: 24px; right: 21px; border: 1px solid currentColor; padding: 5px 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; background: #ffffffd8; color: #202327; }
    .visual-github { background: var(--art-bg,#14222a); color: #edf3ef; }
    .visual-github .code { position: absolute; left: 11%; right: 11%; top: 29%; bottom: 13%; background: #081116; border: 1px solid #789598; box-shadow: 11px 12px 0 #29383b; padding: 12% 7% 0; transform: rotate(-3deg); }
    .visual-github .code::before { content: "●  ●  ●"; position: absolute; top: 9px; left: 15px; color: #de453d; font-size: 9px; letter-spacing: .22em; }
    .visual-github .code strong { display: block; overflow-wrap: anywhere; color: #8ed4cf; font-size: clamp(21px,2.2vw,34px); letter-spacing: -.05em; line-height: 1.2; }
    .visual-github .code small { display: block; color: #79958e; font-size: 11px; margin-top: 13px; }
    .visual-site { background: var(--art-bg,#d9d4c9); color: #16202a; }
    .visual-site .browser { position: absolute; left: 11%; right: 11%; top: 30%; bottom: 14%; background: #f9f7ef; border: 2px solid #18242a; box-shadow: 13px 13px 0 #172a35; transform: rotate(3deg); }
    .visual-site .browser::before { content: "◀   ▶     xquant.shop"; display: block; height: 25px; border-bottom: 1px solid #18242a; padding: 5px 10px; color: #6e7778; font-size: 9px; white-space: nowrap; overflow: hidden; }
    .visual-site .browser strong { display: block; padding: 11% 9%; color: #d53c34; font-size: clamp(28px,3.2vw,49px); letter-spacing: -.08em; line-height: 1.1; }
    .visual-app { background: var(--art-bg,#d9aa8a); color: #121a24; }
    .visual-app .phone { position: absolute; width: 41%; height: 70%; left: 29%; top: 22%; border: 7px solid #15212b; border-radius: 27px; background: #f7f2e9; box-shadow: 15px 16px 0 #16232a66; transform: rotate(-7deg); padding: 22% 8% 0; }
    .visual-app .phone::before { content: ""; position: absolute; width: 30%; height: 10px; top: 7px; left: 35%; border-radius: 0 0 8px 8px; background: #15212b; }
    .visual-app .phone strong { display: block; font-size: clamp(23px,2.7vw,43px); letter-spacing: -.07em; line-height: 1.15; }
    .visual-app .phone i { display: block; width: 85%; height: 5px; margin-top: 18px; background: #e9473e; box-shadow: 0 17px 0 #c2bcb2,0 34px 0 #c2bcb2; }
    .visual-mini { background: var(--art-bg,#c8dde3); color: #122638; }
    .visual-mini .mini-frame { position: absolute; width: 49%; height: 70%; left: 26%; top: 22%; border: 7px solid #182a36; border-radius: 22px; background: #f9f6ed; box-shadow: 14px 16px 0 #14253066; transform: rotate(6deg); padding: 19% 9% 0; }
    .visual-mini .mini-frame::before { content: "● ● ●"; position: absolute; top: 6px; left: 15px; font-size: 8px; letter-spacing: .2em; color: #df4038; }
    .visual-mini .mini-frame strong { display: block; font-size: clamp(22px,2.6vw,39px); letter-spacing: -.07em; line-height: 1.15; }
    .visual-mini .mini-frame i { display: block; margin-top: 18px; width: 38px; height: 38px; border-radius: 50%; background: #df4038; }
    .stress-note { display: flex; align-items: center; gap: 12px; color: #68544d; background: #f8dfd5; padding: 13px 17px; margin-bottom: 25px; font-size: 12px; line-height: 1.5; }
    .stress-note strong { color: #b12f28; white-space: nowrap; }
    .work-info { min-height: 125px; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 23px 26px 22px; border-top: 1px solid #b8b0a4; }
    .work-info h2 { font-size: clamp(22px,2.3vw,35px); letter-spacing: -.055em; line-height: 1.2; margin: 0 0 8px; }
    .work-info p { font-size: 11px; margin: 0; color: #716d66; }
    .work-info .arrow { color: #d93630; font-size: 29px; font-weight: 300; line-height: 1; transition: transform .2s; }
    .work-trigger:hover .arrow { transform: translate(4px,-4px); }
    .work-detail[hidden] { display: none; }
    .work-dialog { position: relative; width: min(1060px,calc(100vw - 40px)); max-width: none; max-height: min(850px,calc(100dvh - 40px)); padding: 0; border: 0; overflow: auto; background: #f4efe6; color: #17191a; box-shadow: 0 28px 100px #0008; }
    .work-dialog::backdrop { background: #020407ce; backdrop-filter: blur(7px); }
    .dialog-frame { display: grid; grid-template-columns: 45% 55%; min-height: 590px; }
    .dialog-art { min-width: 0; overflow: hidden; background: #0a0c0e; }
    .dialog-art .visual { height: 100%; min-height: 590px; }
    .dialog-art .visual::before { top: 28px; left: 31px; font-size: 37px; }
    .dialog-art .visual::after { right: 30px; bottom: 28px; }
    .dialog-art .fictional-tag { display: none; }
    .dialog-copy { padding: 70px clamp(30px,5vw,65px) 45px; display: flex; flex-direction: column; }
    .dialog-close { position: absolute; z-index: 9; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid #928d82; border-radius: 50%; color: #1a1c1c; background: #f8f5ee; font-size: 25px; line-height: 1; cursor: pointer; }
    .dialog-close:hover, .dialog-close:focus-visible { color: #fff; background: #d63831; border-color: #d63831; }
    .dialog-kicker { color: #d63831; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
    .dialog-title { margin: 18px 0 20px; font-size: clamp(39px,4.4vw,70px); line-height: 1.12; letter-spacing: -.075em; }
    .dialog-description { color: #55514b; font-size: 16px; line-height: 1.8; max-width: 500px; margin: 0 0 28px; }
    .dialog-facts { margin-top: auto; border-top: 2px solid currentColor; }
    .dialog-fact { display: grid; grid-template-columns: 95px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #a9a39a; font-size: 12px; line-height: 1.5; }
    .dialog-fact span { color: #777168; }
    .dialog-fact strong { font-weight: 700; }
    .dialog-fake { margin: 21px 0 0; padding: 11px 13px; color: #ad302a; background: #f9dfd7; font-size: 11px; line-height: 1.6; }
    .dialog-fake[hidden] { display: none; }
    .dialog-link { align-self: flex-start; margin-top: 25px; padding: 13px 18px; color: #fff; background: #d63831; font-size: 13px; font-weight: 800; text-decoration: none; }
    .dialog-link:hover, .dialog-link:focus-visible { background: #a92520; outline-offset: 3px; }
    .dialog-link[hidden] { display: none; }
    .dialog-footer { color: #777168; font-size: 10px; letter-spacing: .14em; margin-top: 26px; }
    .dialog-book { background: #f3eee4; }
    .dialog-book .dialog-art { border-left: 18px solid #d9342e; }
    .dialog-book .dialog-art .visual-book img { width: min(62%,320px); }
    .dialog-course { background: #e7eff0; }
    .dialog-course .dialog-frame, .dialog-site .dialog-frame { display: flex; flex-direction: column; }
    .dialog-course .dialog-art .visual, .dialog-site .dialog-art .visual { height: 355px; min-height: 355px; }
    .dialog-course .dialog-copy, .dialog-site .dialog-copy { padding: 35px 55px 43px; }
    .dialog-course .dialog-title, .dialog-site .dialog-title { margin: 10px 0 12px; }
    .dialog-course .dialog-facts, .dialog-site .dialog-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
    .dialog-course .dialog-close, .dialog-site .dialog-close { background: #fff; }
    .dialog-translation { background: #f5efe4; }
    .dialog-translation .dialog-art { background: #d5c9b6; }
    .dialog-translation .dialog-title { font-family: "Songti SC", "Noto Serif SC", serif; letter-spacing: -.04em; }
    .dialog-github { background: #101c23; color: #eff4ef; }
    .dialog-github .dialog-art { background: #0b141a; }
    .dialog-github .dialog-kicker, .dialog-github .dialog-footer { color: #7bd0cb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .dialog-github .dialog-description, .dialog-github .dialog-fact span { color: #b8c8c6; }
    .dialog-github .dialog-fact { border-color: #64747b; }
    .dialog-site { background: #f4efe3; }
    .dialog-site .dialog-kicker { color: #24556b; }
    .dialog-app { background: #f0ded1; }
    .dialog-app .dialog-frame, .dialog-mini .dialog-frame { grid-template-columns: 40% 60%; }
    .dialog-app .dialog-kicker { color: #a83d33; }
    .dialog-mini { background: #e1edf0; }
    .dialog-mini .dialog-kicker { color: #1d6880; }
    .dialog-tool { background: #132032; color: #f3f1e9; }
    .dialog-tool .dialog-description, .dialog-tool .dialog-fact span { color: #bcc7cf; }
    .dialog-tool .dialog-fact { border-color: #596674; }
    .dialog-tool .dialog-kicker { color: #72c5df; }
    .endnote { margin: 34px 0 0; display: flex; justify-content: space-between; gap: 22px; align-items: start; color: #77726a; font-size: 11px; line-height: 1.7; }
    .endnote p { margin: 0; max-width: 600px; }
    .endnote .mark { color: #d93630; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
    .exit { height: 120px; background: #090c10; position: relative; overflow: hidden; }
    .exit::before { content: ""; position: absolute; inset: 0 48% 0 0; background: #eee9de; clip-path: polygon(0 0,100% 0,93% 100%,0 100%); }
    .exit::after { content: ""; position: absolute; right: 14%; top: 30%; width: 38px; height: 38px; border-radius: 50%; background: #e63832; box-shadow: -100px 55px 0 -15px #e63832; }
    @media (max-width: 1100px) { .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
    @media (max-width: 900px) { .intro { grid-template-columns: 1fr; gap: 20px; }.intro p { max-width: 650px; }.visual { height: 330px; }.visual-course .screen strong { font-size: 80px; }.visual-translation .page-stack strong { font-size: 40px; } }
    @media (max-width: 650px) { .top { padding: 20px; }.intro { padding: 55px 20px 35px; }.intro h1 { font-size: 94px; }.catalog { padding: 0 20px 75px; }.catalog-line { padding-bottom: 16px; }.grid { grid-template-columns: 1fr; gap: 20px; }.visual { height: 335px; }.visual::before { font-size: 34px; }.visual-book img { width: 210px; }.visual-course .screen strong { font-size: 90px; }.visual-translation .page-stack strong { font-size: 35px; }.work-info { min-height: 112px; }.endnote { display: block; }.endnote .mark { display: block; margin-top: 15px; }.work-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }.dialog-frame,.dialog-course .dialog-frame,.dialog-site .dialog-frame,.dialog-app .dialog-frame,.dialog-mini .dialog-frame { display: block; min-height: 0; }.dialog-art .visual,.dialog-course .dialog-art .visual,.dialog-site .dialog-art .visual { height: 275px; min-height: 275px; }.dialog-copy,.dialog-course .dialog-copy,.dialog-site .dialog-copy { padding: 28px 24px 35px; }.dialog-title { font-size: 38px; }.dialog-description { font-size: 14px; }.dialog-course .dialog-facts,.dialog-site .dialog-facts { display: block; }.dialog-close { top: 11px; right: 11px; } }
    @media (prefers-reduced-motion: reduce) { .work-info .arrow { transition: none; } }