* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: radial-gradient(ellipse 760px 520px at 88% -8%, var(--ambient-cyan), transparent 72%), radial-gradient(ellipse 560px 420px at 5% 48%, var(--ambient-rose), transparent 76%), radial-gradient(ellipse 620px 500px at 94% 88%, var(--ambient-gold), transparent 78%), var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; transition: background-color .45s ease, color .35s ease; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; border: 0; cursor: pointer; }
.app-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 74px; display: flex; align-items: center; gap: 28px; padding: 12px clamp(18px, 4vw, 64px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; letter-spacing: .02em; }
.brand strong { display: block; font-size: 15px; }.brand small { display: block; color: var(--muted); font: 9px var(--mono); letter-spacing: .13em; }
.brand-mark { display: block; flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }.main-nav a { display: flex; align-items: center; gap: 7px; padding: 9px 12px; color: var(--muted); font-size: 13px; border-radius: 8px; transition: color .18s, background .18s, transform .18s; }.main-nav a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.main-nav a:hover, .main-nav a.active { color: var(--cyan); background: var(--cyan-soft); }.main-nav a:hover svg { transform: translateY(-1px); }
.top-actions { display: flex; align-items: center; gap: 10px; }.icon-button, .text-button { width: 40px; min-width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); transition: color .2s, border-color .2s, background .2s, transform .2s, box-shadow .2s; }.icon-button { position: relative; overflow: hidden; }.icon-button svg { position: absolute; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .22s ease, transform .48s cubic-bezier(.2,.8,.2,1); }.icon-button .moon-icon { opacity: 1; transform: rotate(0) scale(1); }.icon-button .sun-icon { opacity: 0; transform: rotate(-90deg) scale(.55); }.text-button { padding: 0; font: 14px var(--mono); letter-spacing: 0; }.icon-button:hover, .text-button:hover { border-color: var(--line-strong); color: var(--cyan); background: var(--surface-3); box-shadow: 0 4px 15px var(--cyan-soft); transform: translateY(-1px); }.icon-button:active, .text-button:active { transform: scale(.95); }
[data-theme="light"] .icon-button .moon-icon { opacity: 0; transform: rotate(90deg) scale(.55); } [data-theme="light"] .icon-button .sun-icon { opacity: 1; transform: rotate(0) scale(1); }
.icon-button.theme-switching { animation: theme-button-pop .48s cubic-bezier(.2,.85,.3,1); }
@keyframes theme-button-pop { 0% { transform: scale(1) rotate(0); } 38% { transform: scale(.86) rotate(-12deg); } 72% { transform: scale(1.12) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .48s; }
::view-transition-old(root) { animation-name: theme-old-out; }
::view-transition-new(root) { animation-name: theme-new-in; }
@keyframes theme-old-out { to { opacity: .82; filter: saturate(.72); } }
@keyframes theme-new-in { from { opacity: .82; filter: saturate(1.18); } }
.main-content { width: min(1440px, 100%); flex: 1; margin: 0 auto; padding: 42px clamp(18px, 4vw, 64px) 70px; }.footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px clamp(18px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }.footer a { color: var(--cyan); }
#ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .4; pointer-events: none; mix-blend-mode: screen; transition: opacity .4s; }
[data-theme="light"] #ambient-canvas { opacity: .13; mix-blend-mode: multiply; }
@media (max-width: 760px) { .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 40px auto; align-items: center; gap: 7px 10px; min-width: 0; min-height: 0; padding: 8px 12px 7px; }.brand { grid-column: 1; grid-row: 1; min-width: 0; gap: 7px; }.brand-mark { flex: 0 0 34px; width: 34px; height: 34px; }.brand small { font-size: 8px; }.top-actions { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; gap: 6px; }.icon-button, .text-button { width: 36px; min-width: 36px; height: 36px; }.main-nav { grid-column: 1 / -1; grid-row: 2; order: initial; display: flex; width: 100%; min-width: 0; margin: 0; padding: 0 0 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }.main-nav::-webkit-scrollbar { display: none; }.main-nav a { flex: 0 0 36px; justify-content: center; gap: 0; padding: 7px 4px; white-space: nowrap; }.main-nav a span { display: none; }.main-nav a svg { display: block; width: 17px; height: 17px; }.main-content { min-width: 0; padding: 24px 14px 44px; }.footer { flex-direction: column; gap: 7px; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); } }