.aiodic-page,.aiodic{--bg:#0f1318;--panel:#161b22;--ink:#e9edf2;--muted:#8b95a3;--line:#2a313b;--glow:1;--dimop:.14;--btn:#1e252e;}
.aiodic *,.aiodic *::before,.aiodic *::after,.aiodic-page *{box-sizing:border-box}
body.aiodic-page{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"Saira",system-ui,"Segoe UI",Arial,sans-serif}
.aiodic{color:var(--ink);font-family:"Saira",system-ui,"Segoe UI",Arial,sans-serif}
.aiodic button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid #7c9cff;outline-offset:2px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:1560px;margin:0 auto;padding:1.4rem 1.25rem .6rem}
.top h1{margin:0;font-weight:600;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:.01em}
.top p{margin:.2rem 0 0;color:var(--muted)}
.ghost{background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:.45rem .9rem}
.scroller{overflow-x:auto;max-width:100%;padding:0 1.25rem 2rem}
.board{container-type:inline-size;min-width:1080px;max-width:1560px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(18,1fr);gap:.45cqw;position:relative}
.cell{--c:#888;--tc:var(--c);aspect-ratio:1;align-self:start;width:100%;min-height:0;overflow:hidden;border:max(1.5px,.12cqw) solid var(--c);background:transparent;padding:.55cqw .3cqw .3cqw;display:grid;grid-template-rows:auto 1.5cqw 0.7cqw;align-content:center;justify-items:center;text-align:center;position:relative;color:var(--tc);transition:opacity .25s,transform .15s,box-shadow .15s;border-radius:1px;min-width:0}
.cell:hover{transform:scale(1.06);z-index:2;box-shadow:0 0 calc(1.2cqw*var(--glow)) color-mix(in srgb,var(--c) 45%,transparent)}
.cell .n{position:absolute;top:.2cqw;left:.3cqw;font-size:.62cqw;line-height:1}
.cell .s{font-size:2.05cqw;line-height:1;font-weight:500;text-shadow:0 0 calc(.9cqw*var(--glow)) color-mix(in srgb,var(--c) 70%,transparent)}
.cell .nm{font-size:.64cqw;line-height:1.1;margin-top:.15cqw;align-self:center;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;overflow-wrap:break-word}
.cell .nm.long{font-size:.54cqw;hyphens:manual}.cell .t{font-size:.56cqw;opacity:.85;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cell.ph{font-size:1.1cqw;display:flex;align-items:center;justify-content:center}
.grid.focus .cell:not(.on){opacity:var(--dimop)}
.legend{grid-column:3/18;grid-row:1;align-self:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3cqw 1.4cqw;padding:0 1cqw}
.legend button{background:none;border:0;padding:.2cqw .3cqw;font-size:.92cqw;color:var(--c)}
.legend button.act{text-decoration:underline;text-underline-offset:.3em}
.gap{grid-column:1/-1;height:2.2cqw}
.connector{position:absolute;border-left:1px solid var(--line);border-bottom:1px solid var(--line);pointer-events:none}
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;overflow:auto}
.modal{--c:#888;--tc:var(--c);width:min(440px,100%);display:flex;flex-direction:column;gap:1rem;animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.zoom{position:relative;aspect-ratio:1;width:100%;margin:0;border:4px solid var(--c);background:var(--panel);color:var(--tc);box-shadow:0 0 calc(40px*var(--glow)) color-mix(in srgb,var(--c) 40%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.zoom svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.zoom .spin{transform-origin:50% 50%;animation:spin linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.zoom .spin,.modal{animation:none}}
.zoom .zn{position:absolute;top:10px;left:14px;font-size:1.6rem}
.zoom .zt{position:absolute;top:12px;right:14px;font-size:.85rem;text-align:right;max-width:45%}
.zoom .zs{font-size:clamp(4rem,18vw,7rem);line-height:1;position:relative;text-shadow:0 0 calc(18px*var(--glow)) color-mix(in srgb,var(--c) 70%,transparent)}
.zoom .zname{font-size:1.5rem;position:relative;text-align:center;padding:0 .8rem}
.zoom .zc{position:absolute;bottom:12px;font-size:.95rem}
.info{background:var(--panel);border:4px solid var(--c);border-radius:0;padding:1rem 1.1rem}
.info .sum{margin:0 0 .5rem;font-weight:500;font-size:1.05rem}
.info .det{margin:0;color:var(--muted);line-height:1.6}
.linkrow{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.linkbtn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--c);color:var(--tc);background:transparent;border-radius:6px;padding:.4rem .75rem;text-decoration:none}
.linkbtn[aria-disabled="true"]{opacity:.45;cursor:default}
.linkbtn svg{width:18px;height:18px}
.editrow{display:flex;gap:.5rem;width:100%}.editrow input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.4rem .6rem}
.mfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.mfoot button{width:100%}
.note{color:var(--muted);font-size:.85rem}

body.aiodic-page{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.aiodic-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1560px;margin:0 auto;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.aiodic-nav .brand{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:.02em}
.aiodic-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.3rem}
.aiodic-nav a{color:var(--muted);text-decoration:none}
.aiodic-nav a:hover{color:var(--ink)}
.aiodic-foot{max-width:1560px;margin:2rem auto 0;padding:1.2rem 1.25rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.aiodic-fallback{display:none}
.aiodic-main{min-height:60vh}
.aiodic .readmore{display:inline-flex;align-items:center;gap:.45rem;background:var(--c);color:#0d1117;border-radius:6px;padding:.4rem .8rem;text-decoration:none;font-weight:600}
.aiodic-single{max-width:900px;margin:0 auto;padding:1rem 1.25rem 2rem}
.aiodic-back a{color:var(--muted);text-decoration:none}
.aiodic-back a:hover{color:var(--ink)}
.aiodic-hero{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:2rem;align-items:center;margin:1rem 0 2rem}
@media (max-width:700px){.aiodic-hero{grid-template-columns:1fr}}
.aiodic-single{--tc:var(--c)}
.aiodic-single .zoom{width:100%}
.aiodic-single .zoom .zs{font-size:clamp(4rem,12vw,6rem)}
.aiodic-intro h1{margin:0 0 .5rem;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:var(--tc)}
.aiodic-intro .sum{font-size:1.15rem;margin:0 0 1rem}
.aiodic-single .linkbtn{display:inline-flex;border:1px solid var(--c);color:var(--tc);border-radius:6px;padding:.4rem .8rem;text-decoration:none}
.aiodic-article{font-size:1.05rem;line-height:1.75;max-width:70ch}
.aiodic-article a{color:var(--tc)}
.aiodic-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.aiodic-pn a{display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--line);border-radius:6px;padding:.8rem 1rem;color:var(--ink);text-decoration:none}
.aiodic-pn a:last-child{text-align:right}
.aiodic-pn a:hover{border-color:var(--c)}
.aiodic-pn span{color:var(--muted);font-size:.85rem}
.aiodic button,.aiodic button:hover,.aiodic button:focus{background:transparent;box-shadow:none;text-transform:none;letter-spacing:normal;margin:0;font-weight:inherit;line-height:normal;min-height:0;text-decoration:none}
.aiodic .ghost,.aiodic .ghost:hover{background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:.45rem .9rem;color:var(--ink)}
.aiodic .legend button{color:var(--c)}
.aiodic .cell,.aiodic .cell:hover,.aiodic .cell:focus{border:max(1.5px,.12cqw) solid var(--c);color:var(--tc);border-radius:1px;padding:.55cqw .3cqw .3cqw}
.aiodic .cell.ph{padding:0}
.aiodic .overlay{color:var(--ink)}
.aiodic .top{padding-top:1.2rem}
.aiodic .readmore svg,.aiodic .linkbtn svg{width:18px;height:18px;flex:none}.aiodic .readmore span{white-space:nowrap}