/* msk web build 202610101211 */
:root{
  --bg:#08090d;
  --bg2:#0d1016;
  --panel:#11151d;
  --panel2:#171c26;
  --line:#2b3342;
  --text:#f5f7fb;
  --muted:#9aa4b4;
  --acid:#dcff43;
  --cyan:#50ddd9;
  --violet:#aa83ff;
  --danger:#ff626d;
  --max:1240px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:
 radial-gradient(900px 520px at 50% -100px,rgba(220,255,67,.09),transparent 60%),
 radial-gradient(700px 500px at 80% 25%,rgba(170,131,255,.055),transparent 60%),
 linear-gradient(180deg,#090a0e 0%,#08090d 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Noto Sans CJK JP",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
.topbar{position:sticky;top:0;z-index:50;height:68px;background:rgba(8,9,13,.74);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:23px;font-weight:850;letter-spacing:-.04em}
.nav{display:flex;gap:8px;align-items:center}
.pill,.lang-switch button{border:1px solid var(--line);background:#131720;color:#dfe5ed;padding:8px 12px;border-radius:999px;cursor:pointer;transition:.2s}
.pill:hover,.lang-switch button:hover{border-color:#5a6577;background:#1a202b}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#11151d}
.lang-switch button{border:0;border-radius:0;background:transparent;padding:8px 11px;color:#798497}
.lang-switch button.active{background:#262d38;color:white}
.hero{padding:82px 0 60px;text-align:center;overflow:hidden}
.hero-kicker{font-size:13px;letter-spacing:.23em;color:var(--acid);font-weight:800;text-transform:uppercase}
.hero h1{font-size:clamp(58px,9vw,126px);line-height:.88;margin:18px 0 22px;letter-spacing:-.07em;font-weight:900}
.hero h1 small{display:block;font-size:.22em;letter-spacing:.09em;color:#aeb6c3;margin-bottom:16px}
.hero-lead{width:min(850px,100%);margin:0 auto 38px;font-size:clamp(18px,2vw,25px);line-height:1.55;color:#c7ced8;letter-spacing:-.015em}
.hero-screen{position:relative;width:min(1180px,calc(100% - 20px));margin:42px auto 0;border-radius:18px;overflow:hidden;border:1px solid #353d4a;background:#0a0c11;box-shadow:0 45px 120px rgba(0,0,0,.68),0 0 70px rgba(220,255,67,.07)}
.hero-screen::before{content:"";position:absolute;inset:-1px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(220,255,67,.08);pointer-events:none;z-index:2}
.hero-screen img{width:100%}
.section{padding:100px 0;border-top:1px solid rgba(255,255,255,.055)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);font-weight:800;margin-bottom:16px}
.section h2{font-size:clamp(37px,5vw,70px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px;font-weight:850}
.section h3{font-size:clamp(25px,3vw,40px);line-height:1.08;letter-spacing:-.035em;margin:0 0 16px}
.section p{color:#b8c0cc;font-size:17px;line-height:1.85;margin:0 0 17px}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.intro-big{font-size:clamp(30px,4vw,54px);line-height:1.15;letter-spacing:-.045em;font-weight:750}
.acid{color:var(--acid)} .cyan{color:var(--cyan)} .violet{color:var(--violet)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}
.card{background:linear-gradient(155deg,#151923,#0e1118);border:1px solid #252c39;border-radius:18px;padding:28px;min-height:225px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-60px;top:-60px;background:radial-gradient(circle,rgba(220,255,67,.14),transparent 67%)}
.card .n{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#697587;margin-bottom:48px}
.card h3{font-size:30px;margin-bottom:12px}
.card p{font-size:15px;line-height:1.65;margin:0}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:58px}
.feature.reverse .copy{order:2}.feature.reverse .visual{order:1}
.visual{border:1px solid #2a313e;border-radius:18px;background:#0a0c11;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.visual img{width:100%;height:auto}
.visual.tall{max-height:600px;overflow:hidden}.visual.tall img{object-fit:cover;object-position:top}
.feature-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tag{border:1px solid #333b49;background:#121720;border-radius:999px;padding:6px 10px;font:650 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#aeb8c8}
.behaviors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.behavior{padding:18px;border-radius:13px;border:1px solid #28303d;background:#11151d}
.behavior b{display:block;color:#f2f4f8;margin-bottom:5px}.behavior span{font-size:13px;color:#8e99aa;line-height:1.45}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.duo .card{min-height:260px}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:38px}
.spec{padding:20px;border-radius:14px;border:1px solid #252d39;background:#11151d}
.spec small{display:block;color:#707c8f;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}.spec strong{font-size:16px}
.manuals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.manual-link{padding:24px 26px;border:1px solid #353d4a;border-radius:16px;background:#141923;display:flex;justify-content:space-between;align-items:center;transition:.2s}
.manual-link:hover{transform:translateY(-2px);border-color:var(--acid)}
.manual-link .arrow{font-size:25px;color:var(--acid)}
.footer{padding:40px 0 50px;color:#778295;font-size:13px;border-top:1px solid rgba(255,255,255,.06)}
.footer .wrap{display:flex;justify-content:space-between;gap:20px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
/* minimal top */
.home{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(900px 650px at 50% 50%,rgba(220,255,67,.055),transparent 65%),#08090d}
.home-main{display:flex;align-items:center;justify-content:center;padding:45px 20px}
.product-portal{width:min(1050px,100%);text-align:center}
.product-portal h1{font-size:clamp(56px,10vw,126px);line-height:.85;letter-spacing:-.065em;margin:0 0 30px}
.portal-screen{border-radius:19px;overflow:hidden;border:1px solid #303947;box-shadow:0 45px 100px rgba(0,0,0,.66);transition:.3s transform,.3s border-color}
.product-portal a:hover .portal-screen{transform:translateY(-5px);border-color:#65705d}
.home-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;color:#667183;font-size:12px}
.lang-ja,.lang-en{display:none}html[data-lang="ja"] .lang-ja{display:contents}html[data-lang="en"] .lang-en{display:contents}
@media(max-width:860px){
 .wrap{width:min(100% - 28px,var(--max))}.topbar{height:60px}.brand{font-size:20px}.nav .pill.secondary{display:none}
 .hero{padding-top:58px}.hero-screen{border-radius:12px}
 .section{padding:70px 0}.intro-grid,.feature{grid-template-columns:1fr;gap:34px}.feature.reverse .copy,.feature.reverse .visual{order:initial}.three{grid-template-columns:1fr}.card{min-height:auto}.behaviors{grid-template-columns:repeat(2,1fr)}.duo,.manuals{grid-template-columns:1fr}.spec-grid{grid-template-columns:repeat(2,1fr)}
 .footer .wrap{flex-direction:column}.home-main{padding-inline:12px}.home-footer{padding:16px 18px}
}
@media(max-width:520px){.behaviors,.spec-grid{grid-template-columns:1fr}.hero h1{font-size:54px}.hero-lead{font-size:17px}.nav{gap:5px}.pill{padding:7px 9px;font-size:12px}.lang-switch button{padding:7px 8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.portal-screen,.manual-link{transition:none}}

/* msk portal: intentionally neutral and distinct from product pages */
.home{display:block;min-height:100svh;background:#08090d;color:#f5f7fb}
.home-bar{background:rgba(8,9,13,.82)}
.home-main-v2{overflow:hidden}
.msk-gate{position:relative;min-height:68svh;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(1000px 560px at 50% 20%,rgba(255,255,255,.055),transparent 62%),linear-gradient(180deg,#090b0f,#08090d)}
.msk-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.76) 54%,transparent 100%)}
.msk-orbit{position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;pointer-events:none}
.orbit-a{width:min(72vw,920px);aspect-ratio:1;right:-20vw;top:-45%;transform:rotate(14deg)}
.orbit-b{width:min(48vw,620px);aspect-ratio:1;left:-18vw;bottom:-58%;border-color:rgba(255,255,255,.055)}
.msk-gate-copy{position:relative;z-index:2;padding-top:32px;padding-bottom:32px}
.msk-label,.home-overline{margin:0 0 18px;font:750 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.19em;color:#7e8999}
.msk-gate h1{margin:0;font-size:clamp(110px,25vw,330px);font-weight:900;line-height:.72;letter-spacing:-.095em;color:#f3f5f8}
.msk-sub{margin:45px 0 0;font-size:clamp(18px,2.1vw,28px);line-height:1.5;color:#a8b0bc;letter-spacing:-.02em}
.home-products{padding:110px 0 130px;background:linear-gradient(180deg,#08090d,#0a0c11)}
.home-section-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;margin-bottom:34px}
.home-section-head .home-overline{align-self:start;margin-top:14px}.home-section-head h2{margin:0;font-size:clamp(55px,9vw,124px);line-height:.78;letter-spacing:-.07em}
.home-product-card{display:grid;grid-template-columns:minmax(270px,.72fr) 1.28fr;border:1px solid #2a313c;border-radius:22px;background:#0e1117;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.42);transition:transform .25s,border-color .25s,background .25s}
.home-product-card:hover{transform:translateY(-4px);border-color:#4b5564;background:#10141b}
.home-product-copy{padding:36px;display:grid;grid-template-columns:42px 1fr auto;gap:18px;align-content:center;border-right:1px solid #252b34}
.home-product-index{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#697483;padding-top:5px}
.home-product-copy strong{display:block;font-size:25px;letter-spacing:-.025em;margin-bottom:12px;color:#f2f4f8}
.home-product-copy p{margin:0;color:#9ca6b4;font-size:15px;line-height:1.75}
.home-product-arrow{font-size:25px;color:#7d8795}
.home-product-screen{background:#08090d;min-height:320px;display:flex;align-items:center;justify-content:center;padding:22px}
.home-product-screen img{width:100%;height:auto;border-radius:10px;border:1px solid #303745;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.home-footer{border-top:1px solid rgba(255,255,255,.07);background:#08090d}
.release-note{margin-top:28px;padding:18px 20px;border:1px solid #303744;border-radius:14px;background:#0e1219;color:#9da8b7;font-size:13px;line-height:1.8}
.release-note strong{display:block;color:#e8ebef;font-size:14px;margin-bottom:3px}
@media(max-width:860px){
 .msk-gate{min-height:62svh}.msk-gate h1{font-size:clamp(100px,35vw,210px)}.msk-sub{margin-top:34px}
 .home-products{padding:76px 0 90px}.home-section-head{display:block}.home-section-head h2{margin-top:18px}
 .home-product-card{grid-template-columns:1fr}.home-product-copy{border-right:0;border-bottom:1px solid #252b34;padding:26px}.home-product-screen{min-height:auto;padding:14px}
}
@media(max-width:520px){.msk-grid{background-size:42px 42px}.home-product-copy{grid-template-columns:30px 1fr}.home-product-arrow{display:none}}


/* msk portal product list: reusable for 02, 03, 04... */
.home-products-list{display:grid;gap:28px}
.home-product-name{margin:0 0 7px;font-size:clamp(28px,3.2vw,43px);line-height:1;letter-spacing:-.045em;color:#f4f6f9}
.home-product-card--static{cursor:default}
.home-product-card--static:hover{transform:none;border-color:#353e4b;background:#0e1117}
.home-product-card--acid{position:relative;isolation:isolate}
.home-product-card--acid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(220,255,67,.032),transparent 42%)}
.home-product-card--acid .home-product-index{color:#aabc52}
.home-product-card--acid .home-product-name{color:var(--acid)}
.home-product-card--acid .home-product-screen{background:radial-gradient(500px 280px at 50% 50%,rgba(220,255,67,.055),transparent 70%),#08090d}
.home-product-card:focus-visible,.lang-switch button:focus-visible,.brand:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
@media(max-width:860px){.home-products-list{gap:22px}}

/* msk ACID! product page */
.acid-page{background:radial-gradient(900px 520px at 50% -100px,rgba(220,255,67,.12),transparent 60%),radial-gradient(700px 500px at 84% 28%,rgba(203,48,113,.045),transparent 60%),linear-gradient(180deg,#090a0e 0%,#08090d 100%)}
.acid-page .hero-screen{max-width:1060px}
.acid-page .card::after{background:radial-gradient(circle,rgba(220,255,67,.16),transparent 67%)}
.acid-menu-visual{display:flex;align-items:center;justify-content:center;min-height:360px;background:radial-gradient(circle at 50% 50%,rgba(220,255,67,.06),transparent 62%),#0a0c11;padding:38px}
.acid-menu-visual img{width:min(330px,80%);border:1px solid #303744;border-radius:9px;box-shadow:0 20px 45px rgba(0,0,0,.48)}
@media(max-width:860px){.acid-menu-visual{min-height:260px;padding:26px}}

/* Mac Screen Audio Recorder */
.home-product-card--recorder{position:relative;isolation:isolate}
.home-product-card--recorder::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(255,98,109,.04),transparent 44%)}
.home-product-card--recorder .home-product-index{color:#ff7a84}
.home-product-card--recorder .home-product-screen{background:radial-gradient(500px 280px at 50% 50%,rgba(255,98,109,.06),transparent 70%),#08090d}
.recorder-page{background:radial-gradient(900px 520px at 50% -100px,rgba(255,98,109,.10),transparent 60%),radial-gradient(700px 500px at 84% 28%,rgba(80,221,217,.04),transparent 60%),linear-gradient(180deg,#090a0e 0%,#08090d 100%)}
.recorder-page .hero-kicker{color:var(--danger)}
.recorder-page .eyebrow{color:#ff7a84}
.recorder-page .card::after{background:radial-gradient(circle,rgba(255,98,109,.14),transparent 67%)}
.recorder-accent{color:#ff7380}
.recorder-app-icon{width:82px;height:82px;object-fit:contain;border-radius:18px;margin:0 auto 26px;box-shadow:0 18px 45px rgba(0,0,0,.32)}
.recorder-hero h1{font-size:clamp(55px,8.4vw,116px)}
.recorder-hero-tags{justify-content:center;margin-top:0;margin-bottom:8px}
.recorder-hero-screen{max-width:1060px}
.recorder-ui-visual{padding:22px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),transparent 72%),#0a0c11}
.recorder-ui-visual img{border-radius:11px;border:1px solid #303744;box-shadow:0 22px 55px rgba(0,0,0,.42)}
.recorder-region-visual img{width:100%}
.recorder-note{margin-top:34px}
@media(max-width:860px){.recorder-app-icon{width:66px;height:66px;border-radius:15px}.recorder-ui-visual{padding:14px}}


/* msk Textalk! */
.home-product-card--textalk{position:relative;isolation:isolate}
.home-product-card--textalk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(184,104,255,.045),transparent 44%)}
.home-product-card--textalk .home-product-index{color:#c985ff}
.home-product-card--textalk .home-product-name{color:#dfb1ff}
.home-product-card--textalk .home-product-screen{background:radial-gradient(500px 280px at 50% 50%,rgba(184,104,255,.07),transparent 70%),#08090d}
.textalk-page{background:radial-gradient(900px 520px at 50% -100px,rgba(184,104,255,.12),transparent 60%),radial-gradient(700px 500px at 84% 28%,rgba(80,221,217,.035),transparent 60%),linear-gradient(180deg,#090a0e 0%,#08090d 100%)}
.textalk-page .hero-kicker,.textalk-page .eyebrow{color:#d39bff}
.textalk-page .card::after{background:radial-gradient(circle,rgba(184,104,255,.14),transparent 67%)}
.textalk-accent{color:#d89cff}
.textalk-app-icon{width:82px;height:82px;object-fit:contain;border-radius:18px;margin:0 auto 26px;box-shadow:0 18px 45px rgba(0,0,0,.32)}
.textalk-hero h1{font-size:clamp(66px,10vw,132px)}
.textalk-hero-tags{justify-content:center;margin-top:0;margin-bottom:8px}
.textalk-hero-screen{max-width:1060px}
.textalk-ui-visual{padding:22px;background:radial-gradient(circle at 50% 50%,rgba(184,104,255,.05),transparent 72%),#0a0c11}
.textalk-ui-visual img{border-radius:11px;border:1px solid #303744;box-shadow:0 22px 55px rgba(0,0,0,.42)}
.textalk-advanced-visual img{max-height:620px;width:auto;margin:0 auto}
.textalk-note{margin-top:34px}
@media(max-width:860px){.textalk-app-icon{width:66px;height:66px;border-radius:15px}.textalk-ui-visual{padding:14px}}


/* Japanese headline composition refinement 2026-09-16 */
html[data-lang="ja"] body{line-break:strict}
.section h2,.section h3,.intro-big,.hero-lead,.home-product-name,.home-product-copy strong,.manual-link strong{text-wrap:balance}
html[data-lang="ja"] .ja-heading{word-break:normal;overflow-wrap:normal;line-break:strict;text-wrap:pretty}
html[data-lang="ja"] .ja-heading .ja-line{display:block;white-space:nowrap}
html[data-lang="ja"] .section h2{font-size:clamp(34px,4.25vw,58px);line-height:1.04;letter-spacing:-.04em}
html[data-lang="ja"] .intro-big{font-size:clamp(30px,3.6vw,48px);line-height:1.18;letter-spacing:-.035em}
html[data-lang="ja"] .section h3{line-height:1.12;letter-spacing:-.025em}
html[data-lang="ja"] .section p,html[data-lang="ja"] .home-product-copy p,html[data-lang="ja"] .hero-lead,html[data-lang="ja"] .release-note{line-break:strict;word-break:normal;overflow-wrap:break-word}
html[data-lang="ja"] .home-product-copy strong .ja-line{line-height:1.28}
@media(min-width:861px){.home-product-card{grid-template-columns:minmax(380px,.9fr) 1.1fr}}
@media(max-width:860px){
 html[data-lang="ja"] .section h2{font-size:clamp(32px,5.8vw,44px);line-height:1.07}
 html[data-lang="ja"] .intro-big{font-size:clamp(29px,5.4vw,40px);line-height:1.2}
}
@media(max-width:520px){
 html[data-lang="ja"] .section h2{font-size:clamp(29px,8.3vw,34px);line-height:1.08;letter-spacing:-.035em}
 html[data-lang="ja"] .section h3{font-size:clamp(23px,6.6vw,28px);line-height:1.14;letter-spacing:-.02em}
 html[data-lang="ja"] .intro-big{font-size:clamp(27px,7.9vw,31px);line-height:1.22;letter-spacing:-.025em}
 html[data-lang="ja"] .home-product-copy strong{font-size:21px;line-height:1.28;letter-spacing:-.015em}
 html[data-lang="ja"] .home-product-name{font-size:clamp(26px,7.8vw,33px);line-height:1.05;letter-spacing:-.035em}
 .hero-lead{line-height:1.65}
}
@media(max-width:360px){
 html[data-lang="ja"] .section h2{font-size:29px}
 html[data-lang="ja"] .intro-big{font-size:27px}
 html[data-lang="ja"] .home-product-copy strong{font-size:20px}
}


/* composition refresh 2026-09-16 */
html[data-lang="ja"] .hero-lead{max-width:min(760px,100%);line-height:1.62;text-wrap:pretty}
html[data-lang="ja"] .hero-lead .ja-line{display:block;white-space:nowrap}
html[data-lang="ja"] .intro-big .ja-line,html[data-lang="ja"] .section h2 .ja-line,html[data-lang="ja"] .section h3 .ja-line{display:block;white-space:nowrap}
html[data-lang="ja"] .msk-sub{letter-spacing:-.01em}
html[data-lang="ja"] .home-product-copy strong{font-size:24px;line-height:1.22;max-width:13em}
html[data-lang="ja"] .home-product-copy p{font-size:14px;line-height:1.72}
html[data-lang="ja"] .card h3 .ja-line{display:block;white-space:nowrap}
@media(max-width:860px){
 html[data-lang="ja"] .hero-lead{font-size:clamp(17px,2.8vw,21px)}
 html[data-lang="ja"] .home-product-copy strong{max-width:none}
}
@media(max-width:520px){
 html[data-lang="ja"] .hero-lead .ja-line{font-size:inherit;white-space:nowrap}
 html[data-lang="ja"] .intro-big .ja-line,html[data-lang="ja"] .section h2 .ja-line,html[data-lang="ja"] .section h3 .ja-line,html[data-lang="ja"] .card h3 .ja-line,html[data-lang="ja"] .home-product-copy strong .ja-line{white-space:nowrap}
 html[data-lang="ja"] .home-product-copy strong{font-size:20px;line-height:1.24}
 html[data-lang="ja"] .home-product-copy p{font-size:14px}
}


/* home card mobile refinement 2026-09-16 */
@media(max-width:520px){
 html[data-lang="ja"] .home-product-copy strong{font-size:19px;line-height:1.2;letter-spacing:-.01em}
 html[data-lang="ja"] .home-product-copy strong .ja-line{white-space:nowrap}
 html[data-lang="ja"] .home-product-copy{gap:12px}
}
@media(max-width:360px){
 html[data-lang="ja"] .home-product-copy strong{font-size:18px}
}


/* deliberate Japanese line composition v2 */
html[data-lang="ja"] .ja-heading .ja-line{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
html[data-lang="ja"] .section h2{font-size:clamp(32px,3.8vw,52px);line-height:1.06;letter-spacing:-.045em}
html[data-lang="ja"] .intro-big{font-size:clamp(29px,3.3vw,44px);line-height:1.16;letter-spacing:-.035em}
html[data-lang="ja"] .section h3{font-size:clamp(24px,2.3vw,32px);line-height:1.12;letter-spacing:-.028em}
html[data-lang="ja"] .home-product-copy strong{font-size:23px;line-height:1.25;letter-spacing:-.02em}
html[data-lang="ja"] .hero-lead .ja-line{margin-inline:auto}

.demo-video-section{padding:34px 0 92px;border-top:0}
.demo-video-wrap{width:min(1080px,calc(100% - 44px))}
.demo-video-frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border:1px solid #303846;border-radius:18px;background:#050608;box-shadow:0 34px 90px rgba(0,0,0,.46)}
.demo-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:860px){
 html[data-lang="ja"] .section h2{font-size:clamp(30px,5vw,40px)}
 html[data-lang="ja"] .intro-big{font-size:clamp(28px,4.8vw,38px)}
 html[data-lang="ja"] .section h3{font-size:clamp(24px,4vw,30px)}
 .demo-video-section{padding:24px 0 68px}
 .demo-video-wrap{width:min(100% - 28px,1080px)}
 .demo-video-frame{border-radius:13px}
}
@media(max-width:520px){
 html[data-lang="ja"] .section h2{font-size:clamp(27px,7.4vw,32px);line-height:1.09;letter-spacing:-.035em}
 html[data-lang="ja"] .intro-big{font-size:clamp(26px,7vw,30px);line-height:1.16}
 html[data-lang="ja"] .section h3{font-size:clamp(23px,6.4vw,28px);line-height:1.13}
 html[data-lang="ja"] .home-product-copy strong{font-size:20px;line-height:1.25}
 html[data-lang="ja"] .hero-lead{font-size:16px;line-height:1.62}
 .demo-video-section{padding:20px 0 58px}
}
@media(max-width:360px){
 html[data-lang="ja"] .section h2{font-size:27px}
 html[data-lang="ja"] .intro-big{font-size:26px}
 html[data-lang="ja"] .section h3{font-size:23px}
 html[data-lang="ja"] .home-product-copy strong{font-size:19px}
}


/* definitive Japanese headline line-control + large demo video 2026-09-16 */
html[data-lang="ja"] .ja-heading .ja-segment{
  display:inline-block;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  max-width:none;
}
/* The line positions are encoded with <br> in HTML. Do not rebalance them. */
html[data-lang="ja"] .ja-heading{text-wrap:nowrap !important;word-break:keep-all !important;overflow-wrap:normal !important}

.demo-video-section{padding:28px 0 104px;border-top:0}
.demo-video-wrap{width:min(1400px,calc(100% - 16px));max-width:none}
.demo-video-frame{width:100%;aspect-ratio:16/9;border-radius:20px}
@media(max-width:860px){
 .demo-video-section{padding:20px 0 72px}
 .demo-video-wrap{width:calc(100% - 14px)}
 .demo-video-frame{border-radius:14px}
}
@media(max-width:520px){
 .demo-video-section{padding:16px 0 58px}
 .demo-video-wrap{width:calc(100% - 10px)}
 .demo-video-frame{border-radius:11px}
 html[data-lang="ja"] .section h2{font-size:clamp(26px,7.1vw,31px)}
 html[data-lang="ja"] .intro-big{font-size:clamp(25px,6.8vw,29px)}
 html[data-lang="ja"] .section h3{font-size:clamp(22px,6.1vw,27px)}
}
@media(max-width:360px){
 html[data-lang="ja"] .section h2{font-size:25px}
 html[data-lang="ja"] .intro-big{font-size:24px}
 html[data-lang="ja"] .section h3{font-size:22px}
}

/* hard Japanese headline composition fix 2026-09-16 23:42
   Japanese display lines are real block lines. This intentionally overrides
   the generic language display:contents rule, which allowed Safari to ignore
   visual line grouping in some headings. */
html[data-lang="ja"] span.lang-ja.ja-heading{
  display:block !important;
  width:100%;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  text-wrap:nowrap !important;
}
html[data-lang="en"] span.lang-ja.ja-heading{display:none !important}
html[data-lang="ja"] span.lang-ja.ja-heading > .ja-segment,
html[data-lang="ja"] span.lang-ja.ja-heading > .ja-line{
  display:block !important;
  width:fit-content !important;
  max-width:100%;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
/* Never let Safari rebalance a deliberately composed Japanese headline. */
html[data-lang="ja"] h2 .ja-heading,
html[data-lang="ja"] h3 .ja-heading,
html[data-lang="ja"] .intro-big .ja-heading,
html[data-lang="ja"] .hero-lead .ja-heading,
html[data-lang="ja"] .home-product-copy strong .ja-heading{
  text-wrap:nowrap !important;
}
html[data-lang="ja"] .hero-lead .ja-heading > .ja-segment,
html[data-lang="ja"] .hero-lead .ja-heading > .ja-line{margin-inline:auto}

/* msk PSYCHE! v1.0.1 preset browser */
.preset-browser-visuals{display:grid;gap:16px;align-items:start}
.preset-browser-visuals .visual{background:#08090d}
.preset-browser-visuals .preset-list{width:min(300px,100%);justify-self:center}
@media(min-width:861px){.preset-browser-visuals{grid-template-columns:minmax(220px,.55fr) minmax(320px,1fr)}}
@media(max-width:860px){.preset-browser-visuals{grid-template-columns:1fr 1fr}.preset-browser-visuals .preset-list{width:100%}}
@media(max-width:520px){.preset-browser-visuals{grid-template-columns:1fr}.preset-browser-visuals .preset-list{width:min(280px,100%)}}




/* paired product / play video layout - normalized 2026-09-17 */
.demo-video-section--paired{padding:34px 0 86px}
.demo-video-section--paired .demo-video-wrap{width:min(1180px,calc(100% - 44px));max-width:1180px}
.demo-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.demo-video-card{display:grid;gap:12px;min-width:0}
.demo-video-card .demo-video-frame{width:100%;aspect-ratio:16/9;border-radius:16px}
.demo-video-meta{display:grid;gap:5px;padding:0 3px}
.demo-video-label{font:750 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#8f99a8}
.demo-video-caption{font-size:15px;line-height:1.5;color:#dce1e8;letter-spacing:-.012em}
@media(max-width:860px){
 .demo-video-section--paired{padding:24px 0 66px}
 .demo-video-section--paired .demo-video-wrap{width:min(100% - 28px,720px)}
 .demo-video-grid{grid-template-columns:1fr;gap:24px}
 .demo-video-card .demo-video-frame{border-radius:13px}
}
@media(max-width:520px){
 .demo-video-section--paired{padding:20px 0 56px}
 .demo-video-section--paired .demo-video-wrap{width:calc(100% - 20px)}
 .demo-video-card .demo-video-frame{border-radius:11px}
 .demo-video-caption{font-size:14px}
}


/* msk Music Tools brand system / YouTube migration — 2026-09-19 */
.brand-lockup{display:inline-flex;align-items:center;gap:10px;min-width:0;font-size:inherit;letter-spacing:normal}
.brand-logo{width:42px;height:42px;flex:0 0 42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(235,255,0,.08))}
.brand-name{font-size:17px;font-weight:800;letter-spacing:-.025em;white-space:nowrap;color:#f4f6f8}
.youtube-pill{border-color:rgba(235,255,0,.22);color:#f1f3f6}
.youtube-pill:hover{border-color:rgba(235,255,0,.72);background:rgba(235,255,0,.07)}
.msk-gate-copy{position:relative;z-index:3;text-align:center}
.msk-hero-logo{width:clamp(116px,12vw,176px);height:auto;margin:0 auto 22px;filter:drop-shadow(0 16px 42px rgba(0,0,0,.5))}
.msk-gate-copy h1{font-size:clamp(50px,8vw,108px);line-height:.9;letter-spacing:-.065em;margin:15px auto 22px;max-width:1050px}
.msk-gate-copy .msk-label{margin-top:0}
.msk-sub{font-size:clamp(17px,2vw,23px);color:#b7bfca;line-height:1.45}
.home-ja-tagline{white-space:nowrap}
.home-ja-tagline > span + span::before{content:" ";}
.msk-youtube-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:10px 15px;border:1px solid #303846;border-radius:999px;background:rgba(12,15,20,.72);font-size:13px;color:#aeb7c4;transition:.2s}
.msk-youtube-link strong{color:#f2f4f7;font-weight:750}
.msk-youtube-link:hover{transform:translateY(-1px);border-color:rgba(235,255,0,.55);background:rgba(235,255,0,.045)}
.footer-right{display:flex;align-items:center;gap:18px}
.footer-right a,.home-footer a{color:#a7b0be;transition:.2s}
.footer-right a:hover,.home-footer a:hover{color:var(--acid)}
.home-footer-links{display:flex;align-items:center;gap:18px}
.demo-video-section:not(.demo-video-section--paired) .demo-video-wrap{width:min(1000px,calc(100% - 44px));max-width:1000px}
.demo-video-section:not(.demo-video-section--paired) .demo-video-frame{border-radius:16px}
@media(max-width:860px){
 .brand-logo{width:38px;height:38px;flex-basis:38px}
 .brand-name{font-size:15px}
 .demo-video-section:not(.demo-video-section--paired) .demo-video-wrap{width:min(100% - 28px,760px)}
 .footer-right{gap:14px}
 .msk-gate{min-height:64svh}
}
@media(max-width:520px){
 .topbar .wrap{width:calc(100% - 20px)}
 .brand-lockup{gap:0}
 .brand-logo{width:36px;height:36px;flex-basis:36px}
 .brand-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .youtube-pill{padding:7px 9px;font-size:12px}
 .msk-hero-logo{width:104px;margin-bottom:17px}
 .msk-gate-copy h1{font-size:clamp(42px,13vw,58px);line-height:.94;margin:12px auto 18px}
 .home-ja-tagline{display:inline-flex !important;flex-direction:column;gap:2px;white-space:normal}
 .home-ja-tagline > span + span::before{content:""}
 .msk-youtube-link{margin-top:22px}
 .home-footer{gap:12px;align-items:flex-start}
 .home-footer-links{flex-direction:column;align-items:flex-end;gap:4px}
 .footer-right{flex-direction:column;align-items:flex-start;gap:6px}
 .demo-video-section:not(.demo-video-section--paired) .demo-video-wrap{width:calc(100% - 20px)}
 .demo-video-section:not(.demo-video-section--paired) .demo-video-frame{border-radius:11px}
}

/* Mac Screen Audio Recorder: bilingual release history and GitHub source notice */
.recorder-history-section h2{font-size:clamp(32px,4.5vw,58px)}
.recorder-history{margin-top:32px;border:1px solid #29313d;border-radius:16px;background:#10141b;overflow:hidden}
.recorder-history-row{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:baseline;gap:20px;padding:22px 26px;color:#c1c9d4;font-size:15px;line-height:1.6}
.recorder-history-row+.recorder-history-row{border-top:1px solid #29313d}
.recorder-history-version{font:700 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ff8993;white-space:nowrap}
.recorder-source-note{margin-top:16px}
.recorder-source-note p{margin:0 0 12px;font-size:16px;line-height:1.7}
.recorder-source-note .recorder-no-support{font-size:14px;color:#9ca6b4;margin:14px 0 0}
.recorder-source-link{color:#ff929b;text-decoration:underline;text-decoration-color:rgba(255,146,155,.55);text-underline-offset:4px;overflow-wrap:anywhere;word-break:break-word;font-size:15px;line-height:1.7}
.recorder-source-link:hover{color:#ffd4d8}
@media(max-width:580px){.recorder-history-row{grid-template-columns:1fr;gap:5px;padding:17px 18px}.recorder-source-note p{font-size:15px}}