.happy-view .detail-content{background:#f7f6fa;color:#23212a}
.happy-view .detail-cover,.happy-view .detail-intro{display:none}
.happy-view .detail-section{width:100%;padding:0}
.hp-case{--hp-purple:#5d00ff;font-family:Arial,"PingFang SC",sans-serif}
.hp-case *{box-sizing:border-box}
.hp-hero{padding:44px 5% 0;background:#eee9ff;overflow:hidden}
.hp-overline{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.5px;color:#604788}
.hp-hero h3{font-size:clamp(64px,10vw,180px);font-weight:800;letter-spacing:-.075em;line-height:1;margin:64px 0 32px;color:var(--hp-purple);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hp-hero h3>span{font-size:clamp(16px,2vw,30px);line-height:1.1;letter-spacing:-.04em;font-weight:500;padding-bottom:10px}
.hp-hero-title{font-size:clamp(24px,3vw,44px);letter-spacing:-.04em;margin:0 0 18px}
.hp-hero-copy{font-size:16px;line-height:1.9;max-width:610px;color:#625a73;margin:0}
.hp-index{display:grid;grid-template-columns:repeat(7,1fr);margin-top:56px;border-top:1px solid #d6cbe8;padding:24px 0;gap:10px}
.hp-index span{font-size:14px}.hp-index small{display:block;color:#81718e;font-size:12px;margin-bottom:8px}
.hp-section{padding:68px 5%}
.hp-heading>span{font-size:12px;letter-spacing:1.5px;color:var(--hp-purple)}
.hp-heading h3{font-size:clamp(28px,3.5vw,52px);font-weight:500;line-height:1.25;letter-spacing:-.04em;margin:24px 0}
.hp-heading>p{max-width:650px;font-size:16px;line-height:1.9;color:#6b6575;margin:0 0 36px}
.hp-system{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px}
.hp-color{min-height:160px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border-radius:6px}
.hp-color span{font-size:12px;letter-spacing:1px}.hp-color b{font-size:20px;font-weight:500}
.hp-purple{background:#5d00ff;color:white}.hp-pink{background:#ff4bcf;color:#38102d}
.hp-rule{padding:16px;border-left:1px solid #ddd8e4}.hp-rule>b{font-size:38px;font-weight:500;color:#38303f}.hp-rule>b span{font-size:12px;padding-left:8px}.hp-rule p{font-size:12px;line-height:1.8;color:#77707e}
.hp-explorer{background:white}.hp-tabs{display:flex;gap:clamp(10px,2vw,30px);flex-wrap:wrap;margin:12px 0 24px;border-bottom:1px solid #e5e0eb}
.hp-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:16px 0;color:#827a8c;cursor:pointer;font:inherit;font-size:15px;transition:color .2s}
.hp-tabs button small{font-size:12px;margin-right:8px;opacity:.6}
.hp-tabs button[aria-pressed=true]{color:var(--hp-purple);border-bottom-color:var(--hp-purple)}
.hp-tabs button:hover{color:var(--hp-purple)}.hp-tabs button:focus-visible{outline:2px solid var(--hp-purple);outline-offset:5px}
.hp-screen{margin:0;border:1px solid #e5e0eb;border-radius:6px;overflow:hidden;background:#fff}
.hp-screen img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.hp-site-copy{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;margin-top:30px}
.hp-site-copy h4{font-size:22px;font-weight:500;line-height:1.5;margin:0}
.hp-site-copy p{font-size:14px;line-height:1.9;color:#6b6575;margin:0}
.hp-site-copy span{display:block;color:#8a7c9d;font-size:12px;margin-top:18px;line-height:1.8}
.hp-signoff{padding:48px 5%;background:#5d00ff;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px}
.hp-signoff>b{font-size:clamp(30px,5vw,64px);letter-spacing:-.06em}.hp-signoff>b span{font-weight:400;margin-left:20px}
.hp-signoff p{font-size:15px;line-height:1.8}.hp-signoff p span{display:block;font-size:12px;opacity:.65;letter-spacing:1px;margin-top:8px}
.happy-view .detail-ending{color:#6b6575;border-color:#ddd8e4}.happy-view .detail-ending button{color:#5d00ff}
@media(max-width:900px){.hp-system{grid-template-columns:1fr 1fr}.hp-site-copy{grid-template-columns:1fr;gap:14px}.hp-hero h3{flex-wrap:wrap}.hp-section{padding-top:44px;padding-bottom:44px}.hp-signoff{align-items:flex-start;flex-direction:column}.hp-index{grid-template-columns:repeat(4,1fr)}}
.happy-view .hp-hero .hp-hero-title{font-size:clamp(24px,3vw,44px);line-height:1.35;margin:0 0 18px;color:#23212a}
.happy-view .hp-hero .hp-hero-copy{font-size:16px;line-height:1.9;color:#625a73;max-width:610px}

.hp-explorer .hp-screen img{aspect-ratio:auto;height:auto}
.hp-gallery{background:#eeeaf6;overflow:hidden}
.hp-mockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px;align-items:start;padding:8px 0 70px}
.hp-mockup{margin:0;min-width:0}
.hp-mockup:nth-child(even){transform:translateY(100px)}
.hp-mockup:last-child{width:85%;grid-column:1/-1;justify-self:center;margin-top:70px}
.hp-mockup figcaption{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.hp-mockup figcaption>span{font-size:12px;color:#967fae}
.hp-mockup h4{font-size:18px;font-weight:500;margin:0;color:#3f2d57}
.hp-browser{border:1px solid #d7d0e5;border-radius:8px;overflow:hidden;background:white;box-shadow:0 16px 36px #30135c16}
.hp-browser-bar{height:30px;display:flex;gap:5px;align-items:center;padding:0 12px;background:#faf9fc;border-bottom:1px solid #e8e4ef}
.hp-browser-bar i{width:5px;height:5px;border-radius:50%;background:#cdc5d9}
.hp-browser-bar span{font-size:12px;color:#82718f;margin-left:auto;letter-spacing:.4px}
.hp-browser>img{display:block;width:100%;height:auto}
.hp-logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e2dce9;border:1px solid #e2dce9}
.hp-logo-grid figure{background:#fff;margin:0;padding:28px 18px;text-align:center}
.hp-logo-grid img{width:100%;height:120px;object-fit:contain}
.hp-logo-grid figcaption{font-size:14px;color:#75657f;margin-top:16px}
.hp-logo-guide{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:48px}
.hp-logo-safe{padding:20%;outline:1px dashed #ac91cc;outline-offset:-1px;background:repeating-linear-gradient(0deg,transparent 0 23px,#5d00ff06 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#5d00ff06 23px 24px)}
.hp-logo-safe img{width:100%;height:auto;display:block;outline:1px solid #b39bd0}
.hp-logo-guide span{font-size:12px;color:#5d00ff;letter-spacing:1px}.hp-logo-guide h4{font-size:24px;font-weight:500;margin:16px 0}.hp-logo-guide p{font-size:14px;line-height:1.9;color:#75657f}
.hp-icons{background:#eeebf5}.hp-icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 20px}.hp-icon-grid figure{margin:0;text-align:center}.hp-icon-display{height:100px;display:grid;place-items:center;background:#fff;border:1px solid #ddd5e7;border-radius:12px}.hp-icon-grid figcaption{font-size:14px;margin:16px 0}.hp-icon-sizes{display:flex;align-items:center;justify-content:center;gap:18px;height:40px}.hp-icon-grid small{font-size:12px;color:#8a7a99}.hp-icon-grid img{object-fit:contain}
@media(max-width:900px){.hp-mockup-grid{gap:28px 16px}.hp-mockup:nth-child(even){transform:translateY(60px)}.hp-logo-grid{grid-template-columns:repeat(2,1fr)}.hp-logo-guide{grid-template-columns:1fr}.hp-icon-grid{grid-template-columns:repeat(3,1fr)}}
.hp-case .hp-logo-grid img,.hp-case .hp-logo-safe img,.hp-case .hp-icon-grid img{border-radius:0;box-shadow:none}
.hp-case .hp-icon-grid img{width:32px;height:32px}
.hp-case .hp-icon-sizes img:first-child{width:16px;height:16px}

/* Project cover */
.hp-case .hp-hero{padding:32px 5% 0;background:#f0ecfa}
.hp-hero .hp-overline{font-size:12px;letter-spacing:1.2px;color:#77648d}
.hp-cover-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:42px 0 30px}
.hp-case .hp-cover-heading h3{display:block;font-size:clamp(64px,9vw,140px);line-height:.85;letter-spacing:-.075em;margin:0;font-weight:800}
.hp-case .hp-cover-heading h3>span{display:block;font-size:clamp(20px,2.4vw,34px);line-height:1.35;font-weight:500;letter-spacing:.06em;padding:0;margin-top:20px;color:#342449}
.hp-cover-note{font-size:12px;line-height:1.6;letter-spacing:1px;color:#79658e;padding-bottom:3px}
.hp-cover-intro{display:grid;grid-template-columns:1fr 1.15fr;align-items:end;gap:24px;padding:28px 0 30px;border-top:1px solid #d8cfe5}
.happy-view .hp-cover-intro .hp-hero-title{font-size:clamp(20px,2vw,28px);line-height:1.6;letter-spacing:0;margin:0;color:#342449}
.happy-view .hp-cover-intro .hp-hero-copy{font-size:14px;line-height:1.9;margin:0;color:#756384}
.hp-hero .hp-index{grid-template-columns:repeat(7,minmax(0,1fr));margin:0;padding:22px 0 24px;gap:4px;border-top:1px solid #d8cfe5}
.hp-hero .hp-index>span{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:#5d476f}
.hp-case .hp-index img{width:32px;height:32px;object-fit:contain;border-radius:0;box-shadow:none}
@media(max-width:600px){.hp-cover-intro{grid-template-columns:1fr;gap:12px}.hp-cover-heading{margin-top:30px}.hp-cover-note{font-size:12px;letter-spacing:0}.hp-hero .hp-overline{letter-spacing:0;gap:10px;flex-wrap:wrap}}

/* Seven-site selector */
.hp-explorer .hp-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:16px 0 24px;padding:0 0 12px;border-bottom:1px solid #e5deed}
.hp-explorer .hp-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;padding:16px 4px;border:0;border-radius:8px;background:transparent;color:#62536f;font-size:15px;font-weight:500;transition:background .18s,color .18s}
.hp-case .hp-tabs button img{width:28px;height:28px;border-radius:0;box-shadow:none;object-fit:contain}
.hp-explorer .hp-tabs button:hover{background:#f5f1fc;color:#5d00ff}
.hp-explorer .hp-tabs button[aria-pressed=true]{background:#eee6ff;color:#5d00ff;font-weight:600}
.hp-explorer .hp-tabs button[aria-pressed=true]::after{content:"";position:absolute;bottom:-13px;left:15%;right:15%;height:3px;border-radius:2px;background:#5d00ff}
@media(max-width:600px){.hp-explorer .hp-tabs{gap:3px}.hp-explorer .hp-tabs button{font-size:12px;padding:12px 2px}.hp-case .hp-tabs button img{width:24px;height:24px}}

.happy-view .detail-ending .detail-close{border-color:#5d00ff30;transition:background .2s,border-color .2s,color .2s}
.happy-view .detail-ending .detail-close:hover,.happy-view .detail-ending .detail-close:focus-visible{background:#eae0ff;border-color:#5d00ff70;color:#5d00ff}
.happy-view .detail-ending .return-arrow{display:inline-block;transition:transform .2s}
.happy-view .detail-ending .detail-close:hover .return-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.happy-view .detail-ending .detail-close,.happy-view .detail-ending .return-arrow{transition:none}.happy-view .detail-ending .detail-close:hover .return-arrow{transform:none}}