/* SaoSystem V2 · Aincrad glass UI. Assets are self hosted. MIT source code. */
:root{
 --ink:#182d40;--muted:#61798b;--paper:#e9f3f9;--panel:rgba(255,255,255,.92);--panel-solid:#fff;
 --line:#cbdfe9;--accent:#00aee8;--accent2:#3672ef;--deep:#091d34;
 --shadow:0 18px 44px rgba(27,69,112,.12);--radius:15px;--glass:rgba(244,251,255,.90);
 color-scheme:light
}
html[data-theme=dark]{--ink:#e3f4ff;--muted:#a1bbcd;--paper:#081828;--panel:rgba(14,34,55,.94);--panel-solid:#0e243a;--line:#244a67;--deep:#e8f7ff;--shadow:0 18px 50px rgba(0,0,0,.28);--glass:rgba(11,30,49,.93);color-scheme:dark}
html[data-accent=violet]{--accent:#9e74ff;--accent2:#6680ff}html[data-accent=gold]{--accent:#e6ae41;--accent2:#d97943}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{min-width:320px;margin:0;background:radial-gradient(circle at 80% 15%,rgba(67,173,220,.11),transparent 60rem),var(--paper);color:var(--ink);font:15px/1.75 ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}body::selection{background:#8ddfff;color:#08233c}
button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:hover{color:var(--accent2)}img{max-width:100%}.shell{width:min(1180px,calc(100% - 44px));margin-inline:auto} :focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}.skip-link{position:fixed;z-index:100;top:-100px;left:12px;padding:.6rem 1.3rem;background:var(--deep);color:var(--paper)}.skip-link:focus{top:12px}.reading-progress{height:3px;position:fixed;inset:0 0 auto;z-index:120}.reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .08s linear}
/* Navigation */
.site-header{position:sticky;top:0;z-index:50;color:#e5f7ff;background:linear-gradient(90deg,rgba(5,23,48,.96),rgba(9,41,74,.95));border-bottom:1px solid rgba(84,196,249,.31);box-shadow:0 4px 20px rgba(5,25,48,.12);backdrop-filter:blur(18px)}.header-inner{display:flex;height:67px;align-items:center;justify-content:space-between;gap:1.4rem}.brand{display:inline-flex;align-items:center;gap:.8rem;min-width:0;color:#fff;font-weight:800;letter-spacing:.01em;line-height:1.15}.brand:hover{color:white}.brand-mark{display:grid;place-items:center;height:39px;width:39px;border:1px solid rgba(114,224,255,.7);background:rgba(21,167,238,.11);transform:rotate(45deg);border-radius:8px;color:#a9edff;font-size:25px;text-shadow:0 0 10px #5acfff}.brand-title{display:flex;flex-direction:column;gap:5px;font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-title small{font-size:.54rem;font-weight:600;letter-spacing:.18em;color:#94c5dd}.primary-nav{display:flex;align-items:center;height:100%;gap:.25rem}.primary-nav a{display:grid;place-items:center;height:100%;min-width:63px;padding:.25rem .9rem;color:#c0dbed;font-weight:650;font-size:.88rem;transition:background .2s,color .2s}.primary-nav a:hover{color:#fff;background:rgba(53,151,215,.16);box-shadow:inset 0 -2px #5bdcff}.header-actions{display:flex;align-items:center;gap:.6rem}.icon-button{border:1px solid rgba(132,218,255,.37);color:#e4f7ff;background:rgba(157,225,255,.09);border-radius:24px;padding:.35rem .8rem;white-space:nowrap}.icon-button:hover{background:rgba(70,181,233,.35)}.icon-button span{font-size:.7rem;opacity:.75}.appearance-toggle{width:37px;height:37px;padding:0}.mobile-nav-toggle{display:none;color:#fff;border:1px solid rgba(132,218,255,.3);background:transparent;border-radius:7px;padding:.2rem .65rem;font-size:1.4rem}
/* Search is a real modal, no large inline form. [hidden] is never overridden. */
.search-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:start center;padding:17vh 18px 20px}.search-backdrop{position:absolute;inset:0;border:0;background:rgba(3,15,32,.76);backdrop-filter:blur(8px)}.search-dialog{position:relative;width:min(620px,100%);border:1px solid rgba(122,211,251,.55);border-radius:16px;padding:1.4rem;box-shadow:0 30px 85px rgba(0,0,0,.38);background:var(--panel-solid);color:var(--ink)}.search-topline{display:flex;justify-content:space-between;margin-bottom:.9rem;color:var(--accent2);font-size:.76rem;font-weight:800;letter-spacing:.15em}.search-topline button{border:0;background:transparent;color:var(--muted)}.search-dialog form{display:flex;gap:.55rem}.search-dialog input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:.75rem;background:var(--paper);color:var(--ink);font-size:1rem}.search-dialog>p{font-size:.77rem;color:var(--muted);margin:.8rem 0 0}
/* Scene and landing */
.hero{position:relative;min-height:370px;overflow:hidden;display:flex;align-items:center;background:#11619e;color:#fff;isolation:isolate;border-bottom:1px solid #5ab2e4}.hero-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 47%;z-index:-3;filter:saturate(1.07) contrast(1.04)}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,29,62,.89) 0%,rgba(4,32,71,.69) 32%,rgba(5,52,100,.20) 76%,rgba(8,63,115,.25) 100%),linear-gradient(0deg,rgba(8,38,65,.40),transparent 45%)}.hero-lines{position:absolute;inset:0;z-index:-1;opacity:.36;background:linear-gradient(90deg,rgba(74,221,255,.18) 1px,transparent 1px),linear-gradient(0deg,rgba(74,221,255,.15) 1px,transparent 1px);background-size:110px 110px;mask-image:linear-gradient(90deg,#000,transparent 70%)}.hero-inner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:370px;gap:2rem;padding:2.5rem 0}.hero-copy{max-width:650px;padding-left:20px;border-left:2px solid rgba(99,218,255,.9);text-shadow:0 2px 14px rgba(0,20,40,.18)}.hero .eyebrow{color:#80e8ff;font-size:.72rem}.hero h1{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.2;letter-spacing:-.045em;margin:.6rem 0 1rem;text-shadow:0 3px 24px rgba(0,24,50,.3)}.hero-copy>p:not(.eyebrow){max-width:34rem;color:#e3f3ff;font-size:1.04rem;margin:.5rem 0 1.3rem}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;border-radius:9px;border:1px solid transparent;padding:.64rem 1.3rem;font-weight:750;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-2px)}.button.primary{background:linear-gradient(115deg,#14b0ed,#387bfe);color:#fff;border-color:#8bdeff;box-shadow:0 8px 20px rgba(0,135,222,.28)}.button.ghost{border:1px solid rgba(167,230,255,.7);color:#f2fdff;background:rgba(2,34,77,.3);backdrop-filter:blur(8px)}.hero-hud{align-self:end;margin-bottom:2rem;min-width:185px;padding:.8rem 1rem;border:1px solid rgba(154,224,255,.58);border-radius:10px;background:rgba(8,47,85,.38);backdrop-filter:blur(10px);display:grid;gap:.2rem}.hero-hud b{font-size:1rem;letter-spacing:.12em}.hero-hud span{font-size:.57rem;color:#b1e7ff;letter-spacing:.16em}.hero-hud div{display:flex;align-items:flex-end;gap:7px;height:19px}.hero-hud i{display:block;width:9px;height:8px;background:#4ce3ff;opacity:.8;box-shadow:0 0 9px #28c6ff}.hero-hud i:nth-child(2){height:12px}.hero-hud i:nth-child(3){height:18px}.hero-hud i:nth-child(4){height:10px}.hero-hud i:nth-child(5){height:15px}.hero-hud i:nth-child(6){height:7px}
.questbar{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-20px;margin-bottom:2.3rem;padding:0 1.1rem;border:1px solid rgba(87,185,228,.25);border-radius:12px;background:var(--panel-solid);box-shadow:var(--shadow);overflow:hidden}.questbar span{display:flex;justify-content:center;align-items:center;min-height:49px;padding:.3rem;color:var(--muted);font-size:.7rem;letter-spacing:.09em;font-weight:800}.questbar span+span{border-left:1px solid var(--line)}.questbar span:first-child{color:var(--accent2)}
/* Feed & side panels */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:1.5rem;align-items:start;padding-bottom:4rem}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 .3rem;color:var(--accent2);font-size:.67rem;font-weight:850;letter-spacing:.18em}.section-heading h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}.heading-side{color:var(--muted);font-size:.68rem;font-weight:750;letter-spacing:.1em}.post-card{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:1rem;margin-bottom:.8rem;padding:1.22rem 1.35rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(17,66,106,.065);transition:transform .2s,border-color .2s,box-shadow .2s}.post-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:var(--shadow)}.post-card::before{content:"";position:absolute;inset:9px auto 9px 0;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(var(--accent),var(--accent2));opacity:.65}.card-index{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding-top:.35rem}.card-seq{color:var(--accent2);font-size:.88rem;font-weight:850;letter-spacing:.06em}.card-symbol{font-size:1.8rem;line-height:1;color:color-mix(in srgb,var(--accent) 36%,transparent)}.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted)}.post-meta a{color:var(--accent2)}.post-card h3{margin:.33rem 0 .42rem;font-size:1.19rem;line-height:1.45;letter-spacing:-.02em}.post-card h3 a:hover{color:var(--accent2)}.post-card p{margin:.3rem 0 .65rem;font-size:.85rem;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.text-link{color:var(--accent2);font-size:.74rem;font-weight:800}.text-link span{margin-left:.25rem}.sidebar{display:grid;gap:.9rem}.system-panel,.side-section{border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;background:var(--panel);box-shadow:0 7px 20px rgba(21,70,112,.05)}.system-panel{color:#eaf8ff;background:linear-gradient(150deg,rgba(8,51,95,.95),rgba(12,89,135,.91)),url('../img/aincrad-sky.webp') center/cover;border-color:rgba(86,192,245,.55)}.panel-label{margin:0 0 .8rem;color:#9feaff;letter-spacing:.14em;font-size:.65rem;font-weight:800}.player-info{display:flex;align-items:center;gap:.85rem}.player-avatar{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid rgba(136,227,255,.62);border-radius:12px;background:rgba(120,211,255,.17);font-size:1.4rem}.player-info h2{font-size:1.07rem;margin:0;overflow-wrap:anywhere}.player-info small{color:#a7dcfa;font-size:.65rem;letter-spacing:.04em}.system-panel>p:not(.panel-label){margin:.8rem 0;color:#d3eafb;font-size:.83rem}.stat-row{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem;border-top:1px solid rgba(191,231,255,.23);font-size:.64rem;font-weight:700;letter-spacing:.06em}.stat-row b{color:#8affc5;white-space:nowrap}.side-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}.side-title>span{font-size:1.1rem;color:var(--accent2)}.side-title h2{margin:0;font-size:.98rem}.taxonomy-list,.archive-list{list-style:none;padding:0;margin:0}.taxonomy-list li{display:flex;gap:1rem;justify-content:space-between;padding:.48rem 0;border-bottom:1px dashed var(--line);font-size:.86rem}.taxonomy-list li:last-child{border:0}.taxonomy-list span{color:var(--muted)}.archive-list li{padding:.28rem 0;font-size:.81rem}.tag-cloud,.article-tags{display:flex;gap:.35rem;flex-wrap:wrap}.tag-cloud a,.article-tags a{padding:.22rem .62rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--muted);font-size:.74rem}.tag-cloud a:hover,.article-tags a:hover{color:var(--accent2);border-color:var(--accent)}.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:35px;padding:.35rem .55rem;border:1px solid var(--line);border-radius:8px}.pagination .is-current{background:var(--accent2);color:white}.empty-state{padding:3rem 1rem;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
/* Long form: white reading surface is intentional */
.post-layout{display:grid;grid-template-columns:minmax(175px,240px) minmax(0,800px);gap:1.5rem;justify-content:center;padding-top:2rem;padding-bottom:3.5rem}.toc-panel{align-self:start;position:sticky;top:100px;max-height:calc(100vh - 115px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.05rem;scrollbar-width:thin}.toc-heading{display:grid;gap:.2rem;margin-bottom:.8rem}.toc-heading>span{font-size:.63rem;font-weight:850;letter-spacing:.14em;color:var(--accent2)}.toc-heading b{font-size:.95rem}#article-toc{display:grid;gap:.15rem}#article-toc a{display:block;line-height:1.5;padding:.32rem .45rem;border-left:2px solid transparent;color:var(--muted);font-size:.81rem;overflow-wrap:anywhere}#article-toc a[data-level="3"]{padding-left:1rem}#article-toc a[data-level="4"]{padding-left:1.5rem}#article-toc a:hover,#article-toc a.active{color:var(--accent2);background:color-mix(in srgb,var(--accent) 10%,transparent);border-left-color:var(--accent2)}.article-panel{min-width:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel-solid);box-shadow:var(--shadow)}.article-header{padding:clamp(1.5rem,5vw,3rem) clamp(1.25rem,5vw,3.1rem) 1.5rem;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 9%,var(--panel-solid)),var(--panel-solid) 62%);border-bottom:1px solid var(--line)}.article-header h1{margin:.4rem 0 1.2rem;font-size:clamp(1.6rem,3.1vw,2.8rem);line-height:1.27;letter-spacing:-.038em}.entry-content{padding:clamp(1.25rem,5vw,3.1rem);font-size:.99rem;line-height:1.95;overflow-wrap:anywhere}.entry-content>*:first-child{margin-top:0}.entry-content h2,.entry-content h3,.entry-content h4{scroll-margin-top:90px;line-height:1.45;margin:2.2em 0 .7em}.entry-content h2{font-size:1.45em;border-bottom:1px solid var(--line);padding-bottom:.35em}.entry-content h2::before{content:"";display:inline-block;width:4px;height:.85em;margin-right:.7rem;background:linear-gradient(var(--accent),var(--accent2));border-radius:5px}.entry-content h3{font-size:1.22em}.entry-content h4{font-size:1.08em}.entry-content img{height:auto;border-radius:10px;max-width:100%}.entry-content a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}.entry-content ul,.entry-content ol{padding-left:1.5rem}.entry-content blockquote{margin:1.5rem 0;padding:.8rem 1rem;background:color-mix(in srgb,var(--accent) 7%,var(--panel-solid));border-left:3px solid var(--accent);color:var(--muted)}.entry-content table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;white-space:nowrap}.entry-content th,.entry-content td{border:1px solid var(--line);padding:.35rem .75rem}.entry-content pre{position:relative;margin:1.2rem 0;overflow:auto;border:1px solid #25435b;border-radius:11px;padding:2.2rem 1.1rem 1.1rem;background:#0b192a;color:#e6f4fd;font:13px/1.72 ui-monospace,SFMono-Regular,Menlo,monospace}.entry-content pre::before{content:"CODE / TERMINAL";position:absolute;top:.48rem;left:1.1rem;color:#6b93b0;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.11em}.entry-content code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:5px;padding:.08em .28em;background:color-mix(in srgb,var(--accent) 10%,transparent)}.entry-content pre code{padding:0;background:transparent;white-space:pre}.copy-code{position:absolute;top:.37rem;right:.55rem;border:1px solid #3a5b73;border-radius:6px;background:#18344a;color:#d6f5ff;padding:.3rem .6rem;font-size:.72rem}.entry-content .tok-key{color:#82dcff}.entry-content .tok-string{color:#a8e785}.entry-content .tok-comment{color:#7298ae}.entry-content .tok-number{color:#ffd28d}.article-footer,.related-posts,.comments{padding:1.5rem clamp(1.25rem,5vw,3.1rem);border-top:1px solid var(--line)}.article-footer p{margin:.7rem 0 0;color:var(--muted);font-size:.8rem}.post-neighbors{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:1.3rem clamp(1.25rem,5vw,3.1rem);border-top:1px solid var(--line)}.post-neighbors>div{display:grid;gap:.35rem;padding:.75rem;border:1px solid var(--line);border-radius:9px;min-width:0;font-size:.84rem}.post-neighbors>div:last-child{text-align:right}.post-neighbors small{color:var(--muted);font-size:.65rem;letter-spacing:.1em}.post-neighbors a{color:var(--accent2);font-weight:700}.related-posts h2,.comments h2{margin:.35rem 0 1rem;font-size:1.2rem}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.related-grid a{display:grid;align-content:start;gap:.3rem;min-height:85px;padding:.75rem;border:1px solid var(--line);border-radius:9px;font-weight:700;font-size:.83rem}.related-grid a:hover{border-color:var(--accent)}.related-grid small{font-size:.7rem;color:var(--accent2)}.page-wrap{max-width:920px;padding:2.3rem 0 4rem}.comment-list,.comment-children{list-style:none;margin:0;padding:0}.comment{padding:1.15rem 0;border-bottom:1px dashed var(--line)}.comment article{display:flex;gap:.75rem}.comment-avatar{display:grid;place-items:center;border-radius:9px;flex:none;width:35px;height:35px;background:color-mix(in srgb,var(--accent) 15%,var(--panel-solid));color:var(--accent2)}.comment-main{min-width:0;flex:1}.comment header{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}.comment header time{color:var(--muted);font-size:.72rem}.comment-body{font-size:.88rem;overflow-wrap:anywhere}.reply-link,.comment-cancel button{border:0;padding:0;background:none;color:var(--accent2);font-size:.76rem}.comment-children{margin-left:2.3rem}.respond{padding-top:1.4rem}.respond h3{font-size:1.04rem}.respond label{display:grid;gap:.32rem;font-size:.83rem;font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.respond input,.respond textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}.respond textarea{margin-bottom:.7rem;resize:vertical}.comment-cancel{margin:.4rem 0}.comments-closed,.login-state{color:var(--muted)}.error-page{padding:12vh 0 18vh;text-align:center}.error-page h1{font-size:clamp(1.7rem,3vw,2.5rem)}.error-code{font-size:clamp(7rem,20vw,12rem);font-weight:900;line-height:1;background:linear-gradient(110deg,var(--accent),var(--accent2));color:transparent;background-clip:text;letter-spacing:-.08em}.site-footer{padding:1.6rem 0 2rem;background:color-mix(in srgb,var(--paper) 85%,var(--panel-solid));border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}.footer-inner{display:flex;justify-content:space-between;gap:1rem}.footer-inner p{margin:0}.back-to-top{position:fixed;right:17px;bottom:16px;z-index:40;display:grid;place-items:center;width:42px;height:42px;background:var(--panel-solid);border:1px solid var(--line);border-radius:50%;color:var(--accent2);box-shadow:var(--shadow)}
/* Character assistant with non-invasive controls */
.companion{--pet-width:172px;position:fixed;right:22px;bottom:18px;z-index:65;width:var(--pet-width);user-select:none;touch-action:pan-y;filter:drop-shadow(0 12px 13px rgba(4,31,61,.14))}.companion[data-size="small"]{--pet-width:135px}.companion[data-size="large"]{--pet-width:211px}body.is-post .companion:not([data-size="large"]){--pet-width:137px}.companion-stage{position:relative}.companion-character{display:block;width:100%;margin:0;padding:0;border:0;background:none;outline-offset:4px;cursor:grab;touch-action:none}.companion-character:active{cursor:grabbing}.companion-character img{width:100%;height:auto;max-height:260px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 5px 4px rgba(3,29,51,.2));transition:opacity .22s,transform .2s}.companion-character:hover img{transform:translateY(-5px)}.companion.is-switching img{opacity:.15;transform:translateY(8px)}.companion.is-speaking img{animation:companion-bob .65s ease}.companion-control{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:-2px}.companion-control button{background:rgba(7,34,64,.96);border:1px solid #81d9ff;color:#e7faff;font-size:.72rem;padding:.29rem .55rem;border-radius:999px;box-shadow:0 4px 15px rgba(5,28,52,.18)}.control-toggle{flex:1}.companion-control button:hover{background:#08538d}.companion-bubble{position:absolute;right:45%;bottom:calc(100% - 16px);width:220px;max-width:75vw;padding:.75rem 1.9rem .8rem .85rem;border:1px solid #b1eaff;border-radius:12px 12px 3px 12px;background:rgba(9,39,70,.96);color:#f4fdff;font-size:.8rem;box-shadow:0 12px 25px rgba(0,0,0,.23);pointer-events:auto}.companion-bubble button{position:absolute;right:7px;top:4px;color:#c9f2ff;background:none;border:0;font-size:1.05rem}.companion-panel{position:absolute;bottom:31px;right:calc(100% + 8px);width:242px;max-width:calc(100vw - 25px);padding:1rem;border:1px solid var(--line);border-radius:13px;background:var(--panel-solid);color:var(--ink);box-shadow:0 16px 50px rgba(3,34,59,.28);font-size:.8rem;filter:none}.companion-panel-head{display:flex;align-items:center;justify-content:space-between;color:var(--accent2);font-size:.7rem;letter-spacing:.1em}.companion-panel-head button{background:transparent;border:0;color:var(--muted)}.companion-panel>p{margin:.4rem 0 .65rem;color:var(--muted)}.companion-choices{display:flex;gap:.4rem}.companion-choices button{flex:1;border:1px solid var(--line);border-radius:7px;padding:.5rem .4rem;color:var(--ink);background:var(--paper);font-size:.76rem}.companion-choices button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 19%,var(--panel-solid));border-color:var(--accent2);color:var(--accent2)}.companion-panel>label{display:block;margin:.75rem 0 .25rem;font-weight:700}.companion-panel select{width:100%;padding:.37rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px}.companion-panel .check-option{display:flex;gap:.4rem;align-items:center;font-weight:400}.companion-panel input{accent-color:var(--accent2)}.reset-position{width:100%;margin-top:.7rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:7px;padding:.45rem}.companion-panel .panel-footnote{font-size:.7rem;margin-bottom:0;line-height:1.5}.companion-reopen{position:fixed;right:16px;bottom:76px;z-index:65;border:1px solid #5ac4f8;border-radius:999px;background:rgba(7,37,69,.95);color:#fff;padding:.5rem .75rem;font-weight:700;font-size:.74rem;box-shadow:var(--shadow)}.companion-reopen>span{color:#6ae9ff}.companion.is-dragging{transition:none}.companion.is-dragging img{transition:none}
@keyframes companion-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* Responsive, progressive refinement */
@media (max-width:1050px){.primary-nav a{min-width:auto;padding:.3rem .55rem}.brand-title small{display:none}.content-grid{grid-template-columns:minmax(0,1fr) 250px}.hero-hud{display:none}}
@media (max-width:870px){.content-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.post-layout{grid-template-columns:1fr;gap:.8rem}.toc-panel{position:relative;top:auto;max-height:230px}.hero{min-height:330px}.hero-inner{min-height:330px}.companion{--pet-width:145px}}
@media (max-width:660px){.shell{width:calc(100% - 28px)}.header-inner{height:60px;gap:.5rem}.brand-mark{width:32px;height:32px;font-size:20px}.brand-title{max-width:155px;font-size:.9rem}.mobile-nav-toggle{display:block;margin-left:auto;order:2}.header-actions{order:1}.primary-nav{display:none;position:absolute;left:0;right:0;top:60px;height:auto;padding:.5rem .85rem;background:#092746;border-bottom:1px solid rgba(132,218,255,.4);box-shadow:0 15px 20px rgba(0,0,0,.1)}.primary-nav.is-open{display:grid;grid-template-columns:repeat(3,1fr)}.primary-nav a{height:42px}.icon-button{padding:.3rem .5rem}.search-trigger span{display:none}.hero,.hero-inner{min-height:305px}.hero-inner{padding:1.6rem 0 1.9rem}.hero h1{font-size:2.16rem}.hero-copy{padding-left:13px}.hero-copy>p:not(.eyebrow){font-size:.86rem;line-height:1.7}.hero .eyebrow{font-size:.56rem}.button{padding:.56rem .9rem;font-size:.82rem}.questbar{grid-template-columns:repeat(2,1fr);margin-top:-12px;margin-bottom:1.5rem}.questbar span{min-height:33px;font-size:.59rem}.questbar span:nth-child(3){border-left:0;border-top:1px solid var(--line)}.questbar span:nth-child(4){border-top:1px solid var(--line)}.section-heading h2{font-size:1.28rem}.post-card{grid-template-columns:41px 1fr;gap:.45rem;padding:.95rem}.card-seq{font-size:.75rem}.card-symbol{display:none}.post-card h3{font-size:1.02rem}.post-card p{font-size:.78rem}.sidebar{grid-template-columns:1fr}.post-layout{padding-top:1rem}.article-header h1{font-size:1.6rem}.entry-content{font-size:.92rem;line-height:1.85}.related-grid{grid-template-columns:1fr}.post-neighbors{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.footer-inner{display:grid;gap:.2rem}.companion{--pet-width:106px!important;right:8px;bottom:10px}.companion-character img{max-height:155px}.companion-panel{right:0;bottom:calc(100% + 5px);width:240px}.companion-bubble{width:172px;right:80%;font-size:.72rem}.companion-control button{font-size:.65rem;padding:.25rem}.back-to-top{right:11px;bottom:55px;width:37px;height:37px}.companion-reopen{right:11px;bottom:10px}}
@media (max-width:370px){.brand-title{max-width:122px}.hero h1{font-size:1.8rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
body.modal-open{overflow:hidden}

@media (prefers-color-scheme:dark){html:not([data-theme]){--ink:#e3f4ff;--muted:#a1bbcd;--paper:#081828;--panel:rgba(14,34,55,.94);--panel-solid:#0e243a;--line:#244a67;--deep:#e8f7ff;--shadow:0 18px 50px rgba(0,0,0,.28);--glass:rgba(11,30,49,.93);color-scheme:dark}}
@media(min-width:661px){.companion[data-dock="left"] .companion-panel{left:calc(100% + 8px);right:auto}.companion[data-dock="left"] .companion-bubble{left:65%;right:auto;border-radius:12px 12px 12px 3px}}

/* ============================================
   SaoSystem V2.1 — welcoming entrance and compact chibi companion
   ============================================ */
/* Above the fold: a real, clickable welcome article instead of another empty hero. */
body.is-home .hero,body.is-home .hero-inner{min-height:278px}
body.is-home .hero-inner{padding-block:1.85rem 2.7rem}
body.is-home .hero h1{font-size:clamp(2rem,3.7vw,3.15rem);margin:.42rem 0 .65rem}
body.is-home .hero-copy>p:not(.eyebrow){margin-bottom:.9rem}
body.is-home .hero-hud{opacity:.65;transform:scale(.82);transform-origin:bottom right}
.welcome-feature{position:relative;z-index:3;display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:1.35rem;margin-top:-30px;margin-bottom:1.12rem;padding:1.05rem 1.55rem;border-radius:17px;border:1px solid rgba(129,213,255,.75);background:linear-gradient(112deg,rgba(6,38,76,.97),rgba(8,76,125,.93)),url('../img/aincrad-sky.webp') center/cover;color:#f4fbff;box-shadow:0 13px 36px rgba(6,45,90,.22)}
.welcome-feature-icon{position:relative;display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(117,217,255,.75);border-radius:16px;background:rgba(55,162,236,.14);font-size:2.1rem;color:#88eaff;box-shadow:inset 0 0 17px rgba(57,163,233,.23)}
.welcome-feature-icon span{position:absolute;bottom:6px;right:8px;letter-spacing:.1em;font-size:.55rem;color:#b9ebff;font-weight:800}
.welcome-feature .eyebrow{color:#8ae7ff;font-size:.65rem;margin:0 0 .35rem}
.welcome-feature h2{margin:0 0 .35rem;font-size:clamp(1.18rem,2.1vw,1.65rem);line-height:1.35}
.welcome-feature h2 a:hover{color:#9deeff}
.welcome-feature-copy>p:not(.eyebrow){margin:0 0 .5rem;font-size:.82rem;line-height:1.65;color:#d8f0ff}
.welcome-feature-meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.69rem;color:#b4dbf7}
.welcome-feature-link{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.8rem 1rem;border:1px solid rgba(152,225,255,.8);border-radius:9px;background:linear-gradient(110deg,#0d93dd,#446aff);font-size:.79rem;font-weight:800;box-shadow:0 5px 22px rgba(23,151,250,.2);transition:transform .2s}
.welcome-feature-link:hover{transform:translateY(-2px);color:white}
body.is-home .questbar{margin-top:0}
/* The old no-TOC bug: deleting the sidebar must not drop article into the 240px grid column. */
.post-layout{grid-template-columns:minmax(190px,232px) minmax(0,1fr);align-items:start}
.post-layout .toc-panel{grid-column:1}
.post-layout .article-panel{grid-column:2;min-width:0;width:100%}
.post-layout.has-no-toc,.post-layout:not(:has(> .toc-panel)){grid-template-columns:minmax(0,930px);max-width:1000px}
.post-layout.has-no-toc .article-panel,.post-layout:not(:has(> .toc-panel)) .article-panel{grid-column:1}
.is-welcome-article .article-panel{background:var(--panel-solid)}
.is-welcome-article .article-header{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--panel-solid)),var(--panel-solid))}
.welcome-article-banner{position:relative;overflow:hidden;height:210px;margin:1.8rem clamp(1.25rem,5vw,3.1rem) 0;border:1px solid var(--line);border-radius:13px;background:#12629d}
.welcome-article-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.welcome-article-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,29,56,.75),transparent 75%)}
.welcome-article-banner>div{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);z-index:1;display:grid;gap:.4rem;color:#fff;text-shadow:0 2px 12px #0b2547}
.welcome-article-banner span{font-size:.6rem;letter-spacing:.23em;font-weight:800;color:#9deaff}
.welcome-article-banner strong{font-size:clamp(1.6rem,4vw,2.55rem);letter-spacing:.07em}
.is-welcome-article .entry-content{font-size:1.02rem;line-height:2.05}
.is-welcome-article .entry-content p{margin:0 0 1.65rem}
/* Three visible controls: dialogue / character switch / hide; there is NO expandable settings window. */
.companion,.companion[data-size],body.is-post .companion:not([data-size="large"]){--pet-width:185px;width:185px;position:fixed;right:18px;bottom:15px;z-index:65;overflow:visible;user-select:none;filter:none;touch-action:auto}
.companion-stage{position:relative;display:flex;align-items:end;width:143px;height:192px;overflow:visible}
.companion-character{display:flex;align-items:end;justify-content:center;width:138px;height:192px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;touch-action:none;filter:drop-shadow(0 10px 10px rgba(4,34,67,.23))}
.companion-character img{display:block;width:auto;height:180px;max-height:none;max-width:135px;object-fit:contain;object-position:bottom center;transform-origin:center 85%;animation:companion-idle 4.6s ease-in-out infinite;transition:opacity .23s,filter .23s;pointer-events:none}
.companion-character:hover img{filter:drop-shadow(0 0 10px rgba(104,210,255,.37))}
.companion-character img.is-changing{opacity:.2}
.companion.is-waving .companion-character img{animation:companion-wave 1.05s ease-in-out 1}
.companion.is-excited .companion-character img{animation:companion-cheer .85s cubic-bezier(.21,.73,.28,1.18) 1}
.companion.is-dragging .companion-character img{animation:none}
.companion-sparkle{position:absolute;color:#7de0ff;font-size:1.15rem;pointer-events:none;filter:drop-shadow(0 0 7px #25baff);animation:pet-sparkle 3.4s ease-in-out infinite}
.companion-sparkle.sp-one{top:7px;left:3px}
.companion-sparkle.sp-two{right:0;top:72px;animation-delay:-1.7s;font-size:.85rem}
.companion-actions{position:absolute;top:27px;right:0;display:grid;gap:9px;margin:0;padding:0;width:40px}
.companion-actions button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(151,222,255,.86);border-radius:50%;background:linear-gradient(145deg,rgba(8,55,103,.97),rgba(8,33,65,.97));color:#f2fcff;font-size:1.3rem;font-weight:800;box-shadow:0 6px 17px rgba(6,42,78,.25),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .18s,background .18s,box-shadow .18s}
.companion-actions button:first-child{font-size:1.04rem}
.companion-actions button:last-child{font-size:1.7rem;line-height:1;align-items:start}
.companion-actions button:hover{transform:scale(1.12);background:linear-gradient(145deg,#0076bd,#123b75);box-shadow:0 0 0 3px rgba(75,195,255,.17)}
.companion-bubble{position:absolute;right:123px;bottom:139px;z-index:3;width:205px;max-width:calc(100vw - 150px);padding:.65rem 1.45rem .7rem .75rem;border:1px solid #9fdcff;border-radius:12px 12px 3px 12px;background:rgba(250,254,255,.98);color:#213f5a;font-size:.79rem;line-height:1.6;box-shadow:0 9px 20px rgba(10,60,100,.14);filter:none}
.companion-bubble::after{content:"";position:absolute;right:-7px;bottom:13px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-top:1px solid #9fdcff;border-right:1px solid #9fdcff}
.companion-bubble button{position:absolute;top:3px;right:5px;border:0;background:transparent;color:#627e99;font-size:1.05rem}
.companion-reopen{right:15px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;padding:0;font-size:1.15rem}
.companion[data-dock="left"] .companion-bubble{right:auto;left:150px;border-radius:12px 12px 12px 3px}
.companion[data-dock="left"] .companion-bubble::after{right:auto;left:-7px;transform:rotate(225deg)}
@keyframes companion-idle{0%,100%{transform:translateY(0) rotate(-1.3deg) scale(1)}25%{transform:translateY(-3px) rotate(.7deg) scale(1.014)}50%{transform:translateY(-6px) rotate(1.5deg) scale(1.026)}75%{transform:translateY(-3px) rotate(-.7deg) scale(1.01)}}
@keyframes companion-wave{0%,100%{transform:rotate(0) translateY(0)}15%{transform:rotate(-5deg) translateY(-8px)}40%{transform:rotate(7deg) translateY(-11px)}65%{transform:rotate(-5deg) translateY(-8px)}85%{transform:rotate(5deg) translateY(-3px)}}
@keyframes companion-cheer{0%,100%{transform:scale(1)}20%{transform:translateY(-16px) rotate(-4deg) scale(1.04)}50%{transform:translateY(1px) rotate(4deg) scale(.96)}70%{transform:translateY(-8px) rotate(-3deg) scale(1.04)}}
@keyframes pet-sparkle{0%,100%{opacity:.1;transform:translateY(6px) scale(.65)}45%{opacity:.95;transform:translateY(-6px) scale(1.1)}}
@media(max-width:870px){.post-layout,.post-layout.has-no-toc{grid-template-columns:minmax(0,1fr);max-width:none}.post-layout .toc-panel,.post-layout .article-panel{grid-column:1}.welcome-feature{grid-template-columns:64px minmax(0,1fr);gap:.8rem}.welcome-feature-icon{width:60px;height:60px}.welcome-feature-link{grid-column:2;justify-self:start;padding:.55rem .85rem}}
@media(max-width:700px){
 body.is-home .hero,body.is-home .hero-inner{min-height:248px}
 body.is-home .hero h1{font-size:clamp(1.75rem,7vw,2.35rem)}
 .welcome-feature{grid-template-columns:42px minmax(0,1fr);gap:.75rem;padding:.8rem .9rem;margin-top:-18px;margin-bottom:.75rem;border-radius:12px}
 .welcome-feature-icon{width:42px;height:42px;font-size:1.4rem;border-radius:10px}
 .welcome-feature-icon span{display:none}
 .welcome-feature h2{font-size:1.2rem}
 .welcome-feature-copy>p:not(.eyebrow){font-size:.72rem}
 .welcome-feature-link{font-size:.73rem;padding:.5rem .7rem}
 .welcome-article-banner{height:150px;margin:1rem 1.15rem 0}
 .companion,.companion[data-size],body.is-post .companion:not([data-size="large"]){--pet-width:111px!important;width:111px;right:7px;bottom:10px}
 .companion-stage{width:79px;height:116px}
 .companion-character{width:78px;height:116px;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;touch-action:manipulation}
 .companion-character img{display:block;width:auto;height:112px;max-width:78px;max-height:none;object-fit:contain;object-position:center bottom;transform-origin:center 90%;animation:companion-idle 4.6s ease-in-out infinite}
 .companion-actions{right:0;top:9px;gap:4px;width:29px}
 .companion-actions button{width:29px;height:29px;font-size:.9rem}
 .companion-actions button:first-child{font-size:.77rem}
 .companion-actions button:last-child{font-size:1.25rem}
 .companion-sparkle{font-size:.65rem}.companion-sparkle.sp-two{top:38px}
 .companion-bubble{width:164px;max-width:calc(100vw - 124px);right:91px;bottom:81px;padding:.5rem 1.3rem .55rem .6rem;font-size:.68rem}
 .companion-reopen{right:10px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){.companion-character img,.companion-sparkle{animation:none!important}.companion-actions button,.welcome-feature-link{transition:none!important}}
/* Mobile reading mode: the character keeps a visible avatar but stops covering text. */
@media(max-width:700px){
 .companion.is-compact,.companion.is-compact[data-size]{width:50px!important;--pet-width:50px!important;right:10px;bottom:13px}
 .companion.is-compact .companion-stage{width:50px;height:50px}
 .companion.is-compact .companion-character{width:50px;height:50px;border:2px solid #98e9ff;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#103d71,#072447);box-shadow:0 5px 18px rgba(6,35,70,.3)}
 .companion.is-compact .companion-character img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;animation:none;transform:scale(1.3) translateY(14%)!important}
 .companion.is-compact .companion-actions,.companion.is-compact .companion-sparkle,.companion.is-compact .companion-bubble{display:none!important}
}


/* ========================================================
   SaoSystem V2.2 — scene continuity, real listing routes, HUD hover controls
   ======================================================== */
body{background-color:var(--paper);background-image:linear-gradient(180deg,rgba(227,241,253,.36),rgba(227,243,254,.62) 48%,rgba(227,241,253,.80)),url('../img/aincrad-sky.webp');background-position:center top,center center;background-size:cover,cover;background-attachment:fixed,fixed}
html[data-theme=dark] body{background-image:linear-gradient(180deg,rgba(5,18,36,.57),rgba(5,19,37,.82) 60%,rgba(5,16,34,.91)),url('../img/aincrad-sky.webp')}
@media(prefers-color-scheme:dark){html:not([data-theme]) body{background-image:linear-gradient(180deg,rgba(5,18,36,.57),rgba(5,19,37,.82) 60%,rgba(5,16,34,.91)),url('../img/aincrad-sky.webp')}}
/* The reading card stays opaque to preserve contrast over the cinematic environment. */
.post-layout{min-height:calc(100vh - 140px)}
.listing-landing,.listing-intro{padding:2.3rem 0 5rem;min-height:calc(100vh - 150px)}
.listing-intro{padding-bottom:1.4rem;min-height:0}
.listing-landing>h1,.listing-intro>h1{margin:.2rem 0 .35rem;color:var(--ink);font-size:clamp(2rem,4vw,3.1rem);text-shadow:0 2px 12px rgba(255,255,255,.28)}
.listing-landing>p:not(.eyebrow),.listing-intro>p:not(.eyebrow){margin:0 0 1.7rem;color:var(--muted)}
.listing-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.listing-card{position:relative;display:grid;align-content:space-between;min-height:165px;gap:.7rem;padding:1.35rem 1.45rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.listing-card:hover,.timeline-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.listing-card>span{font-size:.64rem;letter-spacing:.14em;font-weight:750;color:var(--accent2)}
.listing-card strong{font-size:1.35rem;letter-spacing:.02em}
.listing-card small{font-size:.8rem;color:var(--muted)}
.listing-card i{position:absolute;right:18px;top:18px;color:var(--accent2);font-style:normal;font-size:1.35rem}
.timeline-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.timeline-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.35rem;background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:0 9px 18px rgba(12,37,80,.07);transition:transform .2s,border-color .2s}
.timeline-card>span{color:var(--accent);font-size:1.2rem}.timeline-card strong{flex:1;font-size:1.05rem}.timeline-card small{color:var(--accent2)}
/* The three actions are only summoned when the player shows interest. */
.companion-actions{opacity:0;transform:translateX(8px) scale(.96);pointer-events:none;transition:opacity .23s ease,transform .23s ease}
.companion:hover .companion-actions,.companion:focus-within .companion-actions,.companion.is-actions-open .companion-actions{opacity:1;transform:none;pointer-events:auto}
.companion-actions button{border-radius:10px;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);background:linear-gradient(140deg,rgba(10,55,102,.95),rgba(8,25,60,.96));border:1px solid #81e4ff;box-shadow:0 0 9px rgba(61,205,255,.38),inset 0 0 12px rgba(31,176,239,.22)}
.companion[data-character="asuna"] .companion-character img{animation:none!important}
.companion[data-character="asuna"].is-excited .companion-character img,.companion[data-character="asuna"].is-waving .companion-character img{animation:none!important}
@media(max-width:870px){.listing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body{background-attachment:scroll,scroll;background-position:center top,55% top}.listing-landing{padding:1.4rem 0 3rem}.listing-cards,.timeline-cards{grid-template-columns:1fr}.listing-card{min-height:130px}.timeline-card{flex-wrap:wrap}.companion-actions{transform:translateX(5px);opacity:0;pointer-events:none}.companion.is-actions-open .companion-actions{transform:none;opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.companion-actions{transition:none!important}}

/* ==============================================================
   SaoSystem V2.3 — preloaded character poses, cursor & pointer gaze
   Older CSS rules are overridden here rather than patching Typecho templates.
   ============================================================== */
/* SAO-inspired local cursor: fine pointers only, editable text keeps I-beam. */
@media (hover:hover) and (pointer:fine) {
 html,body,body *{cursor:url('../img/cursor-sao.png') 3 2,auto}
 a,a *,button,button *,[role="button"],[role="button"] *,select,summary{cursor:url('../img/cursor-sao-action.png') 3 2,pointer!important}
 input,textarea,[contenteditable],[contenteditable] *{cursor:text!important}
 .companion-character,.companion-character *{cursor:grab!important}
 .companion-character:active,.companion-character:active *{cursor:grabbing!important}
}
.companion,.companion[data-size],body.is-post .companion:not([data-size="large"]){--pet-look-x:0px;--pet-look-y:0px;--pet-look-rot:0deg;--pet-body-x:0px}
.companion .companion-stage{display:block;position:relative;width:143px;height:205px}
.companion .companion-character{position:relative;display:block;width:143px;height:205px;padding:0;overflow:visible;background:none;border:0;touch-action:none}
.companion .pet-motion{position:absolute;display:block;inset:0;width:143px;height:205px;transform-origin:50% 94%;animation:sao-breathe 4.8s ease-in-out infinite;pointer-events:none}
.companion .pet-frame{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none;will-change:opacity}
.companion .pet-frame.is-current{opacity:1}
.companion .pet-frame img{position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;object-fit:contain;object-position:center bottom;animation:none!important;filter:drop-shadow(0 5px 5px rgba(3,28,48,.16));pointer-events:none}
.companion .pet-frame .pet-frame-body{clip-path:inset(42% 0 0 0);transform:translateX(var(--pet-body-x));transition:none}
.companion .pet-frame .pet-frame-head{clip-path:inset(0 0 57% 0);transform-origin:51% 43%;transform:translate(var(--pet-look-x),var(--pet-look-y)) rotate(var(--pet-look-rot));transition:none}
.companion.is-switching .pet-motion{opacity:.4;transition:opacity .15s ease}
.companion:not(.is-switching) .pet-motion{opacity:1;transition:opacity .15s ease}
.companion.is-dragging .pet-motion,.companion.is-compact .pet-motion{animation:none!important}
.companion .companion-character:hover .pet-motion{filter:drop-shadow(0 0 6px rgba(46,183,248,.23))}
.companion .companion-actions{z-index:3}
.companion .companion-sparkle{z-index:2}
@keyframes sao-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
@media(max-width:700px){
 .companion .companion-stage{width:80px;height:118px}
 .companion .companion-character{width:80px;height:118px}
 .companion .pet-motion{width:80px;height:118px}
 .companion.is-compact .companion-stage,.companion.is-compact .companion-character{width:50px;height:50px}
 .companion.is-compact .pet-motion{width:50px;height:64px;transform:scale(1.3) translateY(12%);transform-origin:top center;animation:none}
 .companion.is-compact .pet-frame img{object-fit:cover;object-position:center top}
 .companion.is-compact .companion-character{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.companion .pet-motion{animation:none!important}.companion .pet-frame{transition:none!important}}