@charset "UTF-8";
:root{--paper:#f5f4ec;--ink:#283c36;--muted:#707a6e;--line:#d7dbcf;--pink:#df6073;--water:#659da3;--font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);font-family:var(--font);font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button,a{touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:5px}button{border:0}button svg{flex-shrink:0}[hidden]{display:none!important}.symbols{position:absolute;width:0;height:0;overflow:hidden}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0}.page{max-width:1320px;margin:auto;padding:0 64px}.header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:26px;letter-spacing:-1px;font-weight:750}.brand svg{width:34px;height:32px}.brand-dot{color:var(--pink)}.header-right{display:flex;align-items:center;gap:25px}.demo-badge{font-size:10px;border:1px solid #b9c4b4;padding:5px 10px;letter-spacing:2px}.text-button{padding:6px 0;background:transparent;font-size:11px;text-underline-offset:4px}.text-button:hover{text-decoration:underline}.header .text-button span{margin-left:12px}.hero{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;padding:77px 0 65px;align-items:center}.eyebrow{font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:2px;margin:0}.hero-copy>.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--pink)}h1{font-size:clamp(36px,4.25vw,57px);line-height:1.65;letter-spacing:-.06em;margin:0 0 20px;font-weight:800;white-space:nowrap}.kawa{position:relative;display:inline-block;color:var(--pink)}.kawa:after{content:"";position:absolute;bottom:3px;left:0;width:100%;height:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='5' viewBox='0 0 30 5'%3E%3Cpath d='M0 3Q7.5 -1 15 3T30 3' stroke='%23df6073' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x}.full-stop{color:var(--pink)}.lead{font-size:18px;line-height:1.9;letter-spacing:.08em;margin:0 0 19px}.description{font-size:11px;line-height:2.2;color:var(--muted);letter-spacing:.04em;margin:0 0 28px}.start-area{max-width:328px}.primary{width:100%;min-height:62px;padding:16px 24px;display:flex;align-items:center;gap:13px;justify-content:flex-start;background:var(--ink);border-radius:4px;color:var(--paper);font-size:14px;letter-spacing:.08em;transition:background .2s,transform .2s}.primary:not(:disabled):hover{background:#3b544a;transform:translateY(-2px)}.primary:disabled{opacity:.68}.primary .icon:first-child{color:#f194a0;width:18px}.primary .arrow{margin-left:auto}.sound-note{font-size:9px;display:flex;align-items:center;gap:8px;color:var(--muted);margin:13px 0 0;white-space:nowrap}.sound-note .icon{width:14px;height:14px}.player-column{min-width:0;padding-top:18px}.player-caption{display:flex;justify-content:space-between;align-items:center;font:9px Helvetica,Arial,sans-serif;letter-spacing:1.6px;margin:0 0 17px}.handwriting{font-family:var(--font);font-size:13px;letter-spacing:1px;transform:rotate(-6deg);color:var(--pink)}.player{position:relative;aspect-ratio:8/5;border-radius:120px 120px 5px 5px;overflow:hidden;background:#e1e8d7;isolation:isolate}.player video,.poster{display:block;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.player.active{border-radius:8px}.player video{object-fit:contain;background:#e1e8d7}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:27px;background:linear-gradient(#e1e8d700,#e1e8d744)}.cover-top{font-size:13px;letter-spacing:.14em;text-shadow:0 1px 10px var(--paper)}.play-circle{display:grid;place-items:center;width:68px;height:68px;background:var(--paper);border:1px solid var(--ink);border-radius:50%;box-shadow:3px 4px 0 #283c3620;transition:transform .2s}.play-circle:hover{transform:scale(1.07)}.play-circle span{font-size:19px;margin-left:4px}.cover-bottom{font:8px Helvetica,Arial,sans-serif;letter-spacing:2px;background:#f5f4ecb3;padding:6px 10px}.video-tag{position:absolute;bottom:12px;left:14px;font:8px Helvetica,Arial,sans-serif;letter-spacing:1px;color:#34584e;pointer-events:none;background:#f5f4eccf;padding:4px 6px}.player.active .video-tag{display:none}.transport{display:flex;align-items:center;justify-content:space-between;min-height:53px;border-bottom:1px solid var(--line);gap:4px}.transport-status{font-size:10px;letter-spacing:.03em;display:flex;align-items:center;gap:8px}.status-dot{width:5px;height:5px;background:#a6b19e;border-radius:50%}.status-dot.playing{background:var(--pink);box-shadow:0 0 0 4px #df60731a}.transport-actions{display:flex;align-items:center;gap:9px}.control{background:transparent;min-width:37px;min-height:44px;font-size:18px}.control:disabled{opacity:.25}.control[aria-pressed=true]{opacity:.5}.control[aria-pressed=true] svg{background:linear-gradient(45deg,transparent 46%,var(--pink) 47%,var(--pink) 53%,transparent 54%)}.demo-note{font-size:9px;line-height:1.8;color:var(--muted);margin:10px 0 0}.buffering{position:absolute;inset:0;background:#f5f4ece6;display:grid;place-items:center;font-size:12px}.error{color:#a33749;font-size:12px;line-height:1.8}.result{border:1px solid #becdc0;background:#e9eee2;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:46px;scroll-margin-top:24px}.result .eyebrow{color:#57705c;margin-bottom:14px}.result-lyric{font-size:20px;font-weight:700;line-height:1.9;margin:0;overflow-wrap:anywhere}.result-lyric span{color:#b94c5f}.result-note{color:var(--muted);font-size:10px;line-height:1.8;margin:12px 0 0}.share-button{display:flex;gap:12px;align-items:center;justify-content:center;min-height:54px;padding:12px 20px;white-space:nowrap;background:var(--ink);color:var(--paper);border-radius:3px;font-size:12px}.share-button:hover{background:#3b544a}.how{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:29px 0;align-items:center}.how-intro>p{font-size:12px;line-height:1.8;margin:10px 0 0;letter-spacing:.08em}.step{display:flex;gap:16px;align-items:flex-start;padding:14px 0 14px 24px;border-left:1px solid var(--line)}.step-number{font:12px Georgia,serif;color:var(--pink);margin-top:4px}.step h2{font-size:13px;font-weight:500;margin:0 0 9px;letter-spacing:.06em}.step p{font-size:9px;color:var(--muted);margin:0;line-height:1.8}.closing{display:flex;align-items:center;gap:16px;padding:30px 0 35px}.closing>.icon{width:15px;height:15px;color:var(--pink)}.closing p{font-size:10px;line-height:1.9;letter-spacing:.08em;color:var(--muted);margin:0}.closing-wave{margin-left:auto;font-size:40px;letter-spacing:-9px;font-weight:200;color:var(--water);padding-right:6px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:22px 0;font-size:9px;gap:20px}footer>.text-button{font-size:9px;margin-left:auto;margin-right:15px}.footer-love{font:8px Helvetica,Arial,sans-serif;letter-spacing:1.2px;color:var(--muted)}.dialog{color:var(--ink);border:1px solid #aeb9a8;border-radius:8px;background:var(--paper);padding:28px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-shadow:0 24px 90px #122e3b30}.dialog::backdrop{background:#172d3480;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.close{background:transparent;font-size:28px;font-weight:300;width:40px;height:40px;margin:-8px -8px 0 0}.dialog h2{font-size:32px;line-height:1.7;letter-spacing:.04em;margin:20px 0}.dialog p{font-size:12px;line-height:1.9}.dialog .share-lyric{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;white-space:pre-line;overflow-wrap:anywhere}.dialog-description{color:var(--muted)}.dialog .share-status{font-size:10px;min-height:20px;color:var(--muted)}.secondary{display:flex;justify-content:center;gap:20px;align-items:center;min-height:52px;border:1px solid #b6c1b0;border-radius:4px;margin-top:10px;font-size:12px;text-decoration:none;cursor:pointer}.secondary[aria-disabled=true]{opacity:.4;pointer-events:none}.copy{display:block;margin:16px auto 10px;min-height:36px;text-decoration:underline}.dialog .share-help{font-size:10px;color:var(--muted);margin:15px 0 0}.credit-block{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.credit-block h3{font-size:12px}.credit-block p{font-size:10px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{padding:20px;text-align:center}
@media(min-width:1400px){.page{margin-top:20px}.hero{padding-top:90px;padding-bottom:85px}.header{height:100px}}
@media(max-width:1050px){.page{padding:0 36px}.hero{gap:30px}.step{padding-left:15px;gap:10px}.step p{font-size:8px}.hero h1{font-size:42px}.lead{font-size:16px}.start-area{max-width:310px}}
@media(max-width:760px){.page{padding:0 24px}.header{height:78px}.brand{font-size:24px}.header-right{gap:14px}.header .text-button{font-size:10px}.header .text-button span{display:none}.demo-badge{font-size:9px;padding:4px 7px;letter-spacing:1px}.hero{grid-template-columns:1fr;gap:30px;padding:36px 0 35px}.hero-copy>.eyebrow{font-size:8px;margin-bottom:18px;letter-spacing:1.7px}.hero h1{font-size:clamp(37px,8.8vw,58px);line-height:1.5;margin-bottom:18px}.lead{font-size:15px;line-height:1.9;margin-bottom:12px}.description{font-size:10px;line-height:2;margin-bottom:22px}.start-area{max-width:none}.primary{min-height:58px}.sound-note{font-size:9px;justify-content:center}.player-column{padding-top:0}.player-caption{font-size:8px;margin-bottom:14px}.handwriting{font-size:11px}.player{border-radius:80px 80px 4px 4px}.cover{gap:18px}.cover-top{font-size:11px}.play-circle{width:58px;height:58px}.cover-bottom{font-size:7px}.transport-status{font-size:10px}.demo-note{font-size:9px}.how{grid-template-columns:1fr;padding:22px 0;gap:20px}.how-intro{display:flex;align-items:center;justify-content:space-between}.how-intro .eyebrow{font-size:9px}.how-intro>p{font-size:11px;margin:0}.step{padding:0;border:0;gap:20px}.step-number{font-size:13px;min-width:24px}.step h2{font-size:12px;margin-bottom:5px}.step p{font-size:10px}.closing{padding:28px 0}.closing p{font-size:9px}.footer-love{display:none}footer{font-size:8px;padding:20px 0}footer>.text-button{margin-right:0}.result{padding:23px 20px;flex-direction:column;align-items:stretch;gap:20px;margin-bottom:30px}.result-lyric{font-size:18px}.result-note{font-size:9px}.dialog{padding:23px}.dialog h2{font-size:29px}.dialog p{font-size:11px}}
@media(max-width:360px){.hero h1{font-size:31px}.header-right{gap:10px}.header .text-button{font-size:9px}.brand{font-size:22px}.sound-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.seek-row{display:flex;align-items:center;gap:12px;padding:8px 0 0}.seek{--played:0%;--buffered:0%;flex:1;min-width:0;width:100%;height:30px;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent}.seek::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:linear-gradient(to right,var(--pink) 0 var(--played),#aeb8aa var(--played) var(--buffered),#dce0d4 var(--buffered) 100%)}.seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:var(--pink)}.seek::-moz-range-track{height:4px;border-radius:3px;background:#dce0d4}.seek::-moz-range-progress{height:4px;background:var(--pink)}.seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--pink)}.seek:disabled{opacity:.4;cursor:default}.seek:focus-visible{outline:2px solid var(--pink);outline-offset:1px}.time-code{font:10px Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;min-width:70px;text-align:right}.comment-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.danmaku{position:absolute;left:0;white-space:nowrap;font-size:clamp(17px,2.2vw,25px);font-weight:800;color:white;text-shadow:-1px -1px 0 #18332a,1px -1px 0 #18332a,-1px 1px 0 #18332a,1px 1px 0 #18332a,0 2px 4px #0008;will-change:transform}.comment-panel{margin-top:14px}.comment-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;margin-bottom:8px}.comment-heading>span>span{color:var(--muted);font-size:9px;margin-left:5px}.comment-heading .text-button{font-size:9px;min-height:30px}.comment-heading .text-button[aria-pressed=false]{color:var(--muted)}.comment-form{display:flex;border:1px solid #c4cebd;border-radius:4px;overflow:hidden;background:#faf9f4}.comment-form input{width:0;min-width:0;flex:1;border:0;outline:none;background:transparent;color:var(--ink);font:inherit;font-size:12px;padding:12px}.comment-form input:focus{box-shadow:inset 0 0 0 2px var(--water)}.comment-form button{min-width:65px;min-height:44px;background:var(--ink);color:var(--paper);font-size:11px;padding:10px}.comment-form button:disabled{opacity:.45}.comment-form input:disabled{opacity:.5}.comment-status,.comment-privacy{font-size:9px;line-height:1.7;color:var(--muted);margin:7px 0 0}.comment-privacy{margin-top:2px}.comment-status{min-height:15px}.hero{align-items:start}.player-column{padding-top:24px}
@media(max-width:760px){.player-column{padding-top:0}.comment-form input{font-size:16px}.comment-heading{font-size:10px}.comment-status,.comment-privacy{font-size:9px}.seek{height:36px}.danmaku{font-size:18px}}