/* Xiaoyu homepage composition; shared palette comes from design-tokens.css. */
body.xiaoyu-home::before, body.xiaoyu-home #bg { display:none; }
.xiaoyu-home .site-header { background:rgba(251,250,247,.96); border-bottom:1px solid #e5ebeb; backdrop-filter:none; }
.xiaoyu-home .logo { font-family:var(--font-sans); letter-spacing:-.04em; color:var(--text-primary); }
.xiaoyu-home .logo .accent { color:var(--brand-primary); }
.xiaoyu-home .nav-link { color:#566c78; font-size:.85rem; }
.xiaoyu-home .main-nav { gap:20px; }
.xiaoyu-home .nav-link:hover,.xiaoyu-home .nav-link.active { color:#1d708c; }
.xiaoyu-home .app { max-width:1280px; padding:0 5vw 64px; }
.xiaoyu-home .site-footer { color:#617783; border-color:#e3e8e8; }
.xy-home { font-family:var(--font-sans); }
.xy-home button,.xy-home a { -webkit-tap-highlight-color:transparent; }
.xy-home button { font:inherit; cursor:pointer; }
.xy-home :is(a,button,input,textarea):focus-visible { outline:3px solid var(--brand-primary); outline-offset:5px; }
.xy-home h2 { font-size:clamp(1.6rem,3vw,2.25rem); letter-spacing:-.04em; font-weight:650; line-height:1.4; }
.xy-hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; min-height:700px; gap:20px; padding:40px 0 38px; }
.xy-eyebrow { color:#547e90; font-size:.7rem; letter-spacing:.13em; font-weight:650; }
.xy-feather { color:#368eac; font-size:1.4rem; vertical-align:middle; margin-right:8px; }
.xy-intro h1 { font-size:clamp(3rem,5.2vw,4.8rem); line-height:1.2; font-weight:650; letter-spacing:-.055em; margin:24px 0; color:var(--text-primary); }
.xy-intro h1 em { color:var(--brand-primary); font-family:Georgia,serif; font-weight:400; }
.xy-dot { color:#65b4bc; }
.xy-lead { font-size:1rem; line-height:1.9; color:#63747e; }
.xy-directions { margin-top:24px; color:#466675; font-size:.88rem; }
.xy-directions span { margin:0 7px; color:#9db7bc; }
.xy-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:30px; }
.xy-button { display:inline-flex; justify-content:center; align-items:center; gap:16px; padding:14px 22px; min-height:48px; border-radius:12px; text-decoration:none; border:1px solid transparent; transition:transform .2s,box-shadow .2s,background .2s; font-size:.9rem; }
.xy-button:active { transform:translateY(1px); }
.xy-button:hover { box-shadow:0 6px 20px #3d84951c; }
.xy-primary { background:var(--brand-primary); color:var(--bg-card); box-shadow:0 4px 14px #3c8e9b20; }
.xy-primary span { font-size:.76rem; color:#d6edf2; }
.xy-primary:hover { background:#216d88; }
.xy-secondary { background:var(--bg-card); color:#275a70; border-color:#cfdee4; }
.xy-text-link { color:#35768e; font-size:.85rem; text-underline-offset:5px; background:transparent; border:0; text-decoration:none; padding:6px 0; }
.xy-text-link:hover { text-decoration:underline; }
.xy-note,.xy-small { font-size:.74rem; color:var(--text-muted); line-height:1.7; }
.xy-note { margin-top:14px; }
.xy-character { position:relative; height:610px; display:flex; align-items:center; justify-content:center; min-width:0; }
.xy-orbit { position:absolute; width:94%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#d7edf0 0%,#eaf2ee 48%,var(--bg-main) 72%); }
.xy-portrait { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; animation:xy-breathe 6s ease-in-out infinite; filter:drop-shadow(0 12px 12px #43899b12); }
.xy-float { position:absolute; z-index:2; color:#82bbc6; font-size:2rem; animation:xy-feather 5s ease-in-out infinite; pointer-events:none; }
.xy-float-one { top:18%; left:4%; }.xy-float-two { right:3%; bottom:30%; animation-delay:-2s; }
.xy-speech { position:absolute; z-index:3; left:-12px; bottom:75px; max-width:235px; padding:14px 18px; background:#fffffff5; border:1px solid #dde9ed; border-radius:16px 16px 16px 4px; box-shadow:0 10px 25px #385f7610; }
.xy-speech strong { color:#397992; font-size:.78rem; font-weight:550; }.xy-speech p { margin-top:3px; font-size:.8rem; color:var(--text-secondary); }
.xy-status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#62aba5; margin-right:7px; }
.xy-character-name { position:absolute; right:0; bottom:5px; z-index:2; font:italic 1.7rem Georgia,serif; color:#347d98; }.xy-character-name span { display:block; font:normal .65rem var(--font-sans); letter-spacing:.08em; color:#778e97; }
[data-state="receiving"] .xy-speech { border-color:#7cbac9; }[data-state="thinking"] .xy-status-dot { animation:xy-pulse 1.3s infinite; }[data-state="explaining"] .xy-speech::before { content:'↗'; color:var(--brand-primary); float:right; margin-left:8px; }[data-state="complete"] .xy-status-dot { width:auto; height:auto; background:none; }[data-state="complete"] .xy-status-dot::before { content:'✓'; color:#32877b; }
.xy-section { padding:55px 0; border-top:1px solid #e0e8e8; }
.xy-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }.xy-section-heading h2 { margin-top:8px; }
.xy-task-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.xy-task { text-align:left; display:flex; flex-direction:column; padding:24px 20px 18px; border:1px solid #dfE8e9; border-radius:17px; background:var(--bg-card); color:#263f50; transition:transform .25s,border-color .25s,box-shadow .25s; }
.xy-task:hover { transform:translateY(-4px); border-color:#96bfc9; box-shadow:0 12px 24px #3b697210; }
.xy-task-icon { width:38px; height:38px; display:grid; place-items:center; background:#eef6f7; color:#3c849e; border-radius:10px; font-size:1.4rem; margin-bottom:18px; }
.xy-task-name { display:flex; justify-content:space-between; width:100%; font-size:1.05rem; font-weight:600; }.xy-task-name span { color:#739daa; font-size:.9rem; }
.xy-task-hint { font-size:.8rem; color:#74838b; margin:9px 0 18px; }.xy-task-status { margin-top:auto; color:#517d89; font-size:.65rem; padding-top:12px; border-top:1px solid #edf2f3; width:100%; }
.xy-workflow { display:grid; grid-template-columns:1fr 1.15fr; gap:70px; }.xy-workflow h2 { margin:12px 0 20px; }.xy-workflow ol { list-style:none; display:grid; gap:22px; }.xy-workflow li { display:flex; gap:18px; }.xy-workflow li>span { color:#79a7b4; border:1px solid #dce8eb; background:#f5f9f9; border-radius:50%; width:37px; height:37px; flex-shrink:0; display:grid; place-items:center; font-size:.8rem; }.xy-workflow h3 { font-size:.95rem; font-weight:550; }.xy-workflow li p { font-size:.8rem; color:#71828a; }
.xy-code-section { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:center; }.xy-code-section h2 { margin:12px 0; }.xy-code-section>div>p:not(.xy-eyebrow) { font-size:.85rem; color:#70818c; margin:12px 0; }.xy-code-section .xy-button { margin-top:10px; }
.xy-code-card { min-width:0; padding:22px; border:1px solid var(--border-soft); border-radius:20px; background:var(--bg-card); box-shadow:0 12px 35px #3d667007; }.xy-code-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:.72rem; color:#70909c; padding-bottom:18px; border-bottom:1px solid #edf1f2; }.xy-code-card pre { color:#245e76; padding:20px 0; font: .85rem/1.95 var(--font-mono); overflow:auto; white-space:pre; }.xy-modes { display:flex; gap:7px; flex-wrap:wrap; }.xy-modes button { font-size:.7rem; padding:7px 10px; border:1px solid #dbe7ea; background:#f4f8f9; color:#416e80; border-radius:7px; }.xy-modes button:hover { border-color:#71a6b9; }.xy-code-card>.xy-small { margin-top:12px; }
.xy-project-section { display:flex; align-items:center; justify-content:space-between; gap:24px; }.xy-project-section h2 { margin:8px 0; }.xy-project-section p:not(.xy-eyebrow) { font-size:.82rem; color:#70828c; }
.xiaoyu-home .card { background:var(--bg-card); border:1px solid #dfe8e9; box-shadow:none; }.xiaoyu-home .card:hover { border-color:#97bbc8; box-shadow:0 8px 20px #50758212; }.xiaoyu-home .card-title { color:#2a4658; }.xiaoyu-home .card::before { display:none; }.xiaoyu-home .tag,.xiaoyu-home .category-chip,.xiaoyu-home .chip { color:#34788d; border-color:#d9e7e9; background:#f3f8f9; }.xiaoyu-home .skeleton { background:#eaf0f1; }.xy-categories { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:.8rem; color:#758b94; }.xy-categories .chip-grid { display:flex; flex-wrap:wrap; gap:8px; }
.xy-dialog { position:fixed; margin:auto; width:min(620px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:28px; border:1px solid var(--border-soft); border-radius:22px; color:#263f50; background:#fbfcfb; box-shadow:0 24px 100px #153c4933; overflow:auto; overscroll-behavior:contain; }.xy-dialog::backdrop { background:#193a4b66; }.xy-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }.xy-close { border:0; background:#edf3f4; color:#557582; width:38px; height:38px; border-radius:50%; font-size:1.4rem!important; }.xy-dialog h2 { font-size:1.5rem; }.xy-dialog-description { font-size:.86rem; color:#6e818d; margin:12px 0 18px; }.xy-task-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }.xy-task-tabs button { border:1px solid #d9e6ea; border-radius:8px; padding:7px 10px; font-size:.78rem; background:white; color:#4d7686; }.xy-task-tabs [aria-pressed="true"] { background:#267f9b; color:white; border-color:#267f9b; }.xy-dialog label { display:block; font-size:.87rem; margin-bottom:10px; }.xy-dialog textarea { width:100%; resize:vertical; padding:13px; border:1px solid #cfdee4; border-radius:10px; background:white; color:#274758; font:inherit; font-size:.86rem; min-height:110px; }.xy-dialog .xy-small { margin:10px 0; }.xy-dialog form .xy-button { width:100%; margin-top:10px; }.xy-info-box { background:#edf5f7; border:1px solid #dce9ed; border-radius:10px; padding:14px; font-size:.84rem; margin-bottom:18px; }#xy-form-feedback { font-size:.8rem; color:#975a36; }.xy-dialog-wide { width:min(1180px,calc(100% - 24px)); }#xy-preview-host iframe { display:block; width:100%; height:min(680px,65dvh); border:1px solid #c8dce3; border-radius:10px; margin-top:18px; background:#101722; }
.xy-observed { opacity:0; transform:translateY(16px); transition:opacity .55s,transform .55s; }.xy-visible { opacity:1; transform:none; }
@keyframes xy-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }@keyframes xy-feather { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-9px) rotate(5deg); } }@keyframes xy-pulse { 50% { opacity:.35; } }
@media(min-width:1600px) { .xy-hero { min-height:760px; } }
@media(max-width:1000px) { .xy-hero { min-height:620px; }.xy-character { height:530px; }.xy-intro h1 { font-size:3.4rem; }.xy-workflow,.xy-code-section { gap:32px; }.xy-task { padding:20px 15px; }.xiaoyu-home .main-nav { gap:13px; } }
@media(max-width:760px) { .xy-hero { grid-template-columns:1fr; padding-top:32px; gap:0; }.xy-intro { text-align:center; }.xy-intro h1 { margin:15px 0; font-size:clamp(2.6rem,9vw,3.7rem); }.xy-intro h1 br { display:none; }.xy-actions { justify-content:center; gap:18px; margin-top:22px; }.xy-lead { font-size:.9rem; }.xy-directions { font-size:.78rem; margin-top:18px; }.xy-directions span { margin:0 4px; }.xy-character { height:350px; max-width:380px; width:100%; margin:12px auto 0; }.xy-speech { left:0; bottom:52px; max-width:165px; padding:10px 12px; }.xy-speech p { font-size:.72rem; }.xy-character-name { font-size:1.25rem; right:12px; bottom:0; }.xy-character-name span { font-size:.6rem; }.xy-portrait { width:100%; }.xy-section { padding:34px 0; }.xy-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.xy-task { padding:18px 14px; }.xy-task-hint { font-size:.74rem; }.xy-task-status { font-size:.61rem; }.xy-task-name { font-size:.95rem; }.xy-workflow,.xy-code-section { grid-template-columns:1fr; gap:24px; }.xy-project-section { align-items:start; flex-direction:column; }.xy-section-heading { align-items:start; }.xy-section-heading>.xy-small { display:none; }.xy-section-heading .xy-text-link { white-space:nowrap; font-size:.75rem; }.xy-eyebrow { font-size:.6rem; letter-spacing:.08em; }.xy-dialog { padding:20px; }.xy-dialog .xy-button { padding:12px 10px; font-size:.8rem; }.xy-code-card { padding:16px; }.xy-code-card pre { font-size:.75rem; }.xiaoyu-home .main-nav.open { background:var(--bg-main); border-bottom-color:#dbe7ea; }.xy-home .post-grid { grid-template-columns:1fr; } }
@media(max-width:360px) { .xy-character { height:310px; }.xy-actions { gap:10px; }.xy-button { padding:12px 15px; gap:9px; }.xy-task { padding:14px 12px; }.xy-dialog { padding:16px; }.xy-speech { max-width:145px; }.xy-intro h1 { font-size:2.55rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.xy-home *, .xy-home *::before, .xy-home *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.xy-observed { opacity:1; transform:none; } }

.xy-directions button { background:none; border:0; color:inherit; font:inherit; padding:7px 2px; min-height:40px; border-radius:4px; }
.xy-directions button:hover { color:#1b6f8d; text-decoration:underline; text-underline-offset:5px; }
/* Shared navigation alone needs an earlier breakpoint after adding entry links. */
@media(max-width:900px) {
 .site-header { flex-wrap:wrap; }
 .site-header .logo { order:1; }
 .site-header .nav-toggle { display:block; order:2; }
 .site-header .main-nav { display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:3px; padding:10px 0; border-top:1px solid var(--border-soft); max-height:65dvh; overflow:auto; }
 .site-header .main-nav.open { display:flex; }
 .site-header .main-nav .nav-link { padding:9px 6px; }
}

/* Phase A-3: task cards and home shortcuts are real route links, not modal triggers. */
.xy-directions a { display:inline-block; min-height:40px; padding:7px 2px; border-radius:4px; color:inherit; text-decoration:none; }
.xy-directions a:hover { color:#1b6f8d; text-decoration:underline; text-underline-offset:5px; }
.xy-task { text-decoration:none; }
.xy-modes a { display:inline-flex; align-items:center; min-height:34px; padding:7px 10px; border:1px solid #dbe7ea; background:#f4f8f9; color:#416e80; border-radius:7px; font-size:.7rem; text-decoration:none; }
.xy-modes a:hover { border-color:#71a6b9; }