:root{color:#111;background:#feeee7;color-scheme:light;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;--background: #feeee7;--foreground: #111111;--card: #ffffff;--card-foreground: #111111;--primary: #fcd56b;--primary-foreground: #111111;--secondary: #eaf6f7;--secondary-foreground: #111111;--muted: #f7f7f4;--muted-foreground: #666666;--accent: #01c5d5;--accent-foreground: #ffffff;--input: #d7d7d7;--ring: #01c5d5;--radius: .625rem;--accent-yellow: #fcd56b;--accent-cyan: #01c5d5;--accent-cyan-dark: #059ba7;--accent-blue: #8dcbf8;--accent-orange: #f0530f;--accent-pink: #e89ab9;--ink: #252525;--text-subtle: #747474;--border: #d7d7d7;--progress: 0%}*{box-sizing:border-box}body{position:relative;min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 9% 16%,rgba(252,213,107,.65),transparent 20rem),radial-gradient(circle at 91% 11%,rgba(1,197,213,.22),transparent 22rem),radial-gradient(circle at 86% 84%,rgba(232,154,185,.2),transparent 18rem),linear-gradient(160deg,#feeee7,#fef5db 52%,#eaf6f7);color:var(--ink)}button,input,select,a,output{font:inherit}.splash-screen{position:fixed;inset:0;z-index:20;display:grid;overflow:hidden;place-items:center;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.82),transparent 13rem),radial-gradient(circle at 70% 70%,rgba(1,197,213,.22),transparent 18rem),linear-gradient(160deg,#feeee7,#fef5db 54%,#eaf6f7);pointer-events:none;animation:splashExit .62s cubic-bezier(.65,0,.35,1) 1.35s forwards}.splash-screen:before,.splash-screen:after{position:absolute;width:44vw;min-width:360px;height:140vh;content:"";transform:rotate(18deg) translateY(-8%)}.splash-screen:before{left:-22vw;background:var(--accent-yellow);animation:splashStripeLeft 1.1s cubic-bezier(.2,.8,.2,1) both}.splash-screen:after{right:-24vw;background:#01c5d5db;animation:splashStripeRight 1.1s cubic-bezier(.2,.8,.2,1) .12s both}.splash-screen.is-hidden{visibility:hidden;opacity:0;transform:scale(1.04);animation:none}.splash-panel{position:relative;z-index:1;display:grid;place-items:center;gap:18px;color:var(--ink);animation:splashPanelIn .82s cubic-bezier(.18,1,.32,1) both}.splash-note{display:grid;width:clamp(80px,12vw,128px);height:clamp(80px,12vw,128px);place-items:center;border:5px solid var(--ink);border-radius:30%;background:var(--accent-yellow);box-shadow:12px 12px 0 var(--accent-cyan);font-size:clamp(2.8rem,7vw,5.3rem);font-weight:900;line-height:1;paint-order:stroke fill;text-shadow:1px 0 0 currentColor,-1px 0 0 currentColor,0 1px 0 currentColor,0 -1px 0 currentColor;transform:rotate(-7deg);-webkit-text-stroke:.04em currentColor;animation:splashNotePop .96s cubic-bezier(.18,1,.32,1) both}.splash-title{padding:7px 18px 6px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--accent-cyan-dark);font-family:Righteous,"M PLUS 1",sans-serif;font-size:clamp(.92rem,2vw,1.35rem);letter-spacing:.14em}.app-shell{position:relative;z-index:1;display:flex;width:min(1180px,calc(100vw - 48px));min-height:100vh;margin:0 auto;padding:58px 0 52px;flex-direction:column;align-items:center}.intro{display:flex;width:min(100%,1080px);flex-direction:column;align-items:center;text-align:center}.app-mark{position:relative;display:grid;width:76px;height:76px;place-items:center;border:4px solid var(--ink);border-radius:30%;background:var(--accent-yellow);color:var(--ink);box-shadow:9px 9px 0 var(--accent-cyan);font-size:2.45rem;font-weight:900;line-height:1;paint-order:stroke fill;text-shadow:1px 0 0 currentColor,-1px 0 0 currentColor,0 1px 0 currentColor,0 -1px 0 currentColor;transform:rotate(-5deg);-webkit-text-stroke:.04em currentColor}.app-mark:after{position:absolute;right:-13px;bottom:-10px;width:22px;height:22px;border:4px solid var(--ink);border-radius:999px;content:"";background:var(--accent-pink)}.intro h1{position:relative;margin:28px 0 0;color:var(--ink);font-family:"M PLUS 1",Noto Sans JP,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;font-size:clamp(3.15rem,9.2vw,7.1rem);font-weight:900;letter-spacing:-.12em;line-height:.9;text-shadow:-2px -2px 0 #ffffff,3px 3px 0 var(--accent-yellow),8px 8px 0 rgba(1,197,213,.32)}.intro h1:after{display:block;width:fit-content;margin:32px auto 0;padding:5px 14px 4px;border:2px solid var(--ink);border-radius:999px;content:"TRANSKUN";background:#fff;color:var(--accent-cyan-dark);font-family:Righteous,"M PLUS 1",sans-serif;font-size:clamp(.78rem,1.5vw,1.1rem);font-weight:400;letter-spacing:.12em;line-height:1;text-shadow:none}.lead{width:min(100%,680px);margin:16px 0 0;color:#333;font-size:clamp(1rem,2vw,1.18rem);font-weight:800;line-height:1.65}.converter-card{position:relative;display:grid;width:min(100%,1040px);margin-top:32px;padding:clamp(20px,3.2vw,34px);gap:18px;border:3px solid var(--ink);border-radius:30px;background:#fffffff2}.converter-main{display:grid;grid-template-columns:minmax(340px,1.12fr) minmax(300px,.88fr);gap:clamp(16px,2.4vw,28px);align-items:stretch}.control-stack{display:grid;gap:14px;align-content:start}.dropzone{display:grid;min-height:276px;padding:clamp(26px,4vw,42px) clamp(18px,3vw,34px);gap:11px;place-items:center;border:2px dashed var(--accent-cyan-dark);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(1,197,213,.18),transparent 58%),linear-gradient(180deg,#fff,#f6fdff);text-align:center;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,transform .16s ease,box-shadow .16s ease}.dropzone:hover,.dropzone:focus-within{transform:translateY(-2px);border-color:var(--accent-orange);box-shadow:0 16px 32px #01c5d524}.dropzone-kicker,.section-label{display:inline-flex;width:fit-content;align-items:center;border-radius:999px;color:var(--accent-cyan-dark);font-size:.8rem;font-weight:900;letter-spacing:.08em}.dropzone-kicker{padding:5px 12px;background:var(--accent-yellow);color:var(--ink)}.dropzone strong{max-width:100%;overflow:hidden;color:var(--ink);font-size:clamp(1.28rem,3.2vw,2rem);font-weight:900;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.dropzone span:last-of-type{color:var(--text-subtle);font-size:.86rem;font-weight:700}.swing-control{display:grid;padding:20px;gap:14px;border:2px solid rgba(37,37,37,.08);border-radius:22px;background:linear-gradient(135deg,#fcd56b8c,#ffffffc2 48%),#fef5db}.control-heading{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}.control-heading p{margin:4px 0 0;color:#555;font-size:.86rem;font-weight:700}.control-heading strong{min-width:4.75rem;color:var(--ink);font-family:Righteous,"M PLUS 1",sans-serif;font-size:1.45rem;font-weight:400;text-align:right}.engine-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;min-height:22px;align-items:end}.engine-meter span{display:block;height:8px;border:2px solid rgba(37,37,37,.78);border-radius:999px;background:var(--accent-cyan);transform-origin:center bottom;animation:meterPulse 1.2s ease-in-out infinite}.engine-meter span:nth-child(2){background:var(--accent-blue);animation-delay:.12s}.engine-meter span:nth-child(3){background:var(--accent-yellow);animation-delay:.24s}.engine-meter span:nth-child(4){background:var(--accent-pink);animation-delay:.36s}.engine-meter span:nth-child(5){background:var(--accent-orange);animation-delay:.48s}.range-labels{display:flex;justify-content:space-between;gap:12px;color:var(--text-subtle);font-size:.76rem;font-weight:800}.advanced-settings{border:2px solid rgba(37,37,37,.1);border-radius:20px;background:#fff}.advanced-settings summary{position:relative;display:flex;width:100%;min-height:52px;padding:14px 16px;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);cursor:pointer;font-size:.88rem;font-weight:900;list-style:none;user-select:none;transition:background-color .16s ease}.advanced-settings summary::-webkit-details-marker{display:none}.advanced-settings summary:after{position:relative;z-index:0;display:block;width:1.65rem;height:1.65rem;flex:0 0 auto;border:2px solid var(--ink);border-radius:999px;content:"";background:var(--accent-yellow);transition:background-color .16s ease,color .16s ease,transform .16s ease}.advanced-settings summary:before{position:absolute;z-index:1;top:50%;right:calc(16px + .825rem);width:11px;height:11px;content:"";background:linear-gradient(var(--ink),var(--ink)) center / 11px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center / 2px 11px no-repeat;transform:translate(50%,-50%);transition:background .16s ease,transform .16s ease;pointer-events:none}.advanced-settings summary:hover{background:#01c5d514}.advanced-settings summary:focus-visible{outline:3px solid rgba(1,197,213,.35);outline-offset:3px}.advanced-settings[open] summary{border-bottom:1px solid rgba(37,37,37,.08)}.advanced-settings[open] summary:after{background:var(--accent-cyan);transform:rotate(180deg)}.advanced-settings[open] summary:before{background:linear-gradient(#fff,#fff) center / 12px 2px no-repeat;transform:translate(50%,-50%) rotate(180deg)}.advanced-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:16px}.field{display:grid;gap:6px}.field span{color:var(--text-subtle);font-size:.78rem;font-weight:900}.field output{min-height:44px;padding:10px 12px;overflow-wrap:anywhere;border:1px solid var(--border);border-radius:13px;background-color:#fbfbfb;color:var(--ink);font-size:.92rem;font-weight:700}.action-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}.main-action{flex:0 1 360px}.btn-lg-primary,.btn-lg-secondary{display:inline-flex;min-height:48px;padding:12px 18px;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;font-weight:900;text-decoration:none}.btn-lg-primary{border:2px solid var(--ink);background:var(--accent-yellow);color:var(--ink);box-shadow:5px 5px 0 var(--accent-cyan);transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease}.btn-lg-primary:hover:not(:disabled){transform:translate(-1px,-1px);background:#ffe18b;box-shadow:7px 7px 0 var(--accent-cyan)}.btn-lg-secondary{border:2px solid var(--ink);background:#fff;color:var(--ink)}.status-area{display:grid;gap:10px;padding:5px 2px 0}.status-area p{margin:0;color:#555;font-size:.86rem;font-weight:700;line-height:1.6;text-align:center}.progress-meter{position:relative;display:grid;overflow:hidden;height:34px;place-items:center;border:2px solid rgba(37,37,37,.14);border-radius:999px;background:#fff;color:var(--ink);font-family:"M PLUS 1",Noto Sans JP,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;font-size:1rem;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:.06em}.progress-meter:before{position:absolute;z-index:0;inset:0 auto 0 0;width:var(--progress);content:"";border-radius:inherit;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.48) 45%,transparent 90%),linear-gradient(90deg,var(--accent-cyan),var(--accent-blue),var(--accent-yellow));background-position:-140px 0,0 0;background-size:140px 100%,100% 100%;animation:progressFlow 1.2s linear infinite;transition:width .52s cubic-bezier(.22,1,.36,1)}.progress-meter:after{position:relative;z-index:1;content:attr(data-progress);text-shadow:0 1px 0 rgba(255,255,255,.72)}.result-panel{display:grid;gap:12px;padding:16px;justify-items:center;border:2px solid rgba(37,37,37,.08);border-radius:20px;background:var(--secondary);text-align:center}.result-panel p{margin:0;color:#333;font-size:.9rem;font-weight:800;line-height:1.7;text-align:center}.download-link{justify-self:center}.trust-row{display:flex;margin-top:18px;justify-content:center;color:#555;font-size:.77rem;font-weight:800;line-height:1.7;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}[hidden],.result-panel[hidden],.download-link[hidden]{display:none!important}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.55}@keyframes splashExit{0%{opacity:1;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.04)}}@keyframes splashPanelIn{0%{opacity:1;transform:translateY(18px) scale(.88)}58%{opacity:1;transform:translateY(-2px) scale(1.04)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes splashNotePop{0%{opacity:0;transform:translateY(34px) rotate(-18deg) scale(.54)}52%{opacity:1;transform:translateY(-12px) rotate(6deg) scale(1.18)}76%{opacity:1;transform:translateY(5px) rotate(-10deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(-7deg) scale(1)}}@keyframes splashStripeLeft{0%{transform:rotate(18deg) translate(-38%,-8%)}to{transform:rotate(18deg) translateY(-8%)}}@keyframes splashStripeRight{0%{transform:rotate(18deg) translate(38%,-8%)}to{transform:rotate(18deg) translateY(-8%)}}@keyframes progressFlow{0%{background-position:-140px 0,0 0}to{background-position:140px 0,0 0}}@keyframes meterPulse{0%,to{transform:scaleY(.7)}50%{transform:scaleY(1.7)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-delay:0ms!important;animation-duration:1ms!important;transition-duration:1ms!important}.splash-screen{display:none}.progress-meter:before{animation:none!important}}@media(max-width:860px){.app-shell{width:min(100%,calc(100vw - 28px));padding-top:36px}.app-mark{width:64px;height:64px;box-shadow:7px 7px 0 var(--accent-cyan);font-size:2rem}.converter-card{margin-top:28px;border-radius:24px}.converter-main{grid-template-columns:1fr}.dropzone{min-height:188px}.dropzone strong{white-space:normal}.main-action{flex:1 1 220px}}@media(max-width:520px){.intro h1{letter-spacing:-.13em;text-shadow:-1px -1px 0 #ffffff,2px 2px 0 var(--accent-yellow),5px 5px 0 rgba(1,197,213,.3)}.converter-card{padding:18px}.action-row{justify-content:stretch}.btn-lg-primary,.btn-lg-secondary{width:100%}}
