/* == tokens.css == */
:root{
--s0:#0A0908;   
--s1:#131110;   
--s2:#201E1A;   
--s3:#282523;   
--s4:#312D2A;   
--s5:#36322F;   
--glass: var(--yz-glass, rgba(15,14,13,.78));
--overlay: var(--yz-overlay, rgba(10,9,8,.72));
--hero: var(--yz-accent, #d97757);
--hero-hi: var(--yz-accent-hi, #e88a68);
--hero-lo: var(--yz-accent-soft, rgba(217,119,87,.14));
--hero-mid: var(--yz-accent-deep, #b05730);
--hero-line: var(--yz-accent-line, rgba(217,119,87,.42));
--hero-grad: var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e));
--on-hero: color-mix(in srgb, var(--yz-accent, #d97757) 20%, #000);
--t1: var(--yz-text, #faf9f5);
--t2: var(--yz-dim, #b9b4a7);
--t3: var(--yz-muted, #8d8878);
--hair:  var(--yz-border, rgba(250,249,245,.08));
--hair2: var(--yz-border-strong, rgba(250,249,245,.17));
--hair3: color-mix(in srgb, var(--yz-border-strong, rgba(250,249,245,.17)) 100%, var(--yz-text, #faf9f5) 12%);
--mark: var(--yz-gold, #e2b13c);
--win:  var(--yz-success, #58a76b);
--lose: var(--yz-danger, #e5484d);
--info: var(--yz-info, #4c8dff);
--sh-sm: var(--yz-shadow-sm, 0 2px 8px rgba(0,0,0,.28));
--sh-md: var(--yz-shadow-md, 0 10px 30px -12px rgba(0,0,0,.5));
--sh-lg: var(--yz-shadow-lg, 0 24px 60px -18px rgba(0,0,0,.65));
--sh-hero: var(--yz-accent-glow, 0 8px 26px rgba(217,119,87,.35));
--focus: var(--yz-info, #4c8dff);
--focus-w: 2px;
--focus-off: 2px;
--r-xs: 3px;
--r-sm: var(--yz-r-sm, 10px);
--r-md: var(--yz-r-lg, 22px);
--r-lg: var(--yz-r-xl, 28px);
--r-full: var(--yz-r-pill, 999px);
--sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
--sp5:20px; --sp6:24px; --sp7:32px; --sp8:48px;
--e-out: var(--yz-ease, cubic-bezier(.22,1,.36,1));
--e-effect: var(--yz-ease, cubic-bezier(.22,1,.36,1));
--e-in: cubic-bezier(.4,0,1,1);
--e-spring: var(--yz-spring, cubic-bezier(.34,1.45,.5,1));
--e-spring-soft: var(--yz-ease, cubic-bezier(.22,1,.36,1));
--e-bounce: var(--yz-spring, cubic-bezier(.34,1.45,.5,1));
--d-micro:140ms; --d-std:200ms; --d-sheet:280ms; --d-spring:380ms;
--f-ui:      var(--yz-font-ui, 'Inter', system-ui, sans-serif);
--f-display: var(--yz-font-display, 'Unbounded', 'Inter', sans-serif);
--f-serif:   'Source Serif 4', Georgia, serif;   
--f-num:     var(--yz-font-display, 'Unbounded', 'Inter', sans-serif);
--f-hand:    'Caveat', cursive;
--fs-hero:30px;
--fs-title:20px;
--fs-body:15px;
--fs-small:13px;
--fs-over:10px;
--fs-hand:20px;
--lh-tight:1.2; --lh-body:1.55;
--ls-over:.12em;
--r-in: calc(var(--r-md) - var(--sp3));
--d-exit-micro: calc(var(--d-micro)*.8);
--d-exit-std:   calc(var(--d-std)*.8);
--d-exit-sheet: calc(var(--d-sheet)*.8);
--ctl:44px;
--ctl-lg:52px;
--ctl-vis:36px;
--ctl-xs:28px;
--mono:52px;
--mono-lg:88px;
--mono-sm:32px;
--col:660px;
--wide:1180px;
--sat: var(--safe-top, env(safe-area-inset-top, 0px));
--sab: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
--sal: var(--safe-left, env(safe-area-inset-left, 0px));
--sar: var(--safe-right, env(safe-area-inset-right, 0px));
--kb:0px;
--nav-gap: calc(88px + var(--sab));
}
html[data-yz-theme="cloud"]{
--s0: var(--yz-bg, #f4f2ec);
--s1: var(--yz-bg-deep, #ebe8e0);
--s2: var(--yz-surface, #ffffff);
--s3: var(--yz-surface-2, #faf9f4);
--s4: color-mix(in srgb, var(--yz-surface-2, #faf9f4) 88%, var(--yz-text, #232019));
--s5: var(--yz-surface, #ffffff);
}
html[data-yz-theme="midnight"]{
--s0:#070A0F; --s1:#0C1016; --s2:#12171F; --s3:#1A2029; --s4:#232A35; --s5:#283040;
}
@media (min-width: 900px){
:root{
--fs-hero:38px;
--fs-title:23px;
--fs-body:16px;
--fs-small:14px;
--mono:56px;
--mono-lg:104px;
--nav-gap: 32px;   
}
}
@media (prefers-reduced-transparency: reduce){
:root{
--hair:  var(--yz-border-strong, rgba(250,249,245,.17));
--hair2: var(--yz-border-strong, rgba(250,249,245,.17));
}
}

/* == ui.css == */
.pv-body{
margin:0; min-height:100dvh;
background:var(--s0); color:var(--t1);
font-family:var(--f-ui); font-size:var(--fs-body); line-height:var(--lh-body);
-webkit-font-smoothing:antialiased; overflow-x:hidden;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
*, *::before, *::after{ box-sizing:border-box; }
.pv-shell{ max-width:var(--col); margin:0 auto; padding:0 var(--sp4); }
.pv-shell.wide{ max-width:var(--wide); }
.pv-hidden{ display:none !important; }
a.pv-plain{ color:inherit; text-decoration:none; }
.pv-hair-top{ border-top:1px solid var(--hair); }
html{ scroll-padding-top:calc(var(--ctl-lg) + var(--sat)); scroll-padding-bottom:var(--sp8); }
.pv-btn, .pv-iconbtn, .pv-seg button, .pv-chip, .pv-act, .pv-switch,
.pv-tab, .pv-sheet-close, .pv-toast-act{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
user-select:none; -webkit-user-select:none;
font-family:var(--f-ui);
}
.pv-btn:focus-visible, .pv-iconbtn:focus-visible, .pv-seg button:focus-visible,
.pv-chip:focus-visible, .pv-act:focus-visible, .pv-switch:focus-visible,
.pv-input:focus-visible, .pv-tab:focus-visible, a.pv-plain:focus-visible,
.pv-sheet-close:focus-visible, .pv-toast-act:focus-visible, [data-focusring]:focus-visible{
outline:var(--focus-w) solid var(--focus);
outline-offset:var(--focus-off);
border-radius:var(--r-sm);
}
.pv-input:focus-visible{ border-radius:var(--r-md); }
.pv-btn:focus-visible, .pv-iconbtn:focus-visible, .pv-chip:focus-visible{ border-radius:var(--r-full); }
.pv-hit{ position:relative; }
.pv-hit::after{
content:''; position:absolute; left:50%; top:50%;
width:max(100%, var(--ctl)); height:max(100%, var(--ctl));
transform:translate(-50%, -50%);
}
.pv-over{
font:600 var(--fs-over)/1 var(--f-display); letter-spacing:var(--ls-over);
text-transform:uppercase; color:var(--t3);
}
.pv-hero-title{
font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif);
color:var(--t1); margin:0; text-wrap:balance;
}
.pv-title{
font:600 var(--fs-title)/var(--lh-tight) var(--f-serif);
color:var(--t1); margin:0; text-wrap:balance;
}
.pv-dim{ color:var(--t2); }
.pv-faint{ color:var(--t3); }
.pv-small{ font-size:var(--fs-small); }
.pv-hand{ font:500 var(--fs-hand)/1.3 var(--f-hand); color:var(--t2); }
.pv-num{ font-family:var(--f-num); font-weight:600; font-variant-numeric:tabular-nums; }
.pv-prose{ text-wrap:pretty; }
.pv-sr{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pv-btn{
position:relative;
display:inline-flex; align-items:center; justify-content:center; gap:var(--sp2);
min-height:var(--ctl); padding:0 var(--sp5);
border:0; border-radius:var(--r-full); cursor:pointer;
background:var(--hero); color:var(--on-hero);
font:600 var(--fs-body)/1 var(--f-ui);
transition:transform var(--d-micro) var(--e-spring-soft),
opacity var(--d-micro) var(--e-effect),
background var(--d-micro) var(--e-effect),
filter var(--d-micro) var(--e-effect);
text-decoration:none; white-space:nowrap;
}
@media (hover:hover){
.pv-btn:hover:not(:disabled):not([data-loading]){ filter:brightness(1.08); }
}
.pv-btn:active:not(:disabled):not([data-loading]){ transform:scale(.97); filter:brightness(1.14); }
.pv-btn.lg:not(.ghost):not(.line):not(.quiet):not(.soft):not(.danger){ box-shadow:var(--sh-hero); }
.pv-btn.lg{ min-height:var(--ctl-lg); padding:0 var(--sp7); font-size:var(--fs-body); }
.pv-btn.sm{ min-height:var(--ctl); padding:0 var(--sp4); font-size:var(--fs-small); }
.pv-btn.ghost{ background:var(--s3); color:var(--t1); }
.pv-btn.soft{ background:var(--hero-lo); color:var(--t1); border:1px solid var(--hair2); }
.pv-btn.line{ background:transparent; color:var(--t2); border:1px solid var(--hair2); }
.pv-btn.quiet{ background:transparent; color:var(--t2); }
.pv-btn.danger{ background:transparent; color:var(--lose); border:1px solid var(--hair2); }
.pv-btn.wide{ width:100%; }
.pv-btn .pv-ic{ flex:none; }
.pv-btn:disabled, .pv-btn[aria-disabled="true"]{
opacity:.45; cursor:not-allowed; transform:none; filter:none;
}
.pv-btn[data-loading]{ cursor:progress; color:transparent; }
.pv-btn[data-loading] > *{ visibility:hidden; }
.pv-btn[data-loading]::after{
content:''; position:absolute; left:50%; top:50%;
width:18px; height:18px; margin:-9px 0 0 -9px;
border:2px solid currentColor; border-top-color:transparent;
border-radius:var(--r-full);
color:var(--on-hero);
animation:pvSpin 640ms linear infinite;
visibility:visible;
}
.pv-btn.ghost[data-loading]::after,
.pv-btn.line[data-loading]::after,
.pv-btn.quiet[data-loading]::after,
.pv-btn.soft[data-loading]::after{ color:var(--t1); }
@keyframes pvSpin{ to{ transform:rotate(360deg); } }
[data-loading]:not(.pv-btn){ opacity:.5; cursor:progress; pointer-events:none; }
button:disabled:not(.pv-btn):not(.swb):not(.pv-iconbtn){ opacity:.5; cursor:not-allowed; }
.pv-iconbtn{
width:var(--ctl); height:var(--ctl); flex:none;
display:grid; place-items:center;
border:0; border-radius:var(--r-full); cursor:pointer;
background:transparent; color:var(--t2);
transition:transform var(--d-micro) var(--e-spring-soft),
background var(--d-micro) var(--e-effect),
color var(--d-micro) var(--e-effect);
}
@media (hover:hover){ .pv-iconbtn:hover:not(:disabled){ background:var(--s2); color:var(--t1); } }
.pv-iconbtn:active:not(:disabled){ transform:scale(.92); }
.pv-iconbtn.solid{ background:var(--s3); color:var(--t1); }
.pv-iconbtn.gold{
color:var(--mark);
background:
radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--mark) 22%, transparent), transparent 72%),
var(--s3);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mark) 34%, transparent);
}
@media (hover:hover){ .pv-iconbtn.gold:hover:not(:disabled){ color:var(--mark); background:
radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--mark) 30%, transparent), transparent 72%),
var(--s3); } }
.pv-iconbtn.on{ background:var(--hero-lo); color:var(--hero); }
.pv-iconbtn:disabled{ opacity:.4; cursor:not-allowed; }
.pv-ic{ width:20px; height:20px; display:block; }
.pv-ic.sm{ width:16px; height:16px; }
.pv-ic.lg{ width:24px; height:24px; }
.pv-card{
background:var(--s2); border:1px solid var(--hair);
border-radius:var(--r-md); padding:var(--sp5);
box-shadow:var(--sh-sm);
}
.pv-card.deep{ background:var(--s1); box-shadow:none; }
.pv-card.raised{ background:var(--s3); }
.pv-card.flat{ background:transparent; }
.pv-mono{
width:var(--mono); height:var(--mono); flex:none;
display:grid; place-items:center;
background:var(--s3); border:1px solid var(--hair2);
border-radius:var(--r-full);
font-family:var(--f-serif); font-weight:700; color:var(--t1);
font-size:calc(var(--mono) * .42);
overflow:hidden; user-select:none;
}
.pv-mono.own{ border-color:var(--hero); }
.pv-mono.lg{ width:var(--mono-lg); height:var(--mono-lg); font-size:calc(var(--mono-lg) * .42); }
.pv-mono.sm{ width:var(--mono-sm); height:var(--mono-sm); font-size:calc(var(--mono-sm) * .46); }
.pv-mono img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-seg{
display:inline-flex; gap:var(--sp1); padding:var(--sp1);
background:var(--s1); border:1px solid var(--hair);
border-radius:var(--r-full);
}
.pv-seg button{
position:relative;
border:0; cursor:pointer; background:transparent; color:var(--t2);
min-height:var(--ctl-vis);
padding:0 var(--sp4); border-radius:var(--r-full);
font:600 var(--fs-small)/1 var(--f-ui);
display:inline-flex; align-items:center; justify-content:center; gap:var(--sp2);
transition:transform var(--d-micro) var(--e-spring-soft),
background var(--d-micro) var(--e-effect),
color var(--d-micro) var(--e-effect);
}
.pv-seg button::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:var(--ctl); transform:translateY(-50%);
}
.pv-seg button:active{ transform:scale(.96); }
.pv-seg button.on, .pv-seg button[aria-selected="true"]{ background:var(--s4); color:var(--t1); }
.pv-chip{
position:relative;
display:inline-flex; align-items:center; gap:var(--sp2);
min-height:var(--ctl-vis); padding:0 var(--sp4);
border-radius:var(--r-full); cursor:pointer;
background:var(--s2); border:1px solid var(--hair); color:var(--t2);
font:600 var(--fs-small)/1 var(--f-ui);
transition:transform var(--d-micro) var(--e-spring-soft),
background var(--d-micro) var(--e-effect),
color var(--d-micro) var(--e-effect),
border-color var(--d-micro) var(--e-effect);
}
.pv-chip::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:var(--ctl); transform:translateY(-50%);
}
@media (hover:hover){ .pv-chip:hover{ border-color:var(--hair2); color:var(--t1); } }
.pv-chip:active{ transform:scale(.96); }
.pv-chip.on, .pv-chip[aria-pressed="true"]{ background:var(--s4); border-color:var(--hair3); color:var(--t1); }
.pv-tag{
display:inline-flex; align-items:center;
padding:0 var(--sp3); min-height:var(--sp6);
border-radius:var(--r-full); background:var(--s3); border:1px solid var(--hair);
color:var(--t2); font:600 var(--fs-over)/1 var(--f-ui);
letter-spacing:var(--ls-over); text-transform:uppercase; white-space:nowrap;
}
.pv-tag.hero{ background:var(--hero-lo); border-color:var(--hero); color:var(--hero); }
.pv-tag.mark{ color:var(--mark); border-color:var(--hair2); }
.pv-switch{
position:relative; flex:none;
width:52px; height:var(--ctl-vis);
border-radius:var(--r-full); border:1px solid var(--hair2);
background:var(--s1); cursor:pointer; padding:0;
transition:background var(--d-std) var(--e-effect), border-color var(--d-std) var(--e-effect);
}
.pv-switch::before{
content:''; position:absolute; top:50%; left:3px;
width:calc(var(--ctl-vis) - 8px); height:calc(var(--ctl-vis) - 8px);
border-radius:var(--r-full); background:var(--t2);
transform:translateY(-50%);
transition:transform var(--d-std) var(--e-spring), background var(--d-std) var(--e-effect);
}
.pv-switch::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:var(--ctl); transform:translateY(-50%);
}
.pv-switch[aria-checked="true"]{ background:var(--hero); border-color:var(--hero); }
.pv-switch[aria-checked="true"]::before{
background:var(--on-hero);
transform:translateY(-50%) translateX(calc(52px - var(--ctl-vis) + 2px));
}
.pv-switch:disabled{ opacity:.45; cursor:not-allowed; }
.pv-bar{
height:var(--sp2); border-radius:var(--r-full);
background:var(--s3); overflow:hidden;
}
.pv-bar > i{
display:block; height:100%; width:0;
background:var(--hero); border-radius:var(--r-full);
transition:width var(--d-spring) var(--e-spring);
}
.pv-bar.mark > i{ background:var(--mark); }
.pv-bar.warn > i{ background:var(--lose); }
.pv-top{
position:sticky; top:0; z-index:40;
display:flex; align-items:center; gap:var(--sp2);
min-height:var(--ctl-lg);
padding:var(--sp2) var(--sp3);
padding-top:calc(var(--sp2) + var(--sat));
padding-left:calc(var(--sp3) + var(--sal));
padding-right:calc(var(--sp3) + var(--sar));
background:var(--s0);
border-bottom:1px solid var(--hair);
}
.pv-top .grow{ flex:1; min-width:0; }
.pv-top-name{
font:700 var(--fs-body)/var(--lh-tight) var(--f-serif);
color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pv-top-sub{
font-size:var(--fs-over); letter-spacing:var(--ls-over); text-transform:uppercase; color:var(--t3);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pv-top.glass{ background:var(--glass); }
@supports (backdrop-filter: blur(1px)){
.pv-top.glass{ backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
}
@media (prefers-reduced-transparency: reduce){
.pv-top.glass{ background:var(--s0); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.pv-input{
width:100%; box-sizing:border-box;
min-height:var(--ctl);
background:var(--s1); border:1px solid var(--hair2);
border-radius:var(--r-md); color:var(--t1);
font:400 max(16px, var(--fs-body))/var(--lh-body) var(--f-ui);
padding:var(--sp3) var(--sp4); outline:none; resize:none;
transition:border-color var(--d-micro) var(--e-effect);
}
.pv-input::placeholder{ color:var(--t3); }
.pv-input:focus{ border-color:var(--hero); }
.pv-input:disabled{ opacity:.5; }
.pv-input[aria-invalid="true"]{ border-color:var(--lose); }
.pv-label{
display:block; margin:0 0 var(--sp2);
font:600 var(--fs-over)/1 var(--f-ui); letter-spacing:var(--ls-over);
text-transform:uppercase; color:var(--t3);
}
.pv-field{ margin-bottom:var(--sp5); }
.pv-hint{ margin-top:var(--sp2); font-size:var(--fs-small); color:var(--t3); }
.pv-hint.err{ color:var(--lose); }
.pv-count{
display:block; margin-top:var(--sp1); text-align:right;
font:600 var(--fs-over)/1 var(--f-num); color:var(--t3);
}
.pv-count.near{ color:var(--mark); }
.pv-count.over{ color:var(--lose); }
.pv-row{
display:flex; align-items:center; gap:var(--sp3);
padding:var(--sp3) 0;
}
.pv-row + .pv-row{ border-top:1px solid var(--hair); }
.pv-row .grow{ flex:1; min-width:0; }
.pv-banner{
display:flex; gap:var(--sp3); align-items:flex-start;
padding:var(--sp4); margin:var(--sp4) 0;
background:var(--s1); border:1px solid var(--hair2); border-radius:var(--r-md);
}
.pv-banner .pv-ic{ flex:none; margin-top:2px; color:var(--t3); }
.pv-banner .grow{ flex:1; min-width:0; }
.pv-banner b{ display:block; font:600 var(--fs-body)/1.3 var(--f-ui); color:var(--t1); margin-bottom:var(--sp1); }
.pv-banner p{ margin:0; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); }
.pv-banner .pv-btn{ margin-top:var(--sp3); }
.pv-banner.mark{ border-color:var(--mark); background:color-mix(in srgb, var(--mark) 8%, var(--s1)); }
.pv-banner.mark .pv-ic{ color:var(--mark); }
.pv-banner.err{ border-color:var(--lose); background:color-mix(in srgb, var(--lose) 8%, var(--s1)); }
.pv-banner.err .pv-ic{ color:var(--lose); }
.pv-veil{
position:fixed; inset:0; z-index:80;
background:var(--overlay); opacity:0; pointer-events:none;
transition:opacity var(--d-exit-sheet) var(--e-effect);
}
.pv-veil.show{ opacity:1; pointer-events:auto; transition-duration:var(--d-sheet); }
.pv-sheet{
position:fixed; left:0; right:0; bottom:0; z-index:90;
max-width:var(--col); margin:0 auto;
background:var(--s2); border:1px solid var(--hair2); border-bottom:0;
box-shadow:var(--sh-lg);
border-radius:var(--r-md) var(--r-md) 0 0;
padding:var(--sp2) var(--sp5) calc(var(--sp5) + var(--sab));
padding-bottom:calc(var(--sp5) + max(var(--sab), var(--kb)));
transform:translateY(101%);
transition:transform var(--d-exit-sheet) var(--e-in),
visibility 0s linear var(--d-exit-sheet);
max-height:calc(88dvh - var(--kb));
overflow:auto; overscroll-behavior:contain;
visibility:hidden;
}
.pv-sheet.show{
transform:translateY(0); visibility:visible;
transition:transform var(--d-sheet) var(--e-spring-soft), visibility 0s;
}
.pv-sheet-grip{
position:relative;
width:var(--sp7); height:var(--sp1); border-radius:var(--r-full);
background:var(--hair3); margin:var(--sp2) auto var(--sp4);
}
.pv-sheet-grip::after{
content:''; position:absolute; left:-40px; right:-40px; top:50%;
height:var(--ctl); transform:translateY(-50%);
}
.pv-sheet-head{
display:flex; align-items:center; gap:var(--sp3);
margin-bottom:var(--sp4);
}
.pv-sheet-head .grow{ flex:1; min-width:0; }
.pv-sheet-close{
width:var(--ctl); height:var(--ctl); flex:none;
display:grid; place-items:center; border:0; border-radius:var(--r-full);
background:var(--s3); color:var(--t2); cursor:pointer;
}
.pv-sheet-close:active{ transform:scale(.92); }
.pv-dialog{
position:fixed; left:50%; top:50%; z-index:95;
width:min(calc(100vw - var(--sp8)), calc(var(--col) * .66));
transform:translate(-50%, -50%) scale(.94);
background:var(--s2); border:1px solid var(--hair2); border-radius:var(--r-md);
padding:var(--sp6); box-shadow:var(--sh-lg);
opacity:0; visibility:hidden;
transition:opacity var(--d-exit-std) var(--e-effect),
transform var(--d-exit-std) var(--e-in),
visibility 0s linear var(--d-exit-std);
}
.pv-dialog.show{
opacity:1; visibility:visible; transform:translate(-50%, -50%) scale(1);
transition:opacity var(--d-std) var(--e-effect),
transform var(--d-std) var(--e-spring-soft),
visibility 0s;
}
.pv-dialog h3{ margin:0 0 var(--sp3); font:700 var(--fs-title)/var(--lh-tight) var(--f-serif); color:var(--t1); }
.pv-dialog p{ margin:0 0 var(--sp5); color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); text-wrap:pretty; }
.pv-dialog-acts{ display:flex; flex-direction:column; gap:var(--sp3); }
.pv-dialog-acts .pv-btn{ width:100%; }
.pv-dialog.refuse{
width:min(calc(100vw - var(--sp6)), calc(var(--col) * .92));
max-height:calc(100dvh - var(--sp8)); overflow-y:auto;
}
.pv-dialog.refuse p#pvDlgD{ font-size:var(--fs-body); color:var(--t1); margin-bottom:var(--sp4); }
.pv-refuse-hint{
margin:0 0 var(--sp4); padding:var(--sp3) var(--sp4);
background:var(--s3); border-radius:var(--r-sm);
color:var(--t1); font-size:var(--fs-small); line-height:var(--lh-body);
text-wrap:pretty;
}
.pv-refuse-law{ margin:0 0 var(--sp5); color:var(--t3); font-size:var(--fs-small); }
.pv-enter{ opacity:0; transform:scale(.96); }
.pv-enter.in{
opacity:1; transform:scale(1);
transition:opacity var(--d-std) var(--e-effect), transform var(--d-spring) var(--e-spring);
}
.pv-rise{ opacity:0; transform:translateY(var(--sp3)); }
.pv-rise.in{
opacity:1; transform:translateY(0);
transition:opacity var(--d-std) var(--e-effect), transform var(--d-spring) var(--e-spring);
}
.pv-skel{
background:var(--s1); border-radius:var(--r-md);
position:relative; overflow:hidden;
}
.pv-skel::after{
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, transparent, var(--hair), transparent);
transform:translateX(-100%);
animation:pvShimmer 1400ms var(--e-out) infinite;
}
@keyframes pvShimmer{ to{ transform:translateX(100%); } }
.pv-skel.line{ height:var(--sp4); border-radius:var(--r-full); }
.pv-skel.line + .pv-skel.line{ margin-top:var(--sp2); }
.pv-mark{ color:var(--mark); }
.pv-toast{
position:fixed; left:50%; bottom:calc(var(--sp8) + var(--sab));
z-index:100; transform:translateX(-50%) translateY(var(--sp3)); opacity:0; pointer-events:none;
display:flex; align-items:center; gap:var(--sp3);
background:var(--s5); color:var(--t1); border:1px solid var(--hair2);
box-shadow:var(--sh-lg);
border-radius:var(--r-full); padding:var(--sp3) var(--sp3) var(--sp3) var(--sp5);
font:600 var(--fs-small)/1.3 var(--f-ui); max-width:min(82vw, var(--col));
transition:opacity var(--d-exit-std) var(--e-effect), transform var(--d-exit-std) var(--e-in);
}
.pv-toast.show{
opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
transition:opacity var(--d-std) var(--e-effect), transform var(--d-std) var(--e-spring-soft);
}
.pv-toast > span{ min-width:0; }
.pv-toast-act{
flex:none; min-height:var(--ctl-vis); padding:0 var(--sp4);
border:0; border-radius:var(--r-full); cursor:pointer;
background:var(--hero); color:var(--on-hero);
font:700 var(--fs-over)/1 var(--f-ui); letter-spacing:var(--ls-over); text-transform:uppercase;
}
.pv-toast-act:active{ transform:scale(.94); }
.pv-toast:not(:has(.pv-toast-act)){ padding-right:var(--sp5); }
.pv-empty{ text-align:center; padding:var(--sp7) var(--sp4); }
.pv-empty .pv-ic{ width:32px; height:32px; margin:0 auto var(--sp4); color:var(--t3); }
.pv-empty p{ margin:0 0 var(--sp3); color:var(--t2); text-wrap:pretty; }
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.pv-enter, .pv-rise{ opacity:1; transform:none; }
.pv-btn:active, .pv-iconbtn:active, .pv-seg button:active,
.pv-chip:active, .pv-toast-act:active, .pv-sheet-close:active{ transform:none; }
.pv-skel::after{ display:none; }
.pv-skel{ opacity:.7; }
}
@media (min-width: 900px){
.pv-top{
padding-left:0; padding-right:0;
border-bottom:1px solid var(--hair);
}
.pv-top > *{ position:relative; }
.pv-top-inner,
.pv-top{
--top-pad: max(var(--sp4), calc((100vw - var(--col)) / 2));
}
.pv-top{ padding-left:var(--top-pad); padding-right:var(--top-pad); }
.pv-shell{ padding-left:var(--sp5); padding-right:var(--sp5); }
.pv-sheet{
left:50%; bottom:auto; top:50%;
transform:translate(-50%, -46%) scale(.98);
width:min(520px, calc(100vw - var(--sp8)));
max-width:none; max-height:min(76dvh, 720px);
border-radius:var(--r-md); border-bottom:1px solid var(--hair2);
transition:transform var(--d-exit-sheet) var(--e-in),
opacity var(--d-exit-std) var(--e-effect),
visibility 0s linear var(--d-exit-sheet);
opacity:0;
}
.pv-sheet.show{
transform:translate(-50%, -50%) scale(1); opacity:1;
transition:transform var(--d-sheet) var(--e-spring),
opacity var(--d-std) var(--e-effect), visibility 0s;
}
.pv-sheet-grip{ display:none; }
.pv-toast{ bottom:var(--sp7); }
}
@media (min-width: 1400px){
.pv-shell{ max-width:var(--col); }
}
.pv-zoomable{ cursor:zoom-in; }
.pv-zoomable:focus-visible{ outline:2px solid var(--hero); outline-offset:3px; }
.pv-zoom{
position:fixed; inset:0; z-index:200;
display:flex; align-items:center; justify-content:center;
height:100dvh;
padding:max(var(--sp5), env(safe-area-inset-top)) var(--sp5)
max(var(--sp5), env(safe-area-inset-bottom));
background:#090a0e;
opacity:0; transition:opacity .24s ease;
cursor:zoom-out; overflow:hidden;
--pv-drag:1;
}
.pv-zoom.on{ opacity:1; }
.pv-zoom-amb{
position:absolute; inset:-20%;
background-position:center; background-size:cover; background-repeat:no-repeat;
filter:blur(72px) saturate(150%);
transform:translate3d(0,0,0) scale(1.25);
opacity:calc(.7 * var(--pv-drag));
transition:opacity .24s ease;
}
.pv-zoom-veil{
position:absolute; inset:0;
background:
radial-gradient(ellipse at 50% 42%, rgba(8,9,12,0) 0%, rgba(8,9,12,.55) 70%, rgba(8,9,12,.86) 100%),
linear-gradient(180deg, rgba(8,9,12,.5) 0%, rgba(8,9,12,.25) 30%, rgba(8,9,12,.7) 100%);
opacity:calc(.5 + .5 * var(--pv-drag));
}
.pv-zoom-fig{
position:relative; margin:0; touch-action:none;
width:min(92vw, 78dvh, 620px);
aspect-ratio:1 / 1;
border-radius:28px; overflow:hidden;
background:var(--s2);
box-shadow:0 32px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
transform:scale(.94); transition:transform .26s cubic-bezier(.2,.9,.25,1);
cursor:default; will-change:transform;
overscroll-behavior:contain;
}
.pv-zoom.on .pv-zoom-fig{ transform:none; }
.pv-zoom.drag .pv-zoom-fig{ transition:none; }
.pv-zoom-fig img{
width:100%; height:100%; display:block; object-fit:cover;
-webkit-user-select:none; user-select:none;
}
.pv-zoom-fig figcaption{
position:absolute; left:0; right:0; bottom:0;
padding:var(--sp8) var(--sp5) var(--sp5);
display:flex; flex-direction:column; gap:var(--sp2);
text-align:left; pointer-events:none;
background:linear-gradient(to top,
rgba(0,0,0,.86) 0%, rgba(0,0,0,.78) 12%, rgba(0,0,0,.66) 24%,
rgba(0,0,0,.5) 36%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.2) 60%,
rgba(0,0,0,.1) 72%, rgba(0,0,0,.03) 86%, transparent 100%);
}
.pv-zoom-fig figcaption b{
color:#fff; font:700 clamp(22px, 6vw, 34px)/1.15 var(--f-serif);
text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.pv-zoom-fig figcaption span{
color:rgba(255,255,255,.82); font-size:var(--fs-small); line-height:var(--lh-body);
text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.pv-zoom-x{
position:absolute; z-index:2;
top:max(var(--sp4), env(safe-area-inset-top)); right:var(--sp4);
width:44px; height:44px; border:0; border-radius:var(--r-full);
background:rgba(20,20,24,.42); color:#fff;
-webkit-backdrop-filter:blur(20px) saturate(160%);
backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
font:400 26px/1 var(--f-ui); cursor:pointer;
}
.pv-zoom-x:hover{ background:rgba(40,40,48,.6); }
.pv-zoom-x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (min-width:900px){
.pv-zoom-fig{ width:min(70vh, 560px); }
}
@media (prefers-reduced-motion: reduce){
.pv-zoom, .pv-zoom-fig, .pv-zoom-amb{ transition:none !important; }
.pv-zoom-fig{ transform:none; }
}
.yz-seo-footer{border-top:1px solid var(--hair2);margin:var(--sp7) auto 0;
padding:var(--sp5) var(--sp5) calc(var(--sp8) * 2);max-width:1120px}
.yz-seo-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px;margin:0;padding:0}
.yz-seo-footer a{font-size:13.5px;color:var(--t2);text-decoration:none}
.yz-seo-footer a:hover{color:var(--hero, currentColor)}
.yz-seo-footer span{font-size:13.5px;color:var(--t3)}
.yz-seo-footer-note{margin-top:14px;font-size:12.5px;color:var(--t3);max-width:620px;line-height:1.5}
.yz-cat-row{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:var(--sp4) 0}
.yz-cat-row a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
border:1px solid var(--hair2);border-radius:999px;font-size:14px;
color:var(--t1);text-decoration:none;background:var(--s1)}
.yz-cat-row a:hover{border-color:currentColor}
.yz-cat-row a i{font-style:normal;color:var(--t3);font-size:12.5px}
.qm-sheet:focus{ outline:none; }
.qm-sheet .qm-h{
margin:0 0 var(--sp2); font:700 var(--fs-title)/1.25 var(--f-serif);
color:var(--t1); letter-spacing:-.01em;
}
.qm-sheet .qm-lead{ margin:0 0 var(--sp5); font-size:var(--fs-small); color:var(--t2); }
.qm-sheet .qm-hint{ margin:var(--sp3) 0 0; font-size:12px; line-height:1.5; color:var(--t3); text-align:center; }
.qm-sheet .qm-foot{ margin-top:var(--sp3); }
.qm-wait{ display:flex; align-items:center; gap:var(--sp4); }
.qm-wait-face{ width:var(--mono-lg); height:var(--mono-lg); flex:none; border-radius:var(--r-full); }
.qm-wait-tx{ flex:1; min-width:0; }
.qm-wait-bubble{ height:64px; margin-top:var(--sp4); border-radius:var(--r-md) var(--r-md) var(--r-md) var(--sp1); }
.qm-who{ display:flex; align-items:center; gap:var(--sp4); }
.qm-who-tx{ min-width:0; }
.qm-who-tx b{ display:block; font:700 var(--fs-title)/1.2 var(--f-serif); color:var(--t1); }
.qm-who-tx span{ display:block; margin-top:var(--sp1); font-size:var(--fs-small); color:var(--t2); }
.qm-first{
margin-top:var(--sp4); padding:var(--sp3) var(--sp4);
background:var(--s1); border:1px solid var(--hair);
border-radius:var(--r-md) var(--r-md) var(--r-md) var(--sp1);
}
.qm-first p{
margin:var(--sp1) 0 0; font:400 var(--fs-body)/var(--lh-body) var(--f-serif); color:var(--t1);
}
.qm-acts{ display:grid; gap:var(--sp2); margin-top:var(--sp5); }
.qm-acts .pv-btn{ width:100%; text-decoration:none; }

/* == topbar.css == */
/* ============================================================
ИИ-ПЕРСОНЫ YAZME | ОБЩАЯ ШАПКА РАЗДЕЛА
Файл: persona/assets/topbar.css
Один файл на все страницы раздела: главную-витрину, каталог,
а дальше и на всё остальное, что получит pnTopBar(). Пока эти
правила лежали внутри browse.css, их пришлось бы держать в двух
местах — и однажды поправить одно, забыв про второе.
Ни одного нового цвета: всё построено на токенах раздела
(persona/assets/tokens.css), поэтому шапка едет за темой сайта —
и в янтарной, и в светлой «Cloud Dancer», и в «Полночи».
Подключать ПЕРЕД страничным файлом:
<link rel="stylesheet" href="/persona/assets/topbar.css">
<link rel="stylesheet" href="/persona/assets/showcase.css">
============================================================ */
/* ШАПКА — СЕТКА, А НЕ РЯД С РАСПОРКОЙ                    (26.08.2026)
─────────────────────────────────────────────────────────────────
Было: flex + .pvh-grow{flex:1}. На ноутбуке это давало пустую левую
половину экрана и прижатую к правому краю кучу: кнопка, два кружка,
поле поиска. Поиск — главное в этой шапке — оказывался в самом
неудобном углу, а взгляд шёл от логотипа сразу за 1200 пикселей
пустоты.
Стало: три колонки. Слева логотип, В ЦЕНТРЕ ПОИСК, справа действия.
Боковые колонки — по 1fr с минимумом в собственный контент: пока
места хватает, они равны, поэтому поле стоит ровно по середине
экрана, а не «примерно посередине». Не хватает — колонки сжимаются
до содержимого, и первым уступает поле, а не кнопки.
На телефоне (до 820px) сетка складывается в две строки: логотип и
действия сверху, поиск во всю ширину под ними. Это дороже по высоте,
но поле обязано быть видно с первого пикселя — в раздел приходят за
конкретным именем. */
.pvh{
position:sticky; top:0; z-index:45;
display:grid; grid-template-columns:auto minmax(0,1fr);
align-items:center; column-gap:var(--sp2); row-gap:var(--sp2);
padding:var(--sp3) var(--sp4);
background:var(--glass); backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid var(--hair);
}
/* Телефонная раскладка: строка действий сверху, поиск — во всю ширину. */
.pvh-logo{ grid-column:1; grid-row:1; }
.pvh-acts{
grid-column:2; grid-row:1; justify-self:end;
display:flex; align-items:center; gap:var(--sp2); min-width:0;
}
.pvh-logo{
display:flex; align-items:center; gap:8px; flex:none; text-decoration:none;
font:800 16px/1 var(--f-display); letter-spacing:-.02em; color:var(--t1);
}
.pvh-logo i{
width:26px; height:26px; border-radius:8px; background:var(--hero-grad);
display:grid; place-items:center; font:800 14px/1 var(--f-display);
color:var(--on-hero); font-style:normal;
}
.pvh-logo em{ font-style:normal; color:var(--hero); }
/* .pvh-grow из разметки убран — распорку заменила сетка. Правила для него
здесь больше нет: в сетке flex:1 не значит ничего. */
.pvh-ib{
position:relative; width:var(--ctl-vis); height:var(--ctl-vis); flex:none;
border-radius:var(--r-full); display:grid; place-items:center;
background:var(--s2); border:1px solid var(--hair); color:var(--t1);
transition:background var(--d-micro) var(--e-out);
}
.pvh-ib:hover{ background:var(--s3); }
/* Хит-зона 44px по WCAG 2.2 при визуальном размере 36 — разницу
добираем псевдоэлементом, как это сделано в ui.css раздела. */
.pvh-ib::after{ content:''; position:absolute; inset:-4px; }
.pvh-ib svg{ width:18px; height:18px; }
.pvh-ib b{
position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
border-radius:var(--r-full); background:var(--hero); color:var(--on-hero);
font:700 11px/18px var(--f-ui); text-align:center; border:2px solid var(--s0);
}
/* УСТАНОВИТЬ ПРИЛОЖЕНИЕ — ТОЛЬКО ТЕЛЕФОН.
Файл написан от телефона вверх (десктоп начинается с min-width:820px),
поэтому кнопка видна здесь и скрывается в десктопном блоке ниже. На ПК
она и не нужна: Chrome показывает свой значок установки прямо в адресной
строке, а логика в yz_boot_client.php на ширине больше 768 системный
диалог и не перехватывает.
Два класса решают, показывать ли её: yz-standalone — страницу уже открыли
КАК приложение, yz-pwa-installed — приложение стоит, но открыли в браузере.
В обоих случаях предлагать установку незачем.
КЛАССЫ СМОТРИМ НА <html>, А НЕ НА <body>, И ЭТО ГЛАВНОЕ ЗДЕСЬ. На body их
вешал скрипт из низа страницы — то есть уже ПОСЛЕ того, как браузер нарисовал
шапку. У человека с установленным приложением кнопка успевала вспыхнуть и
только потом пропадала, при каждом обновлении. Теперь класс ставится в <head>
(yz_pwa_head в includes/yz_boot_client.php), до первой отрисовки, а <body> в
тот момент ещё не существует — отсюда html. */
.pvh-app{ display:none; }
html:not(.yz-standalone):not(.yz-pwa-installed) .pvh-app{
display:grid; place-items:center;
width:var(--ctl-vis); height:var(--ctl-vis); flex:none;
border-radius:var(--r-full); background:var(--s2);
border:1px solid var(--hair); color:var(--t1); cursor:pointer;
transition:background var(--d-micro) var(--e-out);
}
.pvh-app:hover{ background:var(--s3); }
.pvh-app svg{ width:17px; height:17px; }
/* Страховка на случай, когда JavaScript до нас не доехал или localStorage
недоступен (приватный режим, отключённые куки). Внутри установленного
приложения этот запрос истинен всегда и без единой строчки кода — значит
кнопка не покажется даже в самом плохом случае.
!important здесь вынужденный: правило показа выше весит (0,3,1) из-за
html:not():not(), а @media веса не добавляет — без !important эта строка
проиграла бы. Тот же случай, что разобран в persona/inc/ui.php у
#notif-dropdown.hidden. */
@media (display-mode: standalone){
.pvh-app{ display:none!important; }
}
/* «Войти» для гостя. Намеренно не кружок: значка со смыслом «войти»,
который читался бы однозначно, нет — прежняя стрелка в дверном проёме
понималась как выход. Форма и высота те же, что у .pvh-make рядом, но
цвет тихий: вход — второе действие, первое здесь «Собрать своего».
Подпись не прячется ни на одной ширине: пять букв дешевле любого
значка, а места они занимают меньше, чем кружок с иконкой. */
.pvh-in{
display:inline-flex; align-items:center; flex:none;
height:var(--ctl-vis); padding:0 14px; border-radius:var(--r-full);
background:var(--s2); border:1px solid var(--hair); color:var(--t1);
text-decoration:none; font:700 13px/1 var(--f-ui); white-space:nowrap;
transition:background var(--d-micro) var(--e-out);
}
.pvh-in:hover{ background:var(--s3); }
.pvh-make{
display:inline-flex; align-items:center; gap:7px; flex:none;
height:var(--ctl-vis); padding:0 15px 0 11px; border-radius:var(--r-full);
background:var(--hero); color:var(--on-hero); text-decoration:none;
font:700 13px/1 var(--f-ui); box-shadow:var(--sh-hero);
transition:background var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-spring);
}
.pvh-make:hover{ background:var(--hero-hi); transform:translateY(-1px); }
.pvh-make svg{ width:17px; height:17px; }
/* Подпись у кнопки прячется раньше, чем раньше (было 980).
Причина в новой сетке: правая колонка с подписью весит ~270px, и в
полосе 980-1150 она перевешивает левую с логотипом — поле поиска
переставало стоять по центру и уезжало вправо. Ниже 1150 от кнопки
остаётся кружок с плюсом, колонки уравниваются, центр держится. */
@media (max-width:1150px){
.pvh-make span{ display:none; }
.pvh-make{ padding:0; width:var(--ctl-vis); justify-content:center; }
}
.pvh-find{
grid-column:1 / -1; grid-row:2;
width:100%; display:flex; align-items:center; gap:var(--sp3);
height:44px; padding:0 6px 0 var(--sp4); border-radius:var(--r-full);
background:var(--s1); border:1px solid var(--hair);
transition:border-color var(--d-micro) var(--e-out), background var(--d-micro) var(--e-out);
}
.pvh-find:focus-within{ border-color:var(--hero-line); background:var(--s2); }
.pvh-find > svg{ width:18px; height:18px; flex:none; color:var(--t3); }
.pvh-find input{
flex:1; min-width:0; background:none; border:0; outline:0;
color:var(--t1); font:500 var(--fs-body)/1 var(--f-ui);
}
.pvh-find input::placeholder{ color:var(--t3); }
.pvh-find input::-webkit-search-cancel-button{ display:none; }
.pvh-clr{
width:32px; height:32px; flex:none; border-radius:var(--r-full);
display:none; place-items:center; color:var(--t2); background:none; border:0; cursor:pointer;
}
.pvh-clr svg{ width:14px; height:14px; }
.pvh-find.has .pvh-clr{ display:grid; }
.pvh-clr:hover{ background:var(--s3); color:var(--t1); }
/* ---------- десктоп: три колонки в одну строку ---------- */
@media (min-width:820px){
/* На десктопе установка не предлагается — см. комментарий у .pvh-app.
Селектор с тем же весом, что и правило показа выше, иначе не перебьёт:
@media собственного веса не добавляет. */
html:not(.yz-standalone):not(.yz-pwa-installed) .pvh-app{ display:none; }
.pvh{
grid-template-columns:minmax(max-content,1fr) minmax(0,520px) minmax(max-content,1fr);
column-gap:var(--sp4); row-gap:0;
}
.pvh-logo{ grid-column:1; grid-row:1; justify-self:start; }
/* Поиск в средней колонке. justify-self:center нужен на случай, когда
колонка шире 520px не бывает — поле не растягивается сверх меры и
остаётся ровно по центру. */
.pvh-find{
grid-column:2; grid-row:1;
width:100%; max-width:520px; justify-self:center; margin:0; height:40px;
}
.pvh-acts{ grid-column:3; grid-row:1; justify-self:end; }
/* Страница без поиска (pnTopBar(['search' => false])). Средняя колонка
задана максимумом в 520px и вырастет до него даже пустой — получилась
бы дыра в полэкрана. Поэтому на такой шапке колонок снова две. */
.pvh.pvh--nofind{ grid-template-columns:auto minmax(0,1fr); }
.pvh.pvh--nofind .pvh-acts{ grid-column:2; }
}
.pvh a:focus-visible, .pvh button:focus-visible{
outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off);
}
/* Класса для скринридера здесь нет намеренно: .pv-sr уже объявлен
в ui.css, а ui.css подключает pnHead() на каждой странице раздела. */
@media (prefers-reduced-motion:reduce){
.pvh-make, .pvh-ib, .pvh-in, .pvh-app{ transition:none; }
}

/* == showcase.css == */
:root{
--cat-anime:#e0725f; --cat-game:#5fa8e0; --cat-movie:#d9a441;
--cat-books:#8fbf6f; --cat-hist:#c98a5a; --cat-myth:#a97fe0;
--cat-pick:#e2b13c; --cat-hear:#58a76b; --cat-argue:#c98a5a; --cat-friend:#e08fa8;
}
html[data-yz-theme="cloud"]{
--cat-anime: color-mix(in srgb, #e0725f 58%, var(--yz-text, #232019));
--cat-game:  color-mix(in srgb, #5fa8e0 52%, var(--yz-text, #232019));
--cat-movie: color-mix(in srgb, #d9a441 50%, var(--yz-text, #232019));
--cat-books: color-mix(in srgb, #8fbf6f 48%, var(--yz-text, #232019));
--cat-hist:  color-mix(in srgb, #c98a5a 56%, var(--yz-text, #232019));
--cat-myth:  color-mix(in srgb, #a97fe0 56%, var(--yz-text, #232019));
--cat-pick:  color-mix(in srgb, #e2b13c 46%, var(--yz-text, #232019));
--cat-hear:  color-mix(in srgb, #58a76b 62%, var(--yz-text, #232019));
--cat-argue: color-mix(in srgb, #c98a5a 56%, var(--yz-text, #232019));
--cat-friend:color-mix(in srgb, #e08fa8 54%, var(--yz-text, #232019));
}
.sc-body{ padding-bottom:var(--nav-gap); }
.sc-shell{ max-width:var(--wide); margin:0 auto; }
.sc-recents{
display:flex; align-items:flex-start; gap:var(--sp4);
padding:var(--sp4) var(--sp5) var(--sp3);
overflow-x:auto; scrollbar-width:none; background:var(--s0);
}
.sc-recents::-webkit-scrollbar{ display:none; }
.sc-recents .lbl{
flex:none; color:var(--t2); font:600 var(--fs-over)/1.25 var(--f-ui);
letter-spacing:var(--ls-over); text-transform:uppercase; max-width:76px;
}
@media (max-width:560px){ .sc-recents .lbl{ display:none; } }
.sc-recents .who{
flex:none; width:60px; text-align:center; text-decoration:none;
display:flex; flex-direction:column; align-items:center; gap:5px;
align-self:flex-start;
}
.sc-recents .ring{
position:relative; flex:none; box-sizing:border-box;
width:50px; height:50px; min-width:50px; min-height:50px; aspect-ratio:1/1;
border-radius:50%;
padding:2.5px; background:conic-gradient(var(--hero) 62%, var(--hair2) 0);
display:grid; place-items:center;
transition:transform var(--d-std) var(--e-spring);
}
.sc-recents .who:hover .ring{ transform:scale(1.08); }
.sc-recents .ring img{
box-sizing:border-box; width:100%; height:100%; aspect-ratio:1/1;
border-radius:50%; object-fit:cover; border:2px solid var(--s0);
}
.sc-recents .ring .mono{
box-sizing:border-box; width:100%; height:100%; aspect-ratio:1/1;
border-radius:50%; border:2px solid var(--s0);
background:linear-gradient(150deg, var(--s3), var(--s2)); color:var(--t2);
display:grid; place-items:center; font:700 18px/1 var(--f-serif);
}
.sc-recents .un{
position:absolute; top:0; right:0; width:13px; height:13px;
border-radius:var(--r-full); background:var(--hero); border:2px solid var(--s0);
}
.sc-recents .who b{
display:block; min-height:14px;      
font:600 11.5px/1.2 var(--f-ui); color:var(--t1); width:100%;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-rc-menu{ padding:var(--sp2) var(--sp4) var(--sp6); display:grid; gap:6px; }
.sc-rc-item{
display:flex; align-items:flex-start; gap:var(--sp4); width:100%;
padding:var(--sp4); border-radius:var(--r-md); text-align:left;
background:var(--s2); border:1px solid var(--hair); color:var(--t1);
text-decoration:none; cursor:pointer; font:inherit;
transition:background var(--d-micro) var(--e-out);
}
.sc-rc-item:hover{ background:var(--s3); }
.sc-rc-item:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-rc-item svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--t2); }
.sc-rc-item span{ display:block; min-width:0; }
.sc-rc-item b{ display:block; font:650 var(--fs-body)/1.3 var(--f-ui); }
.sc-rc-item i{
display:block; margin-top:3px; font-style:normal;
font:500 12.5px/1.35 var(--f-ui); color:var(--t3);
}
#scRcHide svg{ color:var(--hero); }
.sc-recents .who.add .ring{
background:none; border:1px dashed var(--hair2); color:var(--t3); font-size:18px;
}
.sc-stage{ position:relative; overflow:hidden; }
.sc-slide{
position:absolute; left:0; right:0; top:0; opacity:0; pointer-events:none;
display:flex; flex-direction:column; justify-content:flex-end;
transition:opacity 700ms var(--e-out);
}
.sc-slide.on{ position:relative; opacity:1; pointer-events:auto; }
.sc-slide .bg{ position:absolute; inset:0; overflow:hidden; }
.sc-slide .bg .blur{
display:block; position:absolute; inset:-12%; width:124%; height:124%;
object-fit:cover; filter:blur(40px) saturate(170%); opacity:.62;
}
.sc-slide .bg::after{
content:''; position:absolute; inset:0; z-index:1;
background:
linear-gradient(to top, var(--s1) 4%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.22) 100%),
radial-gradient(120% 80% at 12% 82%, var(--overlay), transparent 62%);
}
.sc-slide .in{
position:relative; z-index:2; order:1;
padding:var(--sp5) var(--sp4) var(--sp3); max-width:720px;
}
@media (max-width:819px){
.sc-stage{
margin:var(--sp3) var(--sp4) 0; border-radius:var(--r-lg);
background:var(--s1); border:1px solid var(--hair);
}
.sc-stage h2{
font-size:clamp(25px, 6.6vw, 32px); letter-spacing:-.03em;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-stage .qt{ margin-top:var(--sp2); -webkit-line-clamp:2; font-size:14px; }
.sc-stage .row{ margin-top:var(--sp4); flex-wrap:nowrap; }
.sc-stage .dots{ margin-top:var(--sp2); margin-bottom:calc(var(--sp1) * -1); }
}
@media (max-width:560px){
.sc-stage .sc-btn.glass{ display:none; }
.sc-stage .row .sc-btn{ flex:1; min-width:0; }
}
.sc-stage .kick{
display:inline-flex; align-items:center; gap:7px; margin-bottom:var(--sp2);
padding:6px 12px; border-radius:var(--r-full);
background:var(--s3); border:1px solid var(--hair2);
font:700 var(--fs-over)/1 var(--f-ui); letter-spacing:var(--ls-over);
text-transform:uppercase; color:var(--t1);
}
.sc-stage .kick s{ width:6px; height:6px; border-radius:50%; background:var(--mark); text-decoration:none; }
.sc-stage h2{
margin:0; font:800 clamp(29px, 7.6vw, 64px)/.98 var(--f-display);
letter-spacing:-.04em; color:var(--t1);
}
.sc-stage .qt{
margin:var(--sp3) 0 0; max-width:52ch; color:var(--t1);
font:600 clamp(14.5px, 2.4vw, 19px)/1.45 var(--f-serif);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-stage .row{ display:flex; gap:var(--sp2); margin-top:var(--sp5); flex-wrap:wrap; }
.sc-stage .dots{ display:flex; gap:var(--sp1); margin-top:var(--sp3); margin-left:-6px; }
.sc-stage .dots button{
display:grid; place-items:center; width:44px; height:24px;
background:none; border:0; border-radius:6px; cursor:pointer;
}
.sc-stage .dots button::before{
content:''; display:block; width:30px; height:4px; border-radius:2px;
background:var(--hair2); transition:background var(--d-std), width var(--d-std);
}
.sc-stage .dots button.on::before{ background:var(--hero); width:40px; }
.sc-stage .dots button:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
.sc-slide .art{
position:relative; z-index:2; order:2;
padding:0 var(--sp4) var(--sp5); display:flex; align-items:center; gap:0;
}
.sc-slide .art img{
box-sizing:border-box; width:56px; height:56px; flex:none;
object-fit:cover; display:block; background:var(--s3);
border-radius:16px; border:2px solid var(--s1); margin-left:-12px;
box-shadow:var(--sh-sm);
}
.sc-slide .art img:first-child{ margin-left:0; }
.sc-slide .art .more{
flex:none; display:grid; place-items:center; height:56px; padding:0 12px;
margin-left:6px; border-radius:16px; background:var(--s2);
border:1px solid var(--hair2); color:var(--t2);
font:700 13px/1 var(--f-ui); white-space:nowrap;
}
.sc-slide .art.single img{ width:72px; height:72px; border-radius:20px; margin-left:0; }
.sc-slide .art img:nth-of-type(n+6){ display:none; }
.sc-slide .art .vs{ display:none; }
.sc-slide .art.duo img:nth-of-type(1){ order:1; }
.sc-slide .art.duo .vs{
order:2; display:grid; place-items:center; flex:none;
width:30px; height:30px; margin:0 -8px; z-index:2;
border-radius:50%; background:var(--mark); color:#241a04;
font:800 11px/1 var(--f-ui); border:2px solid var(--s1);
}
.sc-slide .art.duo img:nth-of-type(2){ order:3; }
@media (max-width:400px){
.sc-slide .art{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sc-slide .art::-webkit-scrollbar{ display:none; }
.sc-slide .art img{ width:46px; height:46px; border-radius:14px; margin-left:-12px; }
.sc-slide .art.single img{ width:64px; height:64px; }
.sc-slide .art .more{ height:46px; padding:0 10px; border-radius:14px; font-size:12px; }
.sc-slide .art.duo .vs{ width:26px; height:26px; font-size:10px; }
}
@media (min-width:820px){
.sc-stage{ height:min(56vh, 500px); min-height:420px; }
.sc-slide, .sc-slide.on{ position:absolute; inset:0; display:block; }
.sc-slide .bg .blur{
display:block; position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; filter:blur(60px) saturate(140%); opacity:.5;
transform:scale(1.2);
}
.sc-slide .in{
position:absolute; left:0; right:auto; bottom:0; z-index:2;
padding:0 var(--sp5) 64px; max-width:min(52%, 720px);
}
.sc-slide .art{
position:absolute; right:5vw; top:50%; transform:translateY(-50%);
width:min(38%, 440px); padding:0; z-index:3;
}
.sc-slide .art .more{ display:none; }
.sc-slide .art img:nth-of-type(n+6){ display:block; }
.sc-slide .art img{
width:auto; height:auto; margin-left:0; border:0; box-shadow:none;
border-radius:14px;
}
.sc-slide .art.mosaic{
display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
aspect-ratio:1/1; gap:8px;
}
.sc-slide .art.mosaic img{
width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:var(--sh-lg);
}
.sc-slide .art.mosaic img:first-child{ grid-column:span 2; grid-row:span 2; }
.sc-slide .art.trio{ display:flex; align-items:center; justify-content:flex-end; gap:0; }
.sc-slide .art.trio img{
width:33%; height:auto; aspect-ratio:1/1; border-radius:18px; margin-left:-11%;
border:2px solid var(--s0); box-shadow:var(--sh-lg);
}
.sc-slide .art.trio img:first-child{ margin-left:0; }
.sc-slide .art.trio img:nth-child(2){ transform:translateY(-9%); }
.sc-slide .art.trio img:nth-child(4){ transform:translateY(-5%); }
.sc-slide .art.duo{ display:flex; align-items:center; justify-content:center; gap:9%; }
.sc-slide .art.duo img{
width:42%; height:auto; aspect-ratio:1/1; border-radius:20px;
border:2px solid var(--s0); box-shadow:var(--sh-lg);
}
.sc-slide .art.duo img:first-child{ transform:translateY(-7%); }
.sc-slide .art.duo img:last-child{ transform:translateY(7%); }
.sc-slide .art.duo .vs{
display:grid; place-items:center; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); width:52px; height:52px; border-radius:var(--r-full);
background:var(--mark); color:#241a04; font:800 12px/1 var(--f-ui); z-index:2;
}
.sc-slide .art.single{ display:block; }
.sc-slide .art.single img{
width:100%; height:auto; aspect-ratio:1/1; border-radius:var(--r-lg);
border:1px solid var(--hair2); box-shadow:var(--sh-lg);
}
}
@media (min-width:820px) and (max-width:900px){
.sc-slide .in{ max-width:58%; }
.sc-slide .art{ width:min(34%, 440px); }
.sc-stage .row{ flex-wrap:nowrap; }
}
.sc-btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:46px; padding:0 20px; border-radius:var(--r-full);
background:var(--hero); color:var(--on-hero); text-decoration:none;
font:700 var(--fs-body)/1 var(--f-ui); box-shadow:var(--sh-hero);
transition:background var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-spring);
}
.sc-btn:hover{ background:var(--hero-hi); transform:translateY(-2px); }
.sc-btn svg{ width:18px; height:18px; }
.sc-btn.glass{ background:var(--s2); color:var(--t1); border:1px solid var(--hair2); box-shadow:none; }
.sc-btn.glass:hover{ background:var(--s3); }
.sc-btn.sm{ height:42px; padding:0 18px; font-size:var(--fs-small); }
.sc-navbar{
position:sticky; top:0; z-index:30; padding:var(--sp3) 0 var(--sp4);
background:linear-gradient(to bottom, var(--s0) 68%, var(--glass) 88%, transparent);
backdrop-filter:blur(10px);
}
.sc-chips{ display:flex; gap:var(--sp2); overflow-x:auto; scrollbar-width:none; padding:0 var(--sp5); }
.sc-chips::-webkit-scrollbar{ display:none; }
.sc-chips .chip{
flex:none; white-space:nowrap; height:38px; padding:0 18px;
display:inline-flex; align-items:center; gap:6px; text-decoration:none;
background:var(--s2); border:1px solid var(--hair); border-radius:var(--r-full);
color:var(--t2); font:600 var(--fs-small)/1 var(--f-ui);
transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
.sc-chips .chip:hover{ color:var(--t1); background:var(--s3); }
.sc-chips .chip.on{ background:var(--t1); border-color:var(--t1); color:var(--s0); }
.sc-chips .chip i{ font-style:normal; font-size:11px; opacity:.8; }
.sc-chips .chip:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-shelf{
position:relative; margin-top:var(--sp7); padding:0 var(--sp5);
scroll-margin-top:calc(var(--sp8) + 62px);
}
.sc-shelf.lit .sc-sec h2{ color:var(--accent, var(--hero)); }
.sc-sec{ display:flex; align-items:center; gap:var(--sp3); margin-bottom:var(--sp4); }
.sc-sec.center{ justify-content:center; }
.sc-sec .bar{
width:3px; height:26px; border-radius:2px; flex:none;
background:var(--accent, var(--hero));
}
.sc-sec h2{
margin:0; font:700 clamp(19px, 2.6vw, 26px)/1.1 var(--f-display);
letter-spacing:-.03em; color:var(--t1); transition:color var(--d-sheet);
}
.sc-sec .why{ color:var(--t3); font:500 12.5px/1.3 var(--f-ui); }
.sc-sec .all{
margin-left:auto; flex:none; color:var(--t2); text-decoration:none;
font:600 12.5px/1 var(--f-ui); white-space:nowrap; padding:8px 0;
}
.sc-sec .all:hover{ color:var(--accent, var(--hero)); }
@media (max-width:680px){ .sc-sec .why{ display:none; } }
.sc-rail{
display:flex; gap:var(--sp3); overflow-x:auto;
scroll-snap-type:x proximity; scroll-padding-inline:var(--sp5);
margin:0 calc(var(--sp5) * -1); padding:6px var(--sp5) var(--sp5);
scrollbar-width:none; scroll-behavior:smooth; overscroll-behavior-x:contain;
}
.sc-rail::-webkit-scrollbar{ display:none; }
.sc-rail > *{ flex:none; scroll-snap-align:start; }
.sc-rail:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:-2px; border-radius:var(--r-md); }
.sc-arw{
display:none; position:absolute; top:calc(50% - 10px); z-index:6;
width:46px; height:46px; border-radius:var(--r-full);
background:var(--s3); border:1px solid var(--hair2); color:var(--t1);
place-items:center; box-shadow:var(--sh-md); cursor:pointer;
transition:opacity var(--d-std), background var(--d-micro);
}
.sc-arw:hover{ background:var(--s4); }
.sc-arw svg{ width:19px; height:19px; }
.sc-arw.l{ left:6px; } .sc-arw.r{ right:6px; }
.sc-arw[disabled]{ opacity:0; pointer-events:none; }
@media (min-width:700px){ .sc-arw{ display:grid; } }
.sc-card{
position:relative; width:152px; display:block; text-decoration:none; color:inherit;
border-radius:var(--r-md); overflow:hidden;
background:var(--s1); border:1px solid var(--hair);
transition:border-color var(--d-micro) var(--e-effect), transform var(--d-std) var(--e-spring-soft);
}
@media (min-width:900px){ .sc-card{ width:200px; } }
.sc-card:hover{ border-color:var(--accent, var(--hero)); transform:translateY(-4px); }
.sc-card:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-card .ph{ position:relative; display:block; width:100%; aspect-ratio:1/1; background:var(--s3); overflow:hidden; }
.sc-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-card .ph.mono{
display:grid; place-items:center;
font:700 clamp(30px, 12vw, 52px)/1 var(--f-serif); color:var(--t3);
background:linear-gradient(150deg, var(--s3), var(--s2));
}
.sc-card .bd{ display:block; padding:var(--sp3) var(--sp3) calc(var(--sp3) + 2px); }
.sc-card .nm{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
font:700 14.5px/1.25 var(--f-ui); color:var(--t1); letter-spacing:-.01em;
min-height:36px;
}
.sc-card .tg{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
margin-top:4px; font-size:12.5px; line-height:1.35; color:var(--t2); min-height:34px;
}
.sc-card .go{ display:block; margin-top:var(--sp2); font:650 12px/1 var(--f-ui); color:var(--hero); }
.sc-seen{
position:absolute; right:9px; top:9px; z-index:4;
display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px 0 7px;
border-radius:var(--r-full); background:var(--win); color:#06210d;
font:700 10px/1 var(--f-ui); letter-spacing:.04em; text-transform:uppercase;
}
.sc-seen svg{ width:12px; height:12px; }
.sc-rank{ display:flex; align-items:flex-start; }
.sc-rank .num{
flex:none; margin-top:10px; user-select:none; pointer-events:none;
font:800 clamp(58px, 13vw, 104px)/.78 var(--f-display);
color:var(--s0); -webkit-text-stroke:2px var(--hair2);
transition:-webkit-text-stroke-color var(--d-sheet);
}
.sc-rank .sc-card{ margin-left:-14px; z-index:2; }
.sc-rank:hover .num{ -webkit-text-stroke-color:var(--accent, var(--hero)); }
.sc-block{ margin-top:var(--sp8); padding:0 var(--sp5); }
.sc-panel{
position:relative; overflow:hidden; border-radius:var(--r-lg);
background:var(--s1); border:1px solid var(--hair); padding:var(--sp6);
}
.sc-make{
display:flex; align-items:center; gap:var(--sp5); flex-wrap:wrap;
background:linear-gradient(120deg, var(--hero-lo), transparent 60%);
border:1px dashed var(--hero-line);
}
.sc-make .plus{
flex:none; width:56px; height:56px; border-radius:var(--r-full);
background:var(--hero-grad); display:grid; place-items:center;
color:var(--on-hero); font:300 30px/1 var(--f-ui);
}
.sc-make .tx{ flex:1; min-width:200px; }
.sc-make h3{ margin:0; font:700 clamp(18px, 2.4vw, 23px)/1.15 var(--f-serif); color:var(--t1); }
.sc-make p{ margin:6px 0 0; color:var(--t2); font-size:var(--fs-small); max-width:52ch; }
.sc-story .tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp3); margin-top:var(--sp4); }
@media (min-width:760px){ .sc-story .tiles{ grid-template-columns:repeat(4,1fr); } }
.sc-story .tile{
padding:var(--sp4); border-radius:var(--r-md); background:var(--s2);
border:1px solid var(--hair); text-decoration:none;
transition:border-color var(--d-micro), transform var(--d-std) var(--e-out);
}
.sc-story .tile:hover{ border-color:var(--hero-line); transform:translateY(-3px); }
.sc-story .tile b{ display:block; font:700 14.5px/1.2 var(--f-ui); color:var(--t1); }
.sc-story .tile span{ display:block; margin-top:4px; color:var(--t3); font-size:12px; }
.sc-books{
display:flex; gap:var(--sp3); overflow-x:auto; scrollbar-width:none;
margin:0 calc(var(--sp5) * -1); padding:2px var(--sp5) var(--sp4);
scroll-snap-type:x proximity;
}
.sc-books::-webkit-scrollbar{ display:none; }
.sc-books .bk{
flex:none; width:150px; text-decoration:none; scroll-snap-align:start;
transition:transform var(--d-std) var(--e-out);
}
.sc-books .bk > img,
.sc-books .bk > *:not(b):not(i){
display:block; width:100%; aspect-ratio:2/3; object-fit:cover;
border-radius:var(--r-md); background:var(--s2); border:1px solid var(--hair);
overflow:hidden;
}
.sc-books .bk > *:not(b):not(i) img{
display:block; width:100%; height:100%; object-fit:cover;
}
.sc-books .bk:hover{ transform:translateY(-4px); }
.sc-books .bk b{ display:block; margin-top:var(--sp2); font:700 13.5px/1.3 var(--f-serif); color:var(--t1); }
.sc-books .bk i{ display:block; margin-top:3px; font-style:normal; color:var(--t3); font-size:11.5px; }
.sc-az nav{ display:flex; flex-wrap:wrap; gap:6px; }
.sc-az nav a{
min-width:40px; height:40px; padding:0 10px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:12px; background:var(--s2); border:1px solid var(--hair);
color:var(--t2); text-decoration:none; font:700 13.5px/1 var(--f-ui);
}
.sc-az nav a:hover{ background:var(--s3); color:var(--t1); border-color:var(--hair2); }
.sc-az nav a.all{ background:var(--hero); color:var(--on-hero); border-color:transparent; padding:0 16px; }
.sc-az nav a:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-foot{
display:flex; flex-wrap:wrap; gap:var(--sp4); justify-content:center;
padding:var(--sp8) var(--sp5) var(--sp7); margin-top:var(--sp8);
border-top:1px solid var(--hair);
}
.sc-foot a{
display:inline-block; padding:5px 6px; color:var(--t3);
text-decoration:none; font-size:var(--fs-small); border-radius:8px;
}
.sc-foot a:hover{ color:var(--t1); }
.sc-foot a:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
.sc-rail, .sc-books{ scroll-behavior:auto; }
.sc-card, .sc-btn, .sc-recents .ring, .sc-story .tile{ transition:none; }
}

/* == showcase3.css == */
body.sc3-body{ padding-bottom: max(var(--nav-gap, 88px), 104px); }
.sc3-body .sc-shell{
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.sc3-body .pvh{ padding-top: calc(var(--sp3, 12px) + env(safe-area-inset-top, 0px)); }
.sc3-hero{ padding: 18px 20px 4px; }
.sc3-hero h1{
margin: 0;
font: 800 clamp(23px, 5.2vw, 34px)/1.08 var(--f-display, inherit);
letter-spacing: -.03em;
color: var(--t1);
text-wrap: balance;
}
.sc3-hero p{
margin: 8px 0 0;
max-width: 56ch;
font-size: var(--fs-small, 13.5px);
line-height: 1.5;
color: var(--t2);
}
.sc3-hero em{ font-style: normal; color: var(--hero-hi, var(--hero)); }
.sc3-rc{ padding: 12px 16px 4px; }
.sc3-rc-head{ display: flex; align-items: baseline; gap: 10px;
padding: 0 16px; margin-bottom: 8px; }
.sc3-rc-head b{ font-size: 14px; font-weight: 700; color: var(--t1); }
.sc3-rc-head a{ margin-left: auto; font-size: 12.5px; color: var(--hero); text-decoration: none; }
.sc3-rc-head a:hover{ text-decoration: underline; }
.sc3-body .sc-recents{
padding: 4px 16px 8px;
gap: 12px;
overflow-x: visible;
}
.sc3-body .sc-recents .lbl{ display: none; }
.sc3-body .sc-recents .who{ width: 54px; }
.sc3-body .sc-recents .who b{ width: 54px; font-size: 11px; }
.sc3-body .sc-recents .ring{
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
}
.sc3-body .sc-recents .mono{ font-size: 16px; }
.sc3-body .sc-recents .un{ width: 12px; height: 12px; }
.sc3-body .sc3-navbar{ position: static; padding: 8px 0 6px; }
@media (min-width: 900px){
.sc3-body .sc3-navbar{
position: sticky;
top: var(--sc3-head, 64px);
z-index: 30;
padding: 10px 0 10px;
}
}
.sc3-chips{
display: flex; flex-wrap: wrap; gap: 8px;
padding: 0 16px;
}
@media (max-width: 699px){
.sc3-chips{ flex-wrap: nowrap; overflow: hidden; }
.sc3-chips .chip:nth-of-type(n+4):not(.opener){ display: none; }
.sc3-chips .chip.opener{ margin-left: auto; }
}
.sc3-chips .chip,
.sc3-sug-cats .chip{
flex: none; display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 15px; border-radius: var(--r-full, 999px);
background: var(--s2); border: 1px solid var(--hair);
color: var(--t2); font-size: 13px; text-decoration: none;
transition: border-color 140ms ease;
}
.sc3-chips .chip:hover,
.sc3-sug-cats .chip:hover{ border-color: var(--hair2); color: var(--t1); }
.sc3-chips .chip.on,
.sc3-sug-cats .chip.on{ background: var(--s4); color: var(--t1); border-color: var(--hair2); }
.sc3-chips .chip i,
.sc3-sug-cats .chip i{ font-style: normal; font-size: 10.5px; color: var(--t3); }
.sc3-chips .chip.opener,
.sc3-sug-cats .chip.opener{ background: none; border-style: dashed; color: var(--hero); }
.sc3-body .sc3-sec{ padding: 0 16px; margin: 26px 0 12px; }
.sc3-grid{
display: grid; gap: 12px; padding: 0 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sc3-grid > .sc-card,
.sc3-grid .sc-rank .sc-card{ width: auto; min-width: 0; }
.sc3-grid .sc-rank{ min-width: 0; }
.sc3-more{ padding: 14px 16px 0; }
.sc3-more a{
display: block; text-align: center; padding: 12px;
border: 1px solid var(--hair2); border-radius: var(--r-full, 999px);
color: var(--t1); font-weight: 600; font-size: 14px; text-decoration: none;
}
.sc3-more a:hover{ border-color: var(--hero); color: var(--hero); }
.sc3-tiles{
display: grid; gap: 10px; padding: 0 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sc3-tile{
display: flex; flex-direction: column; justify-content: center; gap: 3px;
min-height: 68px;
padding: 12px 14px; border-radius: var(--r-sm, 10px);
background: var(--s1); border: 1px solid var(--hair);
text-decoration: none; transition: border-color 140ms ease;
}
.sc3-tile:hover{ border-color: var(--hero); }
.sc3-tile b{
font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--t1);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc3-tile span{ font-size: 11.5px; color: var(--t3); min-height: 14px; }
.sc3-steps{ display: grid; gap: 10px; padding: 0 16px; }
.sc3-step{
padding: 14px 16px; border-radius: var(--r-sm, 10px);
background: var(--s1); border: 1px solid var(--hair);
}
.sc3-step i{
font-style: normal; display: block; margin-bottom: 5px;
font: 600 10px/1 var(--f-ui, inherit); letter-spacing: .12em;
text-transform: uppercase; color: var(--hero);
}
.sc3-step b{ display: block; font-size: 14px; margin-bottom: 3px; color: var(--t1); }
.sc3-step span{ font-size: 12.5px; color: var(--t3); }
.sc3-faq{ padding: 0 16px; }
.sc3-faq .sc3-faq-list{ display: grid; gap: 10px; }
.sc3-faq dl, .sc3-faq .qa{ margin: 0; }
.sc3-faq dt, .sc3-faq h3{
margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--t1);
}
.sc3-faq dd, .sc3-faq p{
margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--t2);
}
.sc3-body .pvh{ transition: padding var(--d-std, 200ms) ease; }
.sc3-body .pvh-find{
transition: height var(--d-std, 200ms) ease,
opacity 140ms ease,
margin var(--d-std, 200ms) ease;
}
.sc3-body.sc3-min .pvh-find{
height: 0; min-height: 0; opacity: 0; margin: 0;
padding-top: 0; padding-bottom: 0; overflow: hidden; border-color: transparent;
}
.sc3-body.sc3-min .pvh{ row-gap: 0; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce){
.sc3-body .pvh, .sc3-body .pvh-find{ transition: none; }
}
.sc3-body .pvh-find{ position: relative; }
.sc3-sug{
position: absolute; left: 0; right: 0; top: calc(100% + 8px);
z-index: 60; max-height: min(64vh, 520px); overflow-y: auto;
background: var(--s2); border: 1px solid var(--hair2);
border-radius: var(--r-md, 22px); box-shadow: var(--sh-lg);
padding: 6px;
}
.sc3-sug .dym{
display: block; padding: 8px 12px 6px;
font-size: 12px; color: var(--t3);
}
.sc3-sug .dym b{ color: var(--t1); }
.sc3-sug .it{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--r-sm, 10px);
text-decoration: none; color: var(--t1);
}
.sc3-sug .it:hover, .sc3-sug .it.on{ background: var(--s3); }
.sc3-sug .av{
flex: none; width: 40px; height: 40px; border-radius: 50%;
overflow: hidden; background: var(--s3); display: grid; place-items: center;
font: 700 15px/1 var(--f-serif, serif); color: var(--t3);
}
.sc3-sug .av img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sc3-sug .tx{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc3-sug .tx b{ font-size: 13.5px; font-weight: 600; }
.sc3-sug .tx i{
font-style: normal; font-size: 11.5px; color: var(--t3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc3-sug .all{
display: block; margin-top: 4px; padding: 10px 12px;
border-top: 1px solid var(--hair); color: var(--hero);
font-size: 12.5px; text-decoration: none;
}
.sc3-sug .all:hover, .sc3-sug .all.on{ background: var(--s3); }
.sc3-sug .make{
display: flex; align-items: center; gap: 10px;
margin-top: 4px; padding: 8px 10px;
border-radius: 14px; text-decoration: none; color: var(--t1);
background: var(--hero-lo); border: 1px dashed var(--hero-line);
}
.sc3-sug .make:hover, .sc3-sug .make.on{
background: color-mix(in srgb, var(--hero) 20%, transparent);
}
.sc3-sug .make.quiet{
margin-top: 6px; background: none;
border-style: solid; border-color: var(--hair);
}
.sc3-sug .make.quiet:hover, .sc3-sug .make.quiet.on{ background: var(--s3); }
.sc3-sug .make .mono{
position: relative; flex: none; width: 40px; height: 40px;
border-radius: 50%; display: grid; place-items: center;
background: var(--hero-grad); color: var(--on-hero);
font: 700 16px/1 var(--f-serif, serif);
}
.sc3-sug .make.quiet .mono{ background: var(--s3); color: var(--hero); }
.sc3-sug .make .mono s{
position: absolute; right: -2px; bottom: -2px;
width: 17px; height: 17px; border-radius: 50%;
display: grid; place-items: center; text-decoration: none;
background: var(--s2); color: var(--hero);
border: 1px solid var(--hair2); font: 700 12px/1 var(--f-ui);
}
.sc3-sug .make .tx{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc3-sug .make .tx b{ font-size: 13.5px; font-weight: 600; }
.sc3-sug .make .tx i{
font-style: normal; font-size: 11.5px; color: var(--t2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc3-sug .dym a{ color: var(--hero); text-decoration: none; }
.sc3-sug .dym a:hover, .sc3-sug .dym a.on{ text-decoration: underline; }
.sc3-body .pvh-clr{ display: none; }
.sc3-body .pvh-find.has .pvh-clr{ display: grid; }
@media (max-width: 819px){
.sc3-body .sc-stage .in{ padding: 14px 16px 10px; }
.sc3-body .sc-stage h2{
font-size: clamp(24px, 6.2vw, 30px);
letter-spacing: -.03em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.sc3-body .sc-stage .qt{
margin-top: 6px; font-size: 13.5px;
-webkit-line-clamp: 2;
}
.sc3-body .sc-stage .row{ margin-top: 12px; flex-wrap: nowrap; }
.sc3-body .sc-stage .sc-btn{ height: 42px; font-size: 14px; }
.sc3-body .sc-stage .dots{ margin-top: 6px; margin-bottom: -2px; }
.sc3-body .sc-stage .art{ padding: 0 16px 14px; }
.sc3-body .sc-stage .art img{ width: 46px; height: 46px; border-radius: 14px; }
.sc3-body .sc-stage .art .more{ height: 46px; padding: 0 10px; font-size: 12px; border-radius: 14px; }
}
@media (max-width: 400px){
.sc3-body .sc-stage .art{ overflow-x: visible; }
.sc3-body .sc-stage .art img:nth-of-type(n+6){ display: none; }
}
.sc3-body .sc-books{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; margin: 0; padding: 0 16px;
overflow: visible; scroll-snap-type: none;
}
.sc3-body .sc-books > *{ flex: none; width: auto; min-width: 0; scroll-snap-align: none; }
@media (min-width: 700px){
.sc3-hero{ padding: 22px 20px 4px; }
.sc3-rc{ padding: 14px 20px 4px; }
.sc3-chips{ padding: 0 20px; }
.sc3-body .sc3-sec{ padding: 0 20px; }
.sc3-grid,
.sc3-tiles,
.sc3-steps,
.sc3-faq,
.sc3-more,
.sc3-body .sc-books{ padding-left: 20px; padding-right: 20px; }
.sc3-grid{ grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.sc3-tiles{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sc3-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc3-body .sc-books{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sc3-faq .sc3-faq-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
.sc3-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sc3-body.sc3-min .pvh-find{ height: 40px; opacity: 1; overflow: visible; margin: 0 auto; }
.sc3-body.sc3-min .pvh{ padding-bottom: var(--sp3, 12px); }
}
@media (min-width: 1000px){
.sc3-rankgrid{ grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}
.sc3-findbtn{
display: none; width: 36px; height: 36px; padding: 0; flex: none;
align-items: center; justify-content: center;
border: 0; border-radius: 50%; cursor: pointer;
background: var(--s3); color: var(--t2);
}
.sc3-findbtn svg{ width: 17px; height: 17px; }
.sc3-findbtn:hover{ color: var(--t1); }
.sc3-body.sc3-min .sc3-findbtn{ display: inline-flex; }
@media (min-width: 900px){ .sc3-body.sc3-min .sc3-findbtn{ display: none; } }
.sc3-sug-cats{ display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; }
.sc3-more.loading a{ color: var(--t3); border-color: var(--hair); pointer-events: none; }
.sc3-more.sc3-done a{ color: var(--hero); }
.sc3-text{ padding: 0 16px; display: grid; gap: 12px; }
.sc3-text p{
margin: 0; max-width: 68ch;
font-size: 13.5px; line-height: 1.6; color: var(--t2);
}
@media (min-width: 700px){
.sc3-text{ padding: 0 20px; }
.sc3-text p{ font-size: 14.5px; }
}