:root{--bg:#d6d6d6;--bg-window:#efefef;--ink:#111;--ink-soft:#333;--bevel-light:#fff;--bevel-dark:#9a9a9a;--stripe:repeating-linear-gradient(90deg,#eaeaea,#eaeaea 6px,#f4f4f4 6px,#f4f4f4 12px)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Tahoma,Verdana,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px;background:var(--stripe);border-bottom:2px solid var(--bevel-dark);box-shadow:inset 0 1px 0 var(--bevel-light);z-index:50}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}.brand-badge{width:18px;height:18px;background:#000;border:2px solid var(--bevel-light);box-shadow:inset 0 1px 0 var(--bevel-dark)}
.top-actions{display:flex;gap:8px}.btn{font-size:12px;padding:6px 10px;border:none;background:var(--bg-window);border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);border-radius:3px;cursor:pointer}
.btn:active{border-top:2px solid var(--bevel-dark);border-left:2px solid var(--bevel-dark);border-right:2px solid var(--bevel-light);border-bottom:2px solid var(--bevel-light)}
#desktop{position:relative;padding:48px 6px 120px;max-width:1150px;margin:0 auto}
.window{position:relative;margin:14px auto;max-width:920px;background:var(--bg-window);border-radius:6px;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);overflow:hidden;display:none}
.window[aria-hidden="false"]{display:block}.titlebar{display:flex;align-items:center;gap:10px;height:28px;background:var(--stripe);border-bottom:2px solid var(--bevel-dark);padding:0 8px}
.titlebar h3{margin:0;font-size:13px}.traffic{display:flex;gap:6px;margin-right:6px}.dot{width:12px;height:12px;border-radius:0;background:#c0c0c0;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark)}
.dot.close{background:#d05050}.dot.min{background:#d0d050}.dot.max{background:#50a050}.content{padding:12px}.scroll{max-height:min(62vh,560px);overflow:auto}
.card-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.card{background:#fff;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);border-radius:4px;padding:10px}
.card h4{margin:0 0 6px;font-size:14px}.card blockquote{margin:0;font-size:16px;line-height:1.5}.card blockquote footer{margin-top:6px;color:var(--ink-soft);font-size:12px}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.link-list a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);border-radius:4px;text-decoration:none;color:var(--ink)}
.audio-player,.video-player{display:grid;gap:8px}#playlist,#videolist{list-style:decimal inside;margin:0;padding:0;display:grid;gap:4px}#playlist li,#videolist li{background:#fff;padding:8px 10px;border-radius:4px;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark)}
.media-frame{background:#000;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}.media-frame video,.media-frame iframe{width:100%;height:100%;border:0}
.guestbook-form{display:grid;gap:8px;max-width:520px}.guestbook-form input,.guestbook-form textarea{width:100%;padding:8px;background:#fff;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);border-radius:3px;font-size:14px}
.guestbook-form button{justify-self:start}.guestbook-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.guestbook-item{background:#fff;padding:8px;border-radius:4px;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);font-size:14px}
.guestbook-meta{font-size:12px;color:var(--ink-soft)}.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px;padding:8px 10px;background:var(--stripe);border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);border-radius:8px;z-index:60}
.dock-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg-window);padding:8px 10px;border-radius:6px;border-top:2px solid var(--bevel-light);border-left:2px solid var(--bevel-light);border-right:2px solid var(--bevel-dark);border-bottom:2px solid var(--bevel-dark);min-width:108px;cursor:pointer}
.dock-item img{width:26px;height:26px}.dock-item span{font-size:12px;font-weight:700;text-align:center}
.dock-item:active{border-top:2px solid var(--bevel-dark);border-left:2px solid var(--bevel-dark);border-right:2px solid var(--bevel-light);border-bottom:2px solid var(--bevel-light)}
@media (max-width:720px){#desktop{padding:46px 6px 140px}.dock{flex-wrap:wrap;width:94%;justify-content:center}.dock-item{flex:1 1 calc(50% - 12px);min-width:120px}.window .scroll{max-height:65vh}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}