@font-face{font-family:Pixel;src:url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{--paper:#f8f0e2;--ink:#2c180f;--muted:#826b59;--line:#bda68b;--accent:#f87924;--screen:#b9e7c4;--green:#23634b;--pixel:Pixel,monospace;font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 15%,#fffaf1,transparent 78%);min-width:280px}button,select,input{font:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed;opacity:.55}:is(button,a,select,[tabindex]):focus-visible{outline:3px solid #185d46;outline-offset:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}p{line-height:1.55}button{border-radius:0}.page-shell{max-width:1500px;margin:auto;padding:24px 32px 0}.site-header{display:flex;align-items:center;gap:28px;padding-bottom:24px}.brand{display:flex;align-items:center;gap:2px;white-space:nowrap}.brand-panda{width:82px;height:73px;overflow:hidden;display:block}.brand-panda img{width:100%;transform:scale(1.2);image-rendering:pixelated}.brand-word{font-family:var(--pixel);font-size:31px;color:#fa952d;text-shadow:2px 2px #7f2e11,4px 4px #281309,-2px -2px #281309,2px -2px #281309,-2px 2px #281309;letter-spacing:-2px}.brand-word small{font-size:17px;letter-spacing:-1px;color:#fff7e8;text-shadow:2px 2px #281309,-2px -2px #281309,2px -2px #281309,-2px 2px #281309}.how-link{font-weight:bold;font-size:15px;border-left:1px solid var(--line);padding-left:26px}.header-tools{display:flex;align-items:center;gap:20px;margin-left:auto}.header-paw{font-size:30px;color:#9e816a}#language-select{background:#fff8ec;color:var(--ink);border:1px solid var(--line);padding:10px 12px;font-size:13px;max-width:150px}.announcement{border:2px solid var(--line);padding:12px 20px;overflow-wrap:anywhere}.console-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:0 32px;align-items:start}.console{grid-column:1;grid-row:1/4;background:linear-gradient(115deg,#fffaf0,#ede2ce 90%);border:7px solid #2c271f;border-radius:28px 28px 38px 28px;box-shadow:inset 0 0 0 6px #fffaf0,8px 9px 0 #b7a48a,0 15px 0 #dfd1ba;padding:18px 20px 12px;position:relative;min-width:0}.console-top{display:flex;gap:17px;align-items:center;padding:4px 0 22px}.screw{width:20px;height:20px;background:#514d43;flex:none;border:4px solid #29261f;box-shadow:0 0 0 3px #c6b9a4,inset 3px 3px #807d72;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}.workflow-steps{list-style:none;padding:0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;margin:0;font-size:14px;font-weight:bold;color:#806d5c}.workflow-steps li{display:flex;align-items:center;gap:10px}.workflow-steps li+li:before{content:'···';color:var(--line);margin-right:4px}.workflow-steps b{background:#e4d7c3;box-shadow:inset 2px 2px #c3b198,2px 2px #d0bfa7;padding:9px 8px;font-size:19px}.workflow-steps [data-state=active],.workflow-steps [data-state=done]{color:#142e21}.workflow-steps [data-state=active] b,.workflow-steps [data-state=done] b{background:#a2d5aa;box-shadow:inset 2px 2px #6ba780,2px 2px #c5e5c9}.screen-frame{border:7px solid #282b23;background:#32654c;border-radius:14px;box-shadow:0 0 0 4px #b7b3a4,inset 0 0 0 4px #719b78;padding:7px}.screen{background:var(--screen);color:#1f503d;min-height:380px;position:relative;display:flex;align-items:center;justify-content:center;padding:32px 64px;box-shadow:inset 0 0 24px #388b6930}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,#23604428 3px 4px)}.screen-corner{position:absolute;font-size:28px;color:#64a77e}.tl{left:7px;top:4px}.tr{right:7px;top:4px}.bl{left:7px;bottom:4px}.br{right:7px;bottom:4px}.screen-content{width:100%;max-width:510px;z-index:1;text-align:center;overflow-wrap:anywhere}.screen-content h2{font-size:21px;line-height:1.35;margin:14px 0 10px}.screen-content p{font-size:13px;margin:10px 0}.dropzone{border:2px dashed #49896a;padding:20px 12px 16px;cursor:pointer}.dropzone:hover,.dropzone.is-dragging{background:#f5ffe526}.audio-file-icon{width:52px;height:59px;display:block;margin:0 auto 20px;filter:drop-shadow(3px 3px #6dae843a)}.choose-button,.primary-button{display:inline-block;border:3px solid #2f2414;background:var(--accent);color:#fffdf1;box-shadow:inset 3px 3px #ffc267,inset -3px -3px #d85917,3px 4px #2f2414;padding:15px 20px;font-size:18px;font-weight:900;text-shadow:1px 1px #9d4417}.choose-button{font-size:clamp(14px,1.55vw,22px)}.primary-button:hover,.dropzone:hover .choose-button{filter:brightness(1.07)}.primary-button:active{transform:translate(2px,2px);box-shadow:inset 3px 3px #ffc267,1px 1px #2f2414}.dropzone p:first-of-type{font-weight:bold;margin-top:18px}.screen-content .upload-limits{font-size:12px;margin:15px 0 0}.screen-content .formats{font-size:12px;margin:2px 0 0}.selected-file{display:flex;align-items:center;gap:12px;text-align:left;background:#ffffff35;padding:12px;border:1px solid #58916e;margin:15px 0}.selected-file>span{font-size:30px}.file-description{min-width:0;flex:1}.file-description p{margin:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-description #file-details{font-size:10px}.selected-file button{font-size:26px;background:none;border:0}.convert-button{margin-top:15px;width:100%;font-size:16px}.convert-button:disabled{display:none}.screen-content .action-hint{font-size:10px;margin-bottom:0}.equalizer{position:absolute;width:47px;top:17%;bottom:13%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;opacity:.8}.equalizer>span{font-size:28px}.eq-left{left:9px}.eq-right{right:9px}.bars{display:flex;align-items:center;gap:3px;height:90px;width:100%;justify-content:center}.bars i{display:block;background:#4e9971;width:4px;height:25%;flex:1;max-width:5px;transform-origin:center;animation:equalize .65s steps(4,end) infinite alternate;animation-play-state:paused}.bars i:nth-child(4n+1){height:50%;animation-delay:-.35s}.bars i:nth-child(5n+2){height:85%;animation-delay:-.12s}.bars i:nth-child(3n+1){height:35%;animation-delay:-.55s}.bars i:nth-child(7n+3){height:100%;animation-delay:-.2s}.bars i:nth-child(4n){height:68%;animation-delay:-.7s}[data-state=processing] .bars i,[data-state=uploading] .bars i,[data-state=queued] .bars i{animation-play-state:running}@keyframes equalize{from{transform:scaleY(.3)}to{transform:scaleY(1)}}.console-controls{display:flex;gap:18px;margin-top:24px;align-items:center}.hardware{width:44px;flex:none;text-align:center}.speaker{font-size:19px;letter-spacing:3px;line-height:12px;color:#292721;margin-bottom:26px}.dpad{font-family:Arial,sans-serif;font-weight:bold;font-size:70px;line-height:60px;color:#45443b;text-shadow:3px 3px #161914,-3px -3px #161914,0 0 0 #111;transform:translateX(-10px)}.game-buttons{display:flex;flex-direction:column;gap:12px;align-items:center;transform:rotate(25deg)}.game-buttons i{height:34px;width:34px;background:var(--accent);border:4px solid #261f17;border-radius:50%;box-shadow:inset 3px 3px #ffc067,3px 3px #a7957c}.stem-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:1;min-width:0}.stem-card{border:2px solid var(--line);box-shadow:inset 3px 3px #fff9ed;background:#fffaf24f;padding:12px;min-width:0}.stem-card h3{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;letter-spacing:-.6px}.stem-icon{display:grid;place-items:center;background:#a9d9af;width:35px;height:35px;font-size:26px;color:#123c29;flex:none}.stem-wave{height:47px;padding:7px 0;gap:3px}.download-button{border:2px solid #ac957b;box-shadow:inset 2px 2px #fff9f0,2px 3px #bda98d;display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;padding:10px 4px;background:#e6dac6;font-size:13px;font-weight:bold;min-height:41px}.download-button[aria-disabled=true]{opacity:.55;cursor:default}.download-button[aria-disabled=false]{background:var(--accent);color:#23170d;border-color:#372819;box-shadow:inset 2px 2px #ffc267,3px 3px #3f2c1a}.download-button[aria-disabled=false]:hover{filter:brightness(1.1)}.download-button>span:first-child{font-size:21px}.stem-card p{font-size:10px;text-align:center;margin:9px 0 0;color:#725a45}.console-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:11px;letter-spacing:3px;color:#8f745d}.console-bottom>span:first-child,.console-bottom>span:last-child{color:#312c22;font-size:24px}.hero-copy{grid-column:2;grid-row:1;padding-top:18px}.mini-label{font-size:9px;letter-spacing:1.7px;color:var(--muted);font-weight:bold}.hero-copy h1{font-family:var(--pixel);font-size:clamp(18px,1.83vw,29px);line-height:1.6;letter-spacing:-1.5px;white-space:pre-line;overflow-wrap:anywhere;margin:13px 0 15px;text-shadow:2px 3px #c9ae94}.hero-copy>p:not(.mini-label){font-size:19px;line-height:1.5;margin:0;font-weight:bold}.green-rule{width:54px;height:5px;background:#77ad83;margin-top:18px}.mascot-scene{grid-column:2;grid-row:2;align-self:center;min-width:0;position:relative;height:360px;margin:4px -8px 0}.mascot-scene #mascot-stage{position:absolute;inset:0 12px 0 -12px;isolation:isolate}.speech-bubble{position:absolute;right:0;top:12px;border:3px solid #3a2a1d;box-shadow:3px 3px #cab79b;background:#fff9ee;font-size:12px;font-weight:bold;line-height:1.5;width:116px;padding:12px;text-align:center;white-space:normal}.speech-bubble:after{content:'';position:absolute;bottom:-10px;left:17px;width:14px;height:14px;background:#fff9ee;border-bottom:3px solid #3a2a1d;border-right:3px solid #3a2a1d;transform:skewY(35deg)}.scene-note{position:absolute;color:#eeb02f;font-size:39px;text-shadow:2px 2px #3b2912,-1px -1px #3b2912;pointer-events:none}.note-one{left:8px;top:31%}.note-two{right:14px;top:47%}.pixel-plant{position:absolute;right:0;bottom:10px;color:#88aa7c;font-size:55px}.privacy-card{grid-column:2;grid-row:3;border:2px solid var(--line);box-shadow:inset 3px 3px #fffaf0;padding:16px;display:flex;gap:14px;align-items:center}.privacy-card h2{font-size:13px;line-height:1.5;margin:0}.privacy-card p{font-size:12px;color:#7a604b;margin:5px 0}.privacy-card small{font-size:9px;color:#6e7759;line-height:1.5;display:block}.shield{border:3px solid #255c43;background:#a5d6ab;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);font-size:25px;padding:5px 8px 14px;color:#276346}.notice{border:1px solid #4e8560;background:#edf4d7e0;padding:12px;margin-bottom:12px;font-size:12px}.error-notice{color:#913b22;border-color:#aa6955;background:#fff2dce8}.text-button{font-size:12px;font-weight:bold;border:0;border-bottom:1px solid currentColor;background:transparent;padding:6px 2px}.process-notes{font-size:35px;color:#397d58;margin:6px}.progress-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;font-size:11px;text-align:left}.progress-track{border:2px solid #2a664c;background:#d9edc9;height:20px;margin-top:10px;padding:3px}.progress-track>span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#2d7254 0 8px,transparent 8px 10px);transition:width .3s}.processing-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 16px}.processing-meta p{font-size:11px}.screen-content .small-copy{font-size:10px;color:#42614a;line-height:1.55}.cassette-icon{border:3px solid #274e38;box-shadow:3px 3px #66986f;background:#ecc07a;width:98px;height:61px;margin:0 auto 18px;padding:6px}.cassette-icon>span{display:block;font-size:22px;line-height:1}.cassette-icon small{font-size:8px}.expiry-notice{background:#eff5c675;padding:10px;border:1px solid #6e9868}.expiry-notice[data-urgent=true]{background:#ffd5a780}.result-actions{display:flex;justify-content:center;gap:16px;margin-top:14px}.status-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:29px}.quality-note{font-size:10px;color:var(--muted);max-width:620px}#engine-badge{display:flex;align-items:center;gap:7px;font-size:10px;color:#647254;flex:none}#engine-badge i{width:7px;height:7px;background:#b79468}#engine-badge[data-state=ready] i{background:#73a95b}.how-section{margin:28px 0 0;border-top:1px solid #d8c8b3;padding-top:18px}.how-section summary{font-size:13px;cursor:pointer;color:#806a54;width:fit-content}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:22px 0}.how-grid b{font-family:var(--pixel);font-size:15px;color:#83a581}.how-grid h3{font-size:15px}.how-grid p{font-size:12px;color:var(--muted)}footer{display:flex;align-items:center;gap:18px;padding:30px 0 24px;color:#8b7159;font-size:10px}footer>span{font-size:33px;color:#79a37d}footer>i{height:1px;background:var(--line);flex:1}footer p{letter-spacing:1px;text-align:center}footer a{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1450px){.mascot-scene{height:405px}.screen{min-height:425px}.hero-copy h1{font-size:27px}.hero-copy>p:not(.mini-label){font-size:22px}}
@media(max-width:1100px){.page-shell{padding:20px 22px 0}.console-layout{gap:0 24px;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}.console{padding:15px 15px 10px}.console-top{gap:10px}.workflow-steps{font-size:11px}.workflow-steps li{gap:7px}.workflow-steps li+li:before{display:none}.workflow-steps b{font-size:16px;padding:7px 6px}.screen{padding:28px 43px}.equalizer{width:30px}.bars{gap:2px}.eq-left{left:6px}.eq-right{right:6px}.console-controls{gap:10px}.hardware{width:28px}.speaker{font-size:15px;letter-spacing:1px}.dpad{font-size:52px;transform:translateX(-8px)}.game-buttons i{width:26px;height:26px}.stem-grid{gap:10px}.stem-card{padding:9px}.stem-card h3{font-size:14px;gap:6px}.stem-icon{width:28px;height:30px;font-size:23px}.download-button{font-size:11px}.hero-copy>p:not(.mini-label){font-size:17px}.hero-copy h1{font-size:20px;letter-spacing:-1.4px}.mascot-scene{height:320px}.speech-bubble{width:96px;font-size:10px;padding:10px}.privacy-card{padding:12px;gap:10px}.privacy-card h2{font-size:11px}.privacy-card p{font-size:11px}.shield{font-size:20px;padding:5px 6px 12px}.brand-word{font-size:27px}.brand-word small{font-size:14px}.how-link{font-size:12px;padding-left:20px}.header-tools{gap:10px}}
@media(max-width:800px){.page-shell{max-width:660px;padding:14px 17px 0}.site-header{gap:12px;padding-bottom:18px}.brand-panda{width:52px;height:52px}.brand-word{font-size:21px;letter-spacing:-1.5px}.brand-word small{display:block;font-size:10px;letter-spacing:2px;margin-top:10px}.how-link,.header-paw{display:none}#language-select{font-size:11px;padding:8px;max-width:119px}.console-layout{display:flex;flex-direction:column;gap:0}.hero-copy{order:0;text-align:center;padding:12px 0 0;width:100%}.hero-copy .mini-label{display:none}.hero-copy h1{font-size:clamp(16px,3.45vw,24px);letter-spacing:-1.1px;line-height:1.65;margin:0 0 12px}.hero-copy>p:not(.mini-label){font-size:14px;font-weight:normal;max-width:340px;margin:auto}.green-rule{display:none}.mascot-scene{order:1;width:100%;height:174px;margin:4px 0 -7px;flex:none;align-self:center}.mascot-scene #mascot-stage{left:calc(50% - 95px);right:auto;top:0;bottom:0;width:190px}.speech-bubble{left:calc(50% + 60px);right:auto;top:30px;width:90px;font-size:9px;padding:8px}.note-one{left:calc(50% - 117px);top:52px;font-size:29px}.note-two{right:auto;left:calc(50% - 94px);top:107px;font-size:24px}.pixel-plant{right:15px;font-size:34px;bottom:4px}.console{order:2;width:100%;border-width:5px;border-radius:20px 20px 26px 20px;padding:14px 12px 10px;box-shadow:inset 0 0 0 4px #fffaf0,4px 7px 0 #b7a48a,0 11px #dfd1ba}.console-top{padding:2px 0 17px;gap:10px}.workflow-steps{font-size:11px;gap:7px}.workflow-steps li{gap:7px}.workflow-steps b{font-size:15px;padding:7px}.screw{width:13px;height:13px;border-width:3px}.screen-frame{border-width:5px;padding:4px;border-radius:10px;box-shadow:0 0 0 3px #b7b3a4}.screen{padding:27px 25px;min-height:342px}.equalizer{width:17px;opacity:.65}.equalizer>span{font-size:19px}.bars{gap:2px}.bars i{min-width:1px}.eq-left{left:3px}.eq-right{right:3px}.screen-corner{font-size:18px}.dropzone{padding:17px 9px 14px}.choose-button{font-size:15px;padding:13px 15px}.audio-file-icon{width:41px;height:49px;margin-bottom:19px}.screen-content .upload-limits,.screen-content .formats{font-size:10px}.screen-content p{font-size:11px}.console-controls{gap:9px;margin-top:19px}.hardware{display:none}.stem-grid{gap:11px}.stem-card{padding:10px}.stem-card h3{font-size:14px}.stem-icon{width:25px;height:29px}.download-button{font-size:12px;gap:5px}.stem-card p{font-size:9px}.stem-wave{height:44px}.console-bottom{font-size:9px;margin-top:10px}.privacy-card{order:3;width:100%;margin-top:25px;padding:16px}.privacy-card h2{font-size:12px}.privacy-card p{font-size:11px}.status-row{margin-top:18px;flex-direction:column;gap:3px;align-items:flex-start}.quality-note{margin:0}.how-section{margin-top:20px}.how-grid{grid-template-columns:1fr;gap:12px}.how-grid>div{display:grid;grid-template-columns:37px 1fr;gap:0 10px}.how-grid b{grid-row:1/3;margin-top:9px}.how-grid h3,.how-grid p{margin:5px 0}.how-grid p{grid-column:2}footer{padding:23px 0 16px;gap:10px}footer p{font-size:8px;max-width:210px}footer>span{font-size:22px}.screen-content h2{font-size:18px}.processing-meta{flex-wrap:wrap}.progress-row{font-size:10px}.screen-content .small-copy{font-size:9px}.result-actions{gap:14px}.text-button{font-size:11px}.console[data-state=completed] .download-button{font-size:12px}.privacy-card small{font-size:9px}}
@media(max-width:370px){.page-shell{padding:12px 11px 0}.brand-panda{width:45px}.brand-word{font-size:18px}#language-select{max-width:107px;font-size:10px}.workflow-steps{font-size:10px}.workflow-steps li{gap:4px}.workflow-steps b{padding:6px 4px;font-size:12px}.console-top>.screw{display:none}.screen{padding-left:19px;padding-right:19px}.choose-button{font-size:13px;padding:13px 8px}.stem-card{padding:8px 6px}.stem-card h3{font-size:12px}.download-button{font-size:10px!important}.speech-bubble{width:78px;left:calc(50% + 52px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}html[data-animations=false] .bars i{animation:none!important}
/* Keep every translated step within a narrow console. */
@media(min-width:1101px){.equalizer{width:58px}.screen{padding-left:78px;padding-right:78px}.equalizer i:nth-child(n+9){display:none}}
@media(max-width:800px){.console-top>.screw{display:none}.workflow-steps{width:100%;gap:5px}.workflow-steps li{flex:1;min-width:0;flex-direction:column;gap:7px;text-align:center;font-size:10px}.workflow-steps b{padding:6px 8px}.stem-card h3{font-size:12px}.stem-card h3>span:last-child{min-width:0;overflow-wrap:anywhere}}
@media(max-width:370px){.stem-icon{display:none}.stem-card h3{justify-content:center}.stem-card h3>span:last-child{overflow-wrap:normal}.screen-content h2{font-size:16px}}