:root{--dx-pink: #f256b6;--dx-yellow: #fef14d;--dx-orange: #ff6a3b;--dx-green: #00ca55;--dx-light: #eae8e8}html,body{margin:0;width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(720px 420px at 0% 0%,rgba(0,202,85,.14),transparent 62%),radial-gradient(720px 420px at 100% 0%,rgba(242,86,182,.13),transparent 62%),radial-gradient(720px 420px at 0% 100%,rgba(254,241,77,.12),transparent 64%),radial-gradient(720px 420px at 100% 100%,rgba(255,106,59,.12),transparent 64%),linear-gradient(135deg,#050505,#0a0a0a 55%,#101010);color:var(--dx-light)}body{display:flex;align-items:stretch;justify-content:center}.app{display:grid;grid-template-columns:minmax(320px,380px) minmax(360px,1fr);gap:20px;padding:28px;box-sizing:border-box;width:100%;max-width:1280px;height:100%}.controls{display:flex;flex-direction:column;gap:14px;height:100%;min-height:0}.controls-top,.controls-bottom{background:#070c0ab8;padding:18px;border-radius:18px;border:1px solid rgba(234,232,232,.28);backdrop-filter:blur(10px);box-shadow:0 20px 40px #02061766}.controls-top{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;border-color:#f256b6b3;box-shadow:0 0 0 1px #f256b642,0 20px 40px #02061766}.controls-bottom{font-size:14px;font-weight:400;line-height:1.4;border-color:#fef14db8;box-shadow:0 0 0 1px #fef14d3d,0 20px 40px #02061766}.controls-bottom p{margin:0}.controls-bottom p+p{margin-top:10px}.controls-bottom a{color:#3b82f6;text-decoration:none}.controls-bottom a:hover{text-decoration:underline;color:var(--dx-yellow)}.field{display:flex;flex-direction:column;gap:6px;font-size:14px}.field span{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dx-light)}textarea,input,select{font:inherit;border-radius:12px;border:1px solid rgba(148,163,184,.35);padding:10px 12px;resize:vertical;outline:none;background:#f8fafcf2;color:#0f172a;transition:box-shadow .15s ease,border-color .15s ease,background-color .15s ease}textarea:focus,input:focus,select:focus{border-color:var(--dx-orange);box-shadow:0 0 0 3px #ff6a3b47}textarea{min-height:140px;line-height:1.45}input[type=number]{width:100%;box-sizing:border-box}input[type=color]{height:44px;padding:6px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid-spacer{min-height:1px}.export-btn{margin-top:6px;align-self:flex-start;border:1px solid rgba(0,0,0,.55);border-radius:10px;padding:9px 14px;background:var(--dx-pink);color:#111827;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.01em;transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;box-shadow:0 1px 2px #0206172e}.export-btn:hover{transform:translateY(-1px);background:#f67fc7;border-color:#000000a6;box-shadow:0 4px 10px #02061733}.export-btn:active{transform:translateY(0);background:#d95ea4;box-shadow:0 1px 2px #02061733}.preview{display:flex;align-items:center;justify-content:center;background:#070c0aad;border:1px solid rgba(255,106,59,.75);border-radius:18px;padding:20px;min-height:360px;backdrop-filter:blur(8px);box-shadow:0 0 0 1px #ff6a3b3d,0 20px 40px #02061759}.bubble-svg{max-width:100%;max-height:min(72vh,760px);height:auto;display:block}.bubble-path{fill:#fff}.bubble-text{font-size:24px;fill:#000}@media(max-width:768px){.app{grid-template-columns:1fr;padding:14px;gap:14px}.grid{grid-template-columns:1fr}.grid-spacer{display:none}}@font-face{font-family:IBM Plex Mono;src:url(var(--ibmPlexMonoRegular)) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:IBM Plex Mono;src:url(var(--ibmPlexMonoItalic)) format("truetype");font-style:italic;font-weight:400}@font-face{font-family:IBM Plex Mono;src:url(var(--ibmPlexMonoBold)) format("truetype");font-style:normal;font-weight:700}@font-face{font-family:IBM Plex Mono;src:url(var(--ibmPlexMonoBoldItalic)) format("truetype");font-style:italic;font-weight:700}@font-face{font-family:Noto Sans JP;src:url(var(--notoSansJPRegular)) format("opentype");font-style:normal;font-weight:400}@font-face{font-family:Noto Sans JP;src:url(var(--notoSansJPRegular)) format("opentype");font-style:italic;font-weight:400}@font-face{font-family:Noto Sans JP;src:url(var(--notoSansJPBold)) format("opentype");font-style:normal;font-weight:700}@font-face{font-family:Noto Sans JP;src:url(var(--notoSansJPBold)) format("opentype");font-style:italic;font-weight:700}