*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mx-auto{margin-left:auto;margin-right:auto}.grid{display:grid}.min-h-screen{min-height:100vh}.max-w-3xl{max-width:48rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{font-family:Avenir Next,Hiragino Sans,Yu Gothic,system-ui,sans-serif;color:#18372e;background:#f3eddd;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 18% 7%,rgba(253,191,84,.18),transparent 28rem),radial-gradient(circle at 86% 48%,rgba(68,132,103,.13),transparent 30rem),#f3eddd}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.shell{position:relative;z-index:1}.hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:12px 10px 30px}.brand-mark{width:60px;height:60px;display:grid;place-items:center;border-radius:18px 18px 22px 12px;color:#f9edc9;font:700 30px Georgia,serif;background:#183e32;box-shadow:5px 5px #d6ad5f;transform:rotate(-3deg)}.brand-mark span{transform:rotate(3deg)}.eyebrow,.section-kicker{margin:0 0 3px;color:#b16c34;font-size:.68rem;font-weight:800;letter-spacing:.18em}h1,h2,p{margin-top:0}h1{margin-bottom:0;color:#163a2f;font-family:Georgia,Yu Mincho,serif;font-size:clamp(2rem,6vw,3.35rem);line-height:1;letter-spacing:-.04em}.lead{margin:8px 0 0;color:#607067;font-size:.9rem}.api-light{align-self:start;padding:7px 10px;border:1px solid #d3c9b2;border-radius:999px;background:#ffffff73;color:#897e6b;font-size:.67rem;font-weight:700;white-space:nowrap}.api-light span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#d3a647}.api-light.online span{background:#4e9874;box-shadow:0 0 0 3px #4e987426}.api-light.offline span{background:#c77c61}.quest-card,.processing-card,.error-card{position:relative;margin-bottom:18px;padding:clamp(20px,5vw,34px);overflow:hidden;border:1px solid rgba(95,82,55,.19);border-radius:25px;background:#fffdf5e0;box-shadow:0 12px 40px #463a2214,inset 0 1px #ffffffb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.quest-card:after{content:"";position:absolute;width:120px;height:120px;right:-68px;top:-72px;border:1px solid rgba(204,151,57,.25);border-radius:50%;box-shadow:0 0 0 14px #cc973906,0 0 0 28px #cc973906}.section-heading{display:flex;align-items:center;gap:13px;margin-bottom:23px}.section-heading h2{margin:0;color:#173b30;font:700 clamp(1.2rem,3vw,1.6rem) Georgia,"Yu Mincho",serif}.step-number{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#f8eac2;background:#1d493b;font:700 1rem Georgia,serif;box-shadow:3px 3px #d9b767}.step-number.complete{background:#b66c3c}.record-panel{display:flex;flex-direction:column;align-items:center;text-align:center}.signal-garden{width:min(100%,390px);height:82px;display:flex;align-items:center;justify-content:center;gap:7px;-webkit-mask-image:linear-gradient(to right,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(to right,transparent,#000 17%,#000 83%,transparent)}.signal-garden span{width:4px;height:calc(6px + (var(--i) % 5) * 4px);border-radius:99px;background:#c6bfae;transform-origin:center}.signal-garden.is-active span{background:linear-gradient(#d99c42,#27634e);animation:hum .72s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -47ms)}.signal-garden.playing{position:absolute;left:0;right:0;bottom:5px;margin:auto;opacity:.42}@keyframes hum{to{height:calc(14px + (var(--i) % 7) * 7px)}}.record-button,.forge-button,.download-button{border:0;color:#fff7df;font-weight:800;letter-spacing:.02em;background:#b55e39;box-shadow:0 7px #7c3f2a,0 12px 22px #7c3f2a2e;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.record-button{min-width:180px;padding:15px 24px;border-radius:16px}.record-button:hover,.forge-button:hover,.download-button:hover{transform:translateY(-2px);box-shadow:0 9px #7c3f2a,0 15px 24px #7c3f2a33}.record-button:active,.forge-button:active,.download-button:active{transform:translateY(5px);box-shadow:0 2px #7c3f2a}.record-button:disabled,.forge-button:disabled,.download-button:disabled{opacity:.55;cursor:wait;transform:none}.record-dot{display:inline-block;width:10px;height:10px;margin-right:8px;border:2px solid #fff3d3;border-radius:50%}.hint{margin:20px 0 8px;color:#536b61;font-size:.83rem}.fallback-row{display:flex;gap:6px;color:#958a76;font-size:.75rem}.text-button{padding:0;border:0;border-bottom:1px solid currentColor;color:#a65d36;font-weight:700;background:none;cursor:pointer}.text-button:disabled{opacity:.4}.recording-label{margin:2px 0 8px;color:#b05035;font-size:.72rem;font-weight:900;letter-spacing:.17em}.recording-label span{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#c7553b;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}.timer{margin:0 0 18px;color:#1a4135;font:700 2.1rem Georgia,serif}.timer small{color:#9a927f;font:500 .9rem sans-serif}.stop-button{padding:12px 20px;border:1px solid #d4c5a7;border-radius:13px;color:#72483a;background:#fffaf0;font-weight:800;cursor:pointer}.stop-button span{display:inline-block;width:9px;height:9px;margin-right:7px;background:#a95039}.time-track{width:min(100%,400px);height:4px;margin-top:22px;overflow:hidden;border-radius:5px;background:#e2dac9}.time-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d4a13c,#b65338);transition:width .1s linear}.recorded-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 18px;padding:16px;border:1px solid #d9d1bd;border-radius:17px;background:#f9f5e9}.recorded-info{display:flex;align-items:center;gap:11px}.recorded-info strong,.recorded-info span{display:block}.recorded-info strong{font-size:.88rem}.recorded-info span{margin-top:2px;color:#8c8270;font-size:.68rem}.sound-gem{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:#f9e9b7;background:#31604f}.audio-preview{grid-column:1 / -1;width:100%;height:42px}.is-locked{opacity:.63}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.style-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:11px;min-height:132px;padding:17px;overflow:hidden;text-align:left;border:1px solid #d8d0bd;border-radius:18px;color:#354d44;background:#fbf8ee;cursor:pointer;transition:border-color .2s,transform .2s,background .2s}.style-card:hover:not(:disabled){transform:translateY(-2px);border-color:#b4975a}.style-card.selected{border:2px solid #32634f;background:#f3f5e9;box-shadow:inset 0 0 0 3px #fff,0 6px 18px #2753421a}.style-card.battle.selected{border-color:#a9543d;background:#faf0e7}.style-card:disabled{cursor:not-allowed}.style-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#f5e7bd;background:#366650;font-size:1.25rem}.battle .style-icon{background:#9b4f3c}.style-copy strong,.style-copy em,.style-copy small{display:block}.style-copy strong{color:#1a3f33;font:700 1.05rem Georgia,serif}.style-copy em{margin:3px 0 8px;color:#b46d36;font-size:.72rem;font-style:normal;font-weight:800}.style-copy small{color:#77715f;font-size:.68rem;line-height:1.5}.bpm{position:absolute;right:12px;bottom:10px;color:#9b917e;font-size:.6rem;font-weight:800;letter-spacing:.06em}.variation-panel{margin-top:18px;padding:15px;border:1px solid #ddd2bb;border-radius:17px;background:#fffaf0ad}.variation-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}.variation-heading strong{color:#254d40;font-size:.8rem}.variation-heading span{color:#8a806d;font-size:.65rem}.variation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.variation-grid button{min-height:70px;padding:10px 9px;border:1px solid #d5cbb6;border-radius:13px;color:#4b5e55;background:#fffdf6;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.variation-grid button:hover:not(:disabled){transform:translateY(-1px);border-color:#9f8757}.variation-grid button.selected{border:2px solid #b26a37;color:#783f2d;background:#fff1dc;box-shadow:inset 0 0 0 2px #fff}.variation-grid button:disabled{cursor:wait;opacity:.58}.variation-grid strong,.variation-grid span{display:block}.variation-grid strong{font-size:.7rem}.variation-grid span{margin-top:4px;color:#887d69;font-size:.58rem;line-height:1.4}.forge-button{display:block;width:min(100%,310px);margin:25px auto 4px;padding:16px 22px;border-radius:16px}.forge-button span{margin-right:6px;color:#f4cc6f}.processing-card{display:flex;align-items:center;gap:24px;background:#183f34;color:#eff0d9}.processing-card h2{margin:0 0 8px;font:700 1.2rem Georgia,serif}.processing-card p:last-child{margin:0;color:#b9c8b5;font-size:.76rem}.orbit{position:relative;flex:0 0 auto;width:68px;height:68px;border:1px solid #6b8877;border-radius:50%;animation:spin 4s linear infinite}.orbit:before{content:"♪";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#f0c96f;font:700 24px Georgia,serif;animation:spin 4s linear reverse infinite}.orbit span{position:absolute;width:8px;height:8px;border-radius:50%;background:#e7ba55}.orbit span:nth-child(1){top:-4px;left:29px}.orbit span:nth-child(2){bottom:5px;right:4px}.orbit span:nth-child(3){bottom:7px;left:3px}@keyframes spin{to{transform:rotate(360deg)}}.error-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;border-color:#e0b6a8;background:#fff4ec}.error-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:#b85e46;font-weight:900}.error-card strong{color:#753a2d}.error-card p{margin:3px 0 0;color:#8c6558;font-size:.78rem}.secondary-button{padding:11px 14px;border:1px solid #cdbfa5;border-radius:12px;color:#315348;background:#fffaf0;font-size:.75rem;font-weight:800;cursor:pointer}.result-card{border-color:#30664f5c}.player-art{position:relative;min-height:215px;padding:42px 20px;overflow:hidden;border-radius:20px;text-align:center;color:#f5edcf;background:linear-gradient(155deg,#173e34,#35664e)}.player-art.battle{background:linear-gradient(155deg,#3c2826,#9c4e38)}.player-art:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.28;background:radial-gradient(circle at 50% 12%,#f6d47b,transparent 30%),linear-gradient(transparent 50%,#0000004d)}.player-art p,.player-art strong,.player-art small{position:relative;z-index:2;display:block}.player-art p{margin:0 0 7px;color:#edc86f;font-size:.68rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.player-art strong{font:700 1.65rem Georgia,Yu Mincho,serif}.player-art small{margin-top:9px;color:#cbd4c4;font-size:.66rem}.landscape{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.landscape span{position:absolute;bottom:-70px;width:220px;height:150px;border-radius:50% 50% 0 0;background:#0a241c6b}.landscape span:nth-child(1){left:-40px}.landscape span:nth-child(2){left:30%;bottom:-95px;width:290px}.landscape span:nth-child(3){right:-80px;bottom:-55px}.player-controls{display:flex;align-items:center;gap:13px;padding:18px 3px 7px}.play-button{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;padding-left:3px;border:0;border-radius:50%;color:#fff1cb;background:#b65d3c;box-shadow:0 5px #78402f;cursor:pointer}.player-status{min-width:0;flex:1}.player-status strong,.player-status span{display:block}.player-status strong{font-size:.82rem}.player-status span{margin-top:3px;overflow:hidden;color:#8a806d;font-size:.67rem;white-space:nowrap;text-overflow:ellipsis}.loop-toggle{display:flex;align-items:center;gap:5px;color:#506d61;font-size:.7rem;font-weight:800;cursor:pointer}.loop-toggle input{accent-color:#2f6b54}.loop-toggle span{font-size:1.1rem}.result-actions{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;margin-top:16px}.download-button{padding:15px 20px;border-radius:15px}.download-button span{margin-right:7px}footer{padding:20px 12px 12px;color:#7d806f;text-align:center;font-size:.68rem}footer span{color:#b26938}@media(max-width:600px){.hero{grid-template-columns:auto 1fr;gap:14px;padding-bottom:23px}.brand-mark{width:51px;height:51px;border-radius:15px;font-size:25px}.api-light{grid-column:1 / -1;justify-self:start;margin-left:65px;margin-top:-8px}.quest-card,.processing-card,.error-card{border-radius:20px}.style-grid{grid-template-columns:1fr}.style-card{min-height:110px}.variation-heading{display:block}.variation-heading span{display:block;margin-top:3px}.variation-grid{grid-template-columns:1fr}.variation-grid button{min-height:58px}.recorded-panel{grid-template-columns:1fr}.recorded-panel>.text-button{justify-self:start}.error-card{grid-template-columns:auto 1fr}.error-card .secondary-button{grid-column:2;justify-self:start}.processing-card{align-items:flex-start;gap:16px}.orbit{width:54px;height:54px}.orbit span:nth-child(1){left:22px}.player-status span{max-width:145px}.result-actions{grid-template-columns:1fr}.result-actions .secondary-button{justify-self:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media(min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}}