.software-menu{min-width:236px}
.software-menu>:is(button,a){display:flex;align-items:center;gap:12px;width:100%;min-height:60px;box-sizing:border-box;border:0;border-radius:0;padding:10px 12px;background:transparent;color:#b6c7d1;text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.software-menu>:is(button,a):is(:hover,:focus-visible){color:#e9f5fa;background:#bad8e512}
.software-menu>:is(button,a):focus-visible{outline:1px solid #b9dae9;outline-offset:-2px}
.software-menu>:is(button,a)>img{width:32px;height:32px;object-fit:contain;flex:none}
.software-menu strong{font:inherit}
.software-menu small{white-space:normal}
#reader[data-software-view]{left:50%;right:auto;transform:translateX(-50%);width:min(860px,calc(100vw - 48px));max-width:860px}
#reader[data-software-view] .window-body{white-space:normal}
#reader[data-software-view] .reading-footnote{display:none}
.software-copy{max-width:720px;margin:0 auto}
/* The same logo box for every product, so the windows line up (Hiroshi, 03.11.2026). */
.software-wordmark{display:block;width:min(100%,520px);height:150px;object-fit:contain;object-position:left center;margin:0 0 24px}
.software-core{margin:0 0 22px}
.software-core>img{display:block;width:auto;max-width:100%;height:auto;max-height:280px;border:1px solid #8fbdc726}
.software-core>figcaption{margin-top:8px;color:var(--muted);font:inherit}
.software-story{max-width:650px}
#reader .software-copy .software-title,#reader .software-copy p{font:inherit;letter-spacing:normal;color:var(--ink);margin:0 0 22px}
#reader .software-copy .software-foundation{color:var(--muted)}
.software-status{display:inline-block;margin-bottom:22px;color:var(--muted);font:inherit}
/* Every window closes with the small × of the left panel (.close-window), never a big button (Hiroshi,
   03.11.2026). Here because this sheet loads last, after layout.css's narrow-screen rule for #closeReader. */
.reading-window #closeReader{min-height:0;padding:1px 7px;border:0;background:transparent;font-size:22px;line-height:1}
/* One button style on the whole site (Hiroshi, 03.11.2026): the same look as every other window button (style.css). */
.software-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.software-actions>a,.software-actions>button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--border);border-radius:5px;background:var(--panel);color:var(--ink)!important;text-decoration:none;font:inherit;cursor:pointer}
.software-actions>:is(a,button):hover{border-color:var(--accent)}
.software-actions>:is(a,button):focus-visible,.software-downloads>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.software-downloads{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;font-size:12px}
.software-downloads>a{color:#8da8b6!important;text-underline-offset:4px}
.software-download-note{flex-basis:100%}
/* The wallpapers: eight small previews in one place, each downloads its original (Hiroshi, 03.11.2026). */
.software-wallpapers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.software-wallpapers>a{display:block;color:#8da8b6!important;text-decoration:none;font-size:12px}
.software-wallpapers img{display:block;width:100%;height:auto;aspect-ratio:1680/720;object-fit:cover;border:1px solid var(--border);border-radius:5px;background:var(--bg)}
.software-wallpapers>a:is(:hover,:focus-visible) img{border-color:var(--accent)}
.software-wallpapers>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.software-wallpapers span{display:block;margin-top:6px}
@media(max-width:640px){
 #reader[data-software-view]{width:calc(100vw - 20px)}
 #reader[data-software-view] .window-head{padding:18px;flex-direction:row;align-items:center}
 .software-wordmark{height:110px;margin-bottom:20px}
 .software-actions{gap:8px}.software-actions>a,.software-actions>button{flex:1 1 auto}
 .software-wallpapers{grid-template-columns:repeat(2,minmax(0,1fr))}
}