:root { color-scheme: light; --paper:#fcfff1; --background:#e7f6c4; --ink:#24370e; --muted:#566d36; --line:#c9df9d; --accent:#487a08; --lime:#b8ef40; --hover:#e7f7c4; --placeholder:#eff8d9; }
:root[data-theme="dark"] { color-scheme:dark; --paper:#1c2715; --background:#121a0d; --ink:#edf5df; --muted:#b5c5a1; --line:#3d5030; --hover:#2c3d20; --placeholder:#24331b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--background); color:var(--ink); font:16px/1.65 'Nunito',sans-serif; }
.den { width:min(100% - 48px,1040px); margin:0 auto; padding:42px 0; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 8px 26px; }
.brand { display:flex; align-items:center; gap:16px; }
.brand img { display:block; width:60px; height:60px; }
.brand span { font-weight:800; font-size:1rem; letter-spacing:.1em; }
.controls { display:flex; gap:12px; }
button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:50%; background:var(--hover); color:var(--ink); font:800 .875rem 'Nunito',sans-serif; cursor:pointer; transition:border-color .18s,background .18s; }
button:hover { border-color:var(--accent); }
.theme-moon { display:none; }
[data-theme="dark"] .theme-sun { display:none; }
[data-theme="dark"] .theme-moon { display:block; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:30px; padding:56px; animation:arrive .6s ease both; }
.hero { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; align-items:center; }
p { margin:0; }
.greeting { margin:0 0 18px; line-height:1.12; font-size:clamp(2rem,3.2vw,2.8rem); letter-spacing:-.035em; font-weight:800; }
.description { color:var(--muted); max-width:46ch; white-space:pre-line; }
.wave-frame { position:relative; display:grid; place-items:center; aspect-ratio:1; }
.wave { display:block; width:90%; height:auto; }
.social-section { container-type:inline-size; margin-top:42px; padding-top:28px; border-top:1px solid var(--line); }
.social-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
h2 { margin:0; font-size:1.375rem; font-weight:800; letter-spacing:-.02em; }
.social-links { display:grid; grid-template-columns:repeat(6,minmax(44px,1fr)); gap:12px; }
.social-button { position:relative; display:flex; justify-content:center; align-items:center; min-height:58px; background:var(--lime); color:#24370e; border:1px solid transparent; border-radius:999px; text-decoration:none; transition:background .18s,color .18s,transform .18s; }
.social-logo { width:27px; height:27px; flex-shrink:0; }
.social-button:hover, .social-button:focus-visible { background:#487a08; color:#fcfff1; transform:translateY(-3px); }
.social-tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(3px); padding:4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font-size:.875rem; font-weight:700; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,transform .18s,visibility .18s; white-space:nowrap; }
.social-button:hover .social-tooltip, .social-button:focus-visible .social-tooltip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
footer { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:32px; color:var(--muted); font-size:.8125rem; }
footer span:last-child { letter-spacing:.08em; font-weight:700; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media (pointer:fine) { html,body { cursor:url('cur/vobiiCursor-normal-48.webp') 5 7,url('cur/vobiiCursor-normal-48.png') 5 7,default; } a,button { cursor:url('cur/vobiiCursor-select-48.webp') 5 7,url('cur/vobiiCursor-select-48.png') 5 7,pointer; } }
@keyframes arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
::view-transition-old(root),::view-transition-new(root) { animation-duration:.3s; }
@media (max-width:760px) { .den { width:min(100% - 28px,580px); padding:22px 0; } .panel { padding:28px; border-radius:24px; } .hero { display:flex; flex-direction:column; align-items:stretch; gap:24px; } .wave-frame { width:180px; align-self:center; } .social-section { margin-top:30px; } .social-links { gap:6px; } .site-header { margin:0 0 18px; gap:10px; } .brand { gap:10px; } .brand img { width:44px; height:44px; } .brand span { font-size:.8125rem; letter-spacing:.065em; } .controls { gap:8px; } }
@media(max-width:380px) { .panel { padding:24px; } .brand span { max-width:110px; font-size:.75rem; } }
@container (width < 318px) { .social-links { grid-template-columns:1fr; gap:10px; } .social-button { justify-content:flex-start; gap:14px; padding:12px 20px; min-height:52px; } .social-tooltip { order:1; position:static; transform:none!important; border:0; padding:0; background:transparent; color:inherit; opacity:1; visibility:visible; font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }