@layer components{.dh{flex-direction:column;display:flex;position:relative;overflow-x:clip}.dh__ink{z-index:0;pointer-events:none;opacity:.45;position:absolute;inset:0}.dh__main{z-index:1;flex-direction:column;flex:1 0 auto;justify-content:safe center;gap:clamp(10px,2.4vh,28px);width:100%;max-width:760px;margin:0 auto;padding:clamp(6px,1.6vh,24px) 20px clamp(16px,3vh,32px);display:flex;position:relative}.dh__stage{flex-direction:column;flex:1 1 0;justify-content:safe center;gap:clamp(10px,2.4vh,28px);min-height:min-content;display:flex}.dh__head{flex-direction:column;justify-content:center;align-items:center;gap:clamp(6px,1.4vh,14px);display:flex}.dh__mascot{flex:none;display:grid}.dh__mascot[data-mode=online]{aspect-ratio:1520/680;width:min(100vw - 40px,2.235*min(15vh,170px))}.dh__mascot[data-mode=local]{aspect-ratio:864/1120;height:min(15vh,170px)}.dh__mascot-in{width:100%;height:100%;animation:dh-in var(--vr-t-lift) var(--vr-ease-lift) both;display:block}.dh__title{font:400 min(48px, 7vh, 12vw) / 1 var(--vr-font-brand);color:var(--vr-acc);margin:0}.dh__tabs{border-radius:var(--vr-r-field);border:1px solid var(--vr-line2);background:var(--vr-card2);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%;max-width:440px;margin:clamp(8px,1.8vh,20px) auto 0;padding:4px;display:grid;position:relative}.dh__cursor{border-radius:var(--vr-r-icon);background:var(--vr-cta);width:calc(50% - 4px);transform:translateX(calc(var(--dh-i) * 100%));transition:transform var(--vr-t-lift) var(--vr-ease-spring);position:absolute;top:4px;bottom:4px;left:4px}.dh__tab{border-radius:var(--vr-r-icon);height:40px;color:var(--vr-mute);font:500 14px / 1 var(--vr-font);cursor:pointer;transition:background-color var(--vr-t-color) ease, color var(--vr-t-color) ease, transform var(--vr-t-lift) var(--vr-ease-spring), box-shadow var(--vr-t-lift) ease;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;display:flex;position:relative}.dh__tab[aria-selected=true]{color:var(--vr-cta-ink)}.dh__tab:active{transform:scale(.96)}.dh__tab-icon{transition:transform calc(var(--vr-t-lift) * 2) var(--vr-ease-spring);display:grid}@media (hover:hover){.dh__tab:hover:not([aria-selected=true]){color:var(--vr-ink);background:color-mix(in srgb, var(--vr-acc2) 16%, transparent);box-shadow:0 8px 18px -10px var(--vr-acc2);transform:translateY(-1px)}.dh__tab:hover .dh__tab-icon{transform:rotate(360deg)scale(1.15)}.dh__tab[data-mode=local]:hover .dh__tab-icon{transform:translateY(-2px)rotate(-8deg)scale(1.18)}}.dh__panel{animation:dh-in var(--vr-t-lift) var(--vr-ease-lift) both;flex-direction:column;gap:10px;display:flex}@keyframes dh-in{0%{opacity:0;transform:translateY(8px)scale(.96)}}@media (prefers-reduced-motion:reduce){.dh__cursor,.dh__tab,.dh__tab-icon{transition:none}.dh__mascot-in,.dh__panel{animation:none}}}
@layer components{.dh__desc{text-align:center;font:400 15px / 1.45 var(--vr-font);color:var(--vr-mute);text-wrap:balance;margin:0 0 4px}.dh__actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;display:grid}.dh__btn{border-radius:var(--vr-r-card);cursor:pointer;height:clamp(44px,6.2vh,56px);transition:transform var(--vr-t-lift) var(--vr-ease-spring), opacity var(--vr-t-color) ease, border-color var(--vr-t-color) ease;border:1px solid #0000;justify-content:center;align-items:center;gap:10px;text-decoration:none;display:flex}.dh__btn:active{transform:scale(.97)}.dh__btn--main{background:var(--vr-cta);color:var(--vr-cta-ink);font:400 16px / 1 var(--vr-font-brand)}.dh__btn--ghost{border-color:var(--vr-line);color:var(--vr-ink);font:500 15px / 1 var(--vr-font);background:0 0}.dh__btn-icon{transition:transform calc(var(--vr-t-lift) * 2) var(--vr-ease-spring);display:grid}@media (hover:hover){.dh__btn:hover{transform:translateY(-2px)}.dh__btn--main:hover{color:var(--vr-cta-ink);opacity:.92}.dh__btn--ghost:hover{color:var(--vr-ink);border-color:currentColor}.dh__btn[data-icon=create]:hover .dh__btn-icon{transform:rotate(90deg)scale(1.25)}.dh__btn[data-icon=join]:hover .dh__btn-icon{transform:rotate(-35deg)scale(1.2)}.dh__btn[data-icon=resume]:hover .dh__btn-icon{transform:translate(3px)scale(1.2)}}@media (prefers-reduced-motion:reduce){.dh__btn,.dh__btn-icon{transition:none}}}
@layer components{.dh__shorts{flex:none;justify-content:center;gap:clamp(32px,8vw,64px);display:flex}.dh__short{color:var(--vr-ink);flex-direction:column;align-items:center;gap:10px;text-decoration:none;display:flex}.dh__short-disc{aspect-ratio:1;border-radius:var(--vr-r-pill);background:var(--vr-acc);width:clamp(58px,9vh,76px);color:var(--vr-cta-ink);box-shadow:0 16px 30px -12px var(--vr-acc2-a90), inset 0 -8px 14px color-mix(in srgb, var(--vr-acc2) 50%, transparent);transition:transform var(--vr-t-lift) var(--vr-ease-spring);place-items:center;display:grid;position:relative}.dh__short:active .dh__short-disc{transform:scale(.96)}.dh__short-count{border-radius:var(--vr-r-pill);border:3px solid var(--vr-bg);background:var(--vr-ink);min-width:28px;height:28px;color:var(--vr-bg);font:600 12px / 1 var(--vr-font);place-items:center;padding:0 8px;display:grid;position:absolute;top:-3px;right:-8px}.dh__short-title{font:600 14px / 1 var(--vr-font)}@media (hover:hover){.dh__short:hover{color:var(--vr-ink)}.dh__short:hover .dh__short-disc{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.dh__short-disc{transition:none}}}