:root {
  color-scheme: dark;
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.68);
  --hairline: rgba(255,255,255,.18);
  --glass: rgba(21, 29, 54, .44);
  --glass-strong: rgba(22, 27, 47, .72);
  --shadow: 0 28px 75px rgba(0,0,0,.34), 0 4px 18px rgba(0,0,0,.2);
  --radius: 22px;
  --menu-h: 34px;
  --dock-h: 82px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif; background: #10142b; color: var(--text); }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(152, 214, 255, .96); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 10000; top: 8px; left: 8px; transform: translateY(-150%); background: #fff; color: #111; padding: 8px 12px; border-radius: 9px; text-decoration: none; }
.skip-link:focus { transform: none; }
.desktop-shell { position: relative; width: 100vw; height: 100dvh; min-height: 520px; isolation: isolate; overflow: hidden; }
.wallpaper { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(circle at 17% 20%, rgba(100,139,255,.55), transparent 28%),
  radial-gradient(circle at 72% 22%, rgba(238,120,178,.42), transparent 30%),
  radial-gradient(circle at 61% 82%, rgba(73,207,206,.42), transparent 32%),
  linear-gradient(145deg, #081329 0%, #1d2147 32%, #30224c 61%, #0f2239 100%);
}
.wallpaper::before, .wallpaper::after { content:""; position:absolute; border-radius: 50%; filter: blur(18px); opacity:.72; transform: rotate(-16deg); }
.wallpaper::before { width: 72vw; height: 42vw; left:-18vw; top:32vh; background: linear-gradient(90deg, rgba(74,118,255,.18), rgba(126,233,255,.44), rgba(255,255,255,.07)); box-shadow: inset 0 0 90px rgba(255,255,255,.12); }
.wallpaper::after { width: 68vw; height: 32vw; right:-18vw; top:4vh; background: linear-gradient(110deg, rgba(255,114,190,.26), rgba(156,114,255,.35), rgba(76,164,255,.16)); }
.wallpaper-glow { position: absolute; border-radius: 999px; filter: blur(50px); mix-blend-mode: screen; opacity:.7; animation: drift 18s var(--ease) infinite alternate; }
.glow-a { width: 46vw; height: 16vw; left: 16vw; top: 12vh; background: rgba(127,222,255,.24); transform: rotate(18deg); }
.glow-b { width: 40vw; height: 18vw; right: 5vw; bottom: 12vh; background: rgba(255,125,202,.2); animation-delay: -6s; }
.glow-c { width: 24vw; height: 24vw; left: 40vw; top: 44vh; background: rgba(125,112,255,.16); animation-delay: -11s; }
.wallpaper-noise { position:absolute; inset:0; opacity:.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
@keyframes drift { from { transform: translate3d(-2vw,-1vh,0) rotate(14deg) scale(.98); } to { transform: translate3d(3vw,2vh,0) rotate(18deg) scale(1.05); } }
.glass { background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055) 45%, rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), var(--shadow); backdrop-filter: blur(28px) saturate(155%); -webkit-backdrop-filter: blur(28px) saturate(155%); }
.menu-bar { position: fixed; z-index: 9000; inset: 0 0 auto 0; height: var(--menu-h); display:flex; align-items:center; justify-content:space-between; padding: 0 12px; border-radius:0; border-left:0; border-right:0; border-top:0; background: linear-gradient(180deg, rgba(19,24,43,.48), rgba(18,24,42,.28)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }
.menu-left, .menu-right { display:flex; align-items:center; gap:2px; height:100%; }
.menu-trigger { border:0; background:transparent; padding: 4px 8px; border-radius:7px; font-size:13px; font-weight:520; cursor:default; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background:rgba(255,255,255,.13); }
.apple-mark { font-size:17px; padding-left:6px; padding-right:7px; }
.menu-owner { font-weight:700; }
.menu-right { gap:9px; font-size:12px; }
.status-icon { width:18px; height:18px; display:grid; place-items:center; }
.status-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.battery { position:relative; width:23px; height:11px; border:1px solid rgba(255,255,255,.8); border-radius:3px; padding:1px; }
.battery::after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; border-radius:0 2px 2px 0; background:rgba(255,255,255,.6); }
.battery span { display:block; height:100%; width:82%; border-radius:1.5px; background:#fff; }
.menu-clock { min-width:112px; text-align:right; font-variant-numeric: tabular-nums; }
.menu-popover { position:fixed; z-index:9500; top:38px; min-width:238px; padding:7px; border-radius:14px; background:linear-gradient(145deg, rgba(43,47,65,.78), rgba(23,28,48,.72)); transform-origin: top left; animation: pop .14s ease-out; }
.menu-popover.hidden { display:none; }
.menu-popover button { width:100%; border:0; background:transparent; color:inherit; padding:7px 10px; text-align:left; border-radius:7px; font-size:13px; display:flex; justify-content:space-between; }
.menu-popover button:hover { background:rgba(78,139,255,.75); }
.menu-popover .separator { height:1px; margin:5px 7px; background:rgba(255,255,255,.12); }
@keyframes pop { from { opacity:0; transform:scale(.96) translateY(-4px); } }
.desktop { position: absolute; inset: var(--menu-h) 0 0; }
.desktop-icons { position:absolute; inset: 26px 22px calc(var(--dock-h) + 34px) 22px; display:grid; grid-template-columns: repeat(2, minmax(96px, 112px)); grid-auto-rows: 122px; align-content:start; justify-content:start; gap: 8px 16px; }
.desktop-icon { border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:6px 5px; border-radius:12px; cursor:default; text-shadow:0 1px 5px rgba(0,0,0,.7); }
.desktop-icon:hover, .desktop-icon.selected { background:rgba(255,255,255,.10); }
.desktop-icon .label { max-width:106px; font-size:12.5px; line-height:1.15; text-align:center; font-weight:560; }
.folder-art { --accent:#72a7ff; position:relative; width:76px; height:58px; filter: drop-shadow(0 11px 12px rgba(0,0,0,.24)); transform: perspective(260px) rotateX(2deg); transition:transform .18s var(--ease); }
.desktop-icon:hover .folder-art { transform:perspective(260px) rotateX(-4deg) translateY(-2px) scale(1.035); }
.folder-art::before { content:""; position:absolute; left:5px; top:2px; width:34px; height:16px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent), white 18%), var(--accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.folder-art::after { content:""; position:absolute; inset:11px 2px 1px; border-radius:10px 11px 14px 14px; background:linear-gradient(165deg, color-mix(in srgb, var(--accent), white 34%), color-mix(in srgb, var(--accent), #2f4e8c 18%) 52%, color-mix(in srgb, var(--accent), #10244e 38%)); border:1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -9px 16px rgba(20,40,80,.15); }
.folder-glyph { position:absolute; z-index:2; left:50%; top:22px; width:31px; height:27px; transform:translateX(-50%); border-radius:9px; display:grid; place-items:center; color:rgba(255,255,255,.9); background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 5px 9px rgba(0,0,0,.12); backdrop-filter:blur(5px); }
.folder-glyph svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.window-layer { position:absolute; inset:0; pointer-events:none; }
.finder-window { position:absolute; z-index:100; min-width:520px; min-height:360px; width:min(880px, 72vw); height:min(650px, calc(100dvh - 150px)); left:clamp(150px, 18vw, 320px); top:clamp(55px, 10vh, 110px); border-radius:var(--radius); overflow:hidden; pointer-events:auto; background:linear-gradient(145deg, rgba(36,43,67,.66), rgba(14,21,42,.58)); border:1px solid rgba(255,255,255,.2); box-shadow: 0 35px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter:blur(34px) saturate(145%); -webkit-backdrop-filter:blur(34px) saturate(145%); resize:both; animation: windowOpen .27s var(--ease); }
.finder-window.inactive { filter:saturate(.85) brightness(.91); }
.finder-window.maximized { inset: 10px 12px calc(var(--dock-h) + 18px) 12px !important; width:auto !important; height:auto !important; resize:none; border-radius:18px; }
.finder-window.minimizing { pointer-events:none; animation:minimizeToDock .26s var(--ease) forwards; transform-origin:50% 100%; }
.finder-window.closing { pointer-events:none; animation:windowClose .2s ease-in forwards; }
@keyframes windowOpen { from { opacity:0; transform:translateY(12px) scale(.94); filter:blur(3px); } to { opacity:1; transform:none; } }
@keyframes windowClose { to { opacity:0; transform:translateY(8px) scale(.9); filter:blur(2px); } }
@keyframes minimizeToDock { to { opacity:0; transform:translateY(62vh) scale(.12,.06); filter:blur(4px); } }
.window-toolbar { height:64px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); cursor:grab; user-select:none; }
.window-toolbar:active { cursor:grabbing; }
.traffic-lights { display:flex; gap:8px; margin-right:17px; }
.traffic { width:13px; height:13px; border:1px solid rgba(0,0,0,.18); border-radius:50%; padding:0; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25); cursor:default; position:relative; }
.traffic.close { background:#ff5f57; } .traffic.min { background:#febc2e; } .traffic.max { background:#28c840; }
.traffic::after { position:absolute; inset:-3px; display:grid; place-items:center; font-size:8px; font-weight:900; color:rgba(34,34,34,.62); opacity:0; }
.traffic.close::after { content:'×'; } .traffic.min::after { content:'−'; } .traffic.max::after { content:'↗'; font-size:6px; }
.traffic-lights:hover .traffic::after { opacity:1; }
.window-title-wrap { min-width:0; display:flex; align-items:center; gap:10px; }
.mini-folder { --accent:#72a7ff; width:28px; height:23px; position:relative; border-radius:5px 6px 7px 7px; background:linear-gradient(160deg, color-mix(in srgb,var(--accent),white 30%), var(--accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 8px rgba(0,0,0,.15); }
.mini-folder::before { content:""; position:absolute; width:13px; height:6px; left:2px; top:-4px; border-radius:4px 4px 0 0; background:color-mix(in srgb,var(--accent),white 12%); }
.window-title { font-weight:670; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-subtitle { font-size:11px; color:var(--muted); margin-top:2px; }
.window-spacer { flex:1; }
.view-pill { display:flex; gap:4px; padding:4px; border-radius:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }
.view-pill span { width:20px; height:20px; border-radius:5px; display:grid; place-items:center; color:rgba(255,255,255,.75); }
.view-pill .active { background:rgba(255,255,255,.14); }
.window-content { height:calc(100% - 64px); overflow:auto; padding:22px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.24) transparent; }
.library-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.library-header h2 { margin:0; font-size:clamp(25px, 3vw, 36px); letter-spacing:-.04em; }
.library-header p { margin:6px 0 0; color:var(--muted); max-width:560px; font-size:13px; }
.collection-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.music-layout { display:grid; grid-template-columns: minmax(220px,.75fr) 1.25fr; gap:18px; }
.now-playing { min-height:310px; border-radius:20px; padding:20px; position:sticky; top:0; overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.14); }
.now-playing::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-100px; top:-90px; background:radial-gradient(circle,rgba(255,110,160,.3),transparent 65%); }
.big-album { aspect-ratio:1; width:min(100%,260px); margin:0 auto 18px; border-radius:20px; display:grid; place-items:center; background:linear-gradient(145deg,#141725,#8c3759 55%,#de784d); box-shadow:0 22px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24); position:relative; overflow:hidden; }
.big-album::before { content:""; width:55%; height:55%; border:1px solid rgba(255,255,255,.34); border-radius:50%; box-shadow:0 0 0 13px rgba(255,255,255,.04), 0 0 0 29px rgba(255,255,255,.03); }
.big-album::after { content:""; position:absolute; width:17%; height:17%; border-radius:50%; background:rgba(255,255,255,.7); box-shadow:0 0 24px rgba(255,255,255,.4); }
.player-row { display:flex; gap:10px; justify-content:center; align-items:center; margin-top:14px; }
.player-btn { width:36px; height:36px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.player-btn.primary { width:43px; height:43px; background:#fff; color:#171a28; }
.track-list { display:flex; flex-direction:column; gap:8px; }
.track { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:9px; border-radius:13px; transition:background .16s ease, transform .16s ease; }
.track:hover { background:rgba(255,255,255,.08); transform:translateX(2px); }
.album-thumb { width:56px; height:56px; border-radius:10px; background:linear-gradient(145deg,#141725,#7250a1 52%,#ef6d76); box-shadow:0 8px 17px rgba(0,0,0,.2); }
.album-thumb.ember { background:linear-gradient(145deg,#1b1514,#7b3020,#e7a24e); }
.album-thumb.violet { background:linear-gradient(145deg,#15142b,#512a76,#9d6cff); }
.album-thumb.aqua { background:linear-gradient(145deg,#0c1e26,#137783,#57d7ca); }
.track strong { font-size:13px; } .track small { display:block; margin-top:3px; color:var(--muted); }
.track time { color:var(--muted); font-size:12px; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:10px; }
.photo-tile { aspect-ratio: 4/3; border:0; border-radius:14px; padding:0; position:relative; overflow:hidden; box-shadow:0 12px 25px rgba(0,0,0,.2); background:var(--photo-bg); cursor:zoom-in; }
.photo-tile::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.54)); }
.photo-tile::after { content:""; position:absolute; width:70%; height:80%; left:10%; top:10%; border-radius:50%; background:rgba(255,255,255,.12); filter:blur(18px); transform:rotate(24deg); }
.photo-tile span { position:absolute; z-index:2; left:12px; bottom:10px; font-size:12px; font-weight:650; }
.photo-1 { --photo-bg:linear-gradient(145deg,#1c1e32,#4c6ca5,#d18b8f); }.photo-2{--photo-bg:linear-gradient(145deg,#091329,#183e6f,#d06b69)}.photo-3{--photo-bg:linear-gradient(145deg,#1d1818,#665342,#d5b98b)}.photo-4{--photo-bg:linear-gradient(145deg,#101621,#215c6f,#77cbd0)}.photo-5{--photo-bg:linear-gradient(145deg,#171318,#6c3854,#c390b4)}.photo-6{--photo-bg:linear-gradient(145deg,#0e1e1b,#2d6e5c,#b8d278)}
.project-gallery { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:14px; }
.project-card { border-radius:18px; padding:16px; display:grid; grid-template-columns:92px 1fr; gap:15px; align-items:center; background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.12); transition:transform .18s var(--ease), background .18s; }
.project-card:hover { transform:translateY(-2px); background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); }
.project-mark { aspect-ratio:1; border-radius:20px; display:grid; place-items:center; font-size:24px; font-weight:820; letter-spacing:-.08em; background:linear-gradient(145deg,rgba(139,187,255,.82),rgba(107,93,226,.72) 55%,rgba(34,31,92,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 14px 30px rgba(0,0,0,.22); }
.project-card:nth-child(2n) .project-mark { background:linear-gradient(145deg,rgba(255,159,202,.82),rgba(125,96,224,.78) 55%,rgba(53,31,91,.9)); }
.project-card h3 { margin:0 0 5px; font-size:15px; }.project-card .category { font-size:11px; color:#a8c4ff; }.project-card p { color:var(--muted); font-size:12px; line-height:1.45; margin:8px 0 10px; }
.open-link { color:#fff; text-decoration:none; font-size:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09); }
.open-link:hover { background:rgba(255,255,255,.14); }
.bookshelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px; padding:10px 6px 30px; align-items:end; position:relative; }
.bookshelf::after { content:""; position:absolute; left:0; right:0; bottom:10px; height:13px; border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)); box-shadow:0 13px 23px rgba(0,0,0,.25); }
.book { text-align:center; z-index:1; }
.book-cover { width:150px; aspect-ratio: .7; margin:0 auto 15px; border-radius:7px 14px 14px 7px; display:flex; flex-direction:column; justify-content:space-between; padding:18px 15px; text-align:left; background:linear-gradient(145deg,#f2c08a,#b96d5d 55%,#58334a); box-shadow: inset 6px 0 0 rgba(52,22,32,.22), inset 0 1px 0 rgba(255,255,255,.45), 12px 20px 26px rgba(0,0,0,.28); transform:perspective(500px) rotateY(-5deg); transition:transform .2s var(--ease); }
.book:hover .book-cover { transform:perspective(500px) rotateY(0deg) translateY(-4px); }
.book:nth-child(2) .book-cover { background:linear-gradient(145deg,#7bb9d4,#515ca7 55%,#282b65); }
.book-cover b { font-size:25px; letter-spacing:-.05em; }.book-cover small { color:rgba(255,255,255,.78); }
.book h3 { margin:0 0 4px; font-size:14px; }.book p { margin:0; color:var(--muted); font-size:11px; }
.media-strip { display:flex; gap:18px; overflow-x:auto; padding:10px 4px 24px; scroll-snap-type:x mandatory; }
.media-item { flex:0 0 190px; scroll-snap-align:start; }
.media-cover { position:relative; aspect-ratio:.72; border-radius:18px; display:flex; align-items:flex-end; padding:15px; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:linear-gradient(145deg,#151727,#4d5da9 55%,#d05b83); box-shadow:0 18px 38px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.28); transform-style:preserve-3d; transition:transform .22s var(--ease), box-shadow .22s; }
.media-item:nth-child(2n) .media-cover { background:linear-gradient(145deg,#142421,#3e7d66 52%,#d9a44a); }.media-item:nth-child(3n) .media-cover{background:linear-gradient(145deg,#2a1716,#9b4639 55%,#e0aa61)}
.media-cover::before { content:""; position:absolute; width:120%; height:45%; left:-10%; top:-10%; background:linear-gradient(180deg,rgba(255,255,255,.25),transparent); transform:rotate(-10deg); }
.media-cover:hover { transform:perspective(600px) rotateX(3deg) rotateY(-5deg) translateY(-5px); box-shadow:22px 26px 45px rgba(0,0,0,.31); }
.media-code { font-size:34px; font-weight:850; letter-spacing:-.08em; text-shadow:0 7px 18px rgba(0,0,0,.28); }
.media-item h3 { margin:11px 0 4px; font-size:14px; }.media-item p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }.media-meta { margin-top:5px; color:#b8c8ff; font-size:10px; }
.media-button { width:100%; text-align:left; padding:0; background:transparent; border:0; color:inherit; cursor:pointer; }
.viewer-backdrop, .detail-backdrop { position:fixed; z-index:9900; inset:0; display:grid; place-items:center; background:rgba(5,8,18,.58); backdrop-filter:blur(18px) saturate(120%); animation:viewerIn .2s ease; }
.viewer-backdrop.hidden, .detail-backdrop.hidden { display:none; }
@keyframes viewerIn { from { opacity:0; } }
.photo-stage { width:min(82vw,1000px); max-height:82vh; border-radius:23px; padding:12px; margin:0; background:rgba(22,29,48,.48); }
.photo-stage img { display:block; width:100%; height:min(68vh,720px); object-fit:cover; border-radius:16px; background:linear-gradient(145deg,#222b52,#8f5b8e,#54a7a9); }
.photo-stage figcaption { padding:12px 6px 4px; font-size:13px; color:var(--muted); }
.viewer-close, .viewer-nav { position:fixed; border:0; color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; cursor:pointer; }
.viewer-close { right:24px; top:24px; width:40px; height:40px; border-radius:50%; font-size:24px; }.viewer-nav { top:50%; width:46px; height:62px; transform:translateY(-50%); border-radius:16px; font-size:34px; }.viewer-prev{left:20px}.viewer-next{right:20px}
.detail-card { width:min(680px,90vw); border-radius:26px; padding:24px; position:relative; background:linear-gradient(145deg,rgba(45,50,75,.76),rgba(20,26,49,.68)); }
.detail-close { position:absolute; right:16px; top:16px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:20px; }
.detail-hero { height:220px; border-radius:19px; display:flex; align-items:flex-end; padding:22px; background:linear-gradient(145deg,#20162f,#74487f 55%,#3a8e9b); font-size:56px; font-weight:850; letter-spacing:-.08em; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.detail-card h2 { margin:20px 0 6px; font-size:28px; }.detail-card p { color:var(--muted); line-height:1.6; }.detail-chip { display:inline-block; padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); font-size:11px; margin-right:6px; }
.dock-wrap { position:fixed; z-index:8800; left:50%; bottom:max(10px, env(safe-area-inset-bottom)); transform:translateX(-50%); }
.dock { min-height:68px; display:flex; align-items:flex-end; gap:7px; padding:8px 10px 9px; border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 50px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.26); }
.dock-app { position:relative; width:52px; height:52px; border:0; padding:0; background:transparent; transition:transform .11s ease; transform-origin:center bottom; cursor:default; }
.dock-app:hover { transform:translateY(-8px) scale(1.28); z-index:4; }
.dock-app:hover + .dock-app, .dock-app:has(+ .dock-app:hover) { transform:translateY(-3px) scale(1.10); }
.dock-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(218,230,255,.78)); color:#233455; box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 8px 18px rgba(0,0,0,.25); overflow:hidden; position:relative; }
.dock-icon::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 48%); }
.dock-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; z-index:1; }
.dock-app:nth-child(2) .dock-icon{background:linear-gradient(145deg,#d7ebff,#768aff);}.dock-app:nth-child(3) .dock-icon{background:linear-gradient(145deg,#fff,#ffd5e9 50%,#7cd4ff)}.dock-app:nth-child(4) .dock-icon{background:linear-gradient(145deg,#ffbed5,#ff5d7d)}.dock-app:nth-child(5) .dock-icon{background:linear-gradient(145deg,#ffd9a6,#d67553)}.dock-app:nth-child(6) .dock-icon{background:linear-gradient(145deg,#d8ffd9,#4fbd77)}.dock-app:nth-child(7) .dock-icon{background:linear-gradient(145deg,#e6d5ff,#9f6aec)}
.dock-app::after { content:""; position:absolute; left:50%; bottom:-6px; width:4px; height:4px; transform:translateX(-50%); border-radius:50%; background:#fff; opacity:0; box-shadow:0 0 6px rgba(255,255,255,.6); }
.dock-app.active::after { opacity:1; }
.dock-app.bounce { animation:dockBounce .44s var(--ease); }
@keyframes dockBounce { 0%,100%{transform:translateY(0)} 38%{transform:translateY(-18px)} 66%{transform:translateY(-5px)} }
.tooltip { position:absolute; left:50%; bottom:65px; transform:translateX(-50%); background:rgba(25,29,43,.76); color:#fff; border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(12px); border-radius:8px; padding:5px 8px; white-space:nowrap; font-size:11px; opacity:0; pointer-events:none; transition:.12s; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.dock-app:hover .tooltip, .dock-app:focus-visible .tooltip { opacity:1; }
.finder-face { position:relative; width:100%; height:100%; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.finder-face::before, .finder-face::after { content:""; position:absolute; top:14px; width:5px; height:9px; border-radius:50%; background:#132b50; }.finder-face::before{left:16px}.finder-face::after{right:16px}.finder-side-a{background:#69a9f4}.finder-side-b{background:#e5f2ff}.finder-smile{position:absolute;left:50%;top:26px;width:16px;height:9px;transform:translateX(-50%);border-bottom:2px solid #15345c;border-radius:0 0 20px 20px;z-index:2}
.empty-note { padding:22px; border-radius:15px; background:rgba(255,255,255,.05); color:var(--muted); border:1px dashed rgba(255,255,255,.12); text-align:center; }
@media (max-width: 820px) {
  :root { --menu-h: 42px; --dock-h: 74px; }
  .menu-bar { padding:0 9px; }
  .menu-trigger:not(.apple-mark):not(.menu-owner) { display:none; }
  .menu-owner { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-clock { min-width:auto; }
  .desktop-icons { inset: 24px 12px calc(var(--dock-h) + 32px); grid-template-columns: repeat(3, minmax(82px,1fr)); grid-auto-rows:115px; justify-items:center; gap:8px 4px; }
  .desktop-icon { width:100%; }
  .finder-window { min-width:0; min-height:0; width:calc(100% - 16px); height:calc(100dvh - var(--menu-h) - var(--dock-h) - 26px); left:8px !important; top:8px !important; border-radius:19px; resize:none; }
  .finder-window.maximized { inset:8px 8px calc(var(--dock-h) + 18px)!important; }
  .window-toolbar { height:58px; padding:0 12px; }
  .window-content { height:calc(100% - 58px); padding:16px; }
  .view-pill { display:none; }
  .music-layout { grid-template-columns:1fr; }
  .now-playing { position:relative; min-height:auto; }
  .big-album { width:170px; }
  .photo-grid { grid-template-columns:repeat(2,minmax(110px,1fr)); }
  .project-gallery { grid-template-columns:1fr; }
  .project-card { grid-template-columns:74px 1fr; }
  .dock { gap:4px; padding:7px 8px 8px; border-radius:20px; max-width:calc(100vw - 16px); }
  .dock-app, .dock-icon { width:43px; height:43px; }.dock-icon{border-radius:12px}.dock-icon svg{width:23px;height:23px}.dock-app:hover{transform:none}.dock-app:hover + .dock-app,.dock-app:has(+ .dock-app:hover){transform:none}.tooltip{display:none}
  .media-item { flex-basis:160px; }
  .viewer-nav { width:38px; height:52px; }.viewer-prev{left:7px}.viewer-next{right:7px}.viewer-close{right:12px;top:12px}.photo-stage{width:88vw}.photo-stage img{height:58vh}
}
@media (max-width: 420px) {
  .hide-small { display:none !important; }
  .menu-right { gap:6px; }
  .desktop-icons { grid-template-columns: repeat(2, minmax(90px,1fr)); grid-auto-rows:112px; }
  .folder-art { width:69px; height:53px; }
  .dock { gap:3px; }.dock-app,.dock-icon{width:40px;height:40px}.dock-icon svg{width:21px;height:21px}
  .traffic-lights { gap:7px; margin-right:10px; }.traffic{width:12px;height:12px}.window-subtitle{display:none}.window-title{font-size:13px}
  .library-header { align-items:start; }.collection-count{display:none}.photo-grid{grid-template-columns:1fr 1fr;gap:7px}.project-card{grid-template-columns:60px 1fr;padding:12px}.project-mark{border-radius:16px;font-size:20px}.media-item{flex-basis:145px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}