:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#10110f;color:#f8f5ec}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden}button,input{font:inherit}.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:100vh;background:radial-gradient(circle at 16% 14%,rgba(20,183,166,.2),transparent 28%),linear-gradient(135deg,#171814,#0b0d0e 58%,#18211f)}.stage{position:relative;display:grid;place-items:center;min-width:0;padding:24px}canvas{width:min(72vh,calc(100vw - 420px));max-width:100%;height:auto;aspect-ratio:9 / 16;background:#06070d;box-shadow:0 24px 80px #0000007a}.recording-indicator{position:absolute;top:34px;left:34px;display:none;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;background:#ff5a3deb;color:#fff7ef;font-size:12px;font-weight:800;letter-spacing:.08em}.recording-indicator.active{display:flex}.recording-indicator:before{width:8px;height:8px;border-radius:50%;background:currentColor;content:""}.panel{display:flex;flex-direction:column;gap:18px;max-height:100vh;overflow-y:auto;padding:30px 24px;border-left:1px solid rgba(248,245,236,.14);background:#10110fd6;backdrop-filter:blur(18px)}.brand{padding-bottom:8px}.eyebrow{margin:0 0 10px;color:#13b7a6;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}h1{margin:0;max-width:11ch;font-size:clamp(34px,4.2vw,56px);line-height:.96;letter-spacing:0}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}button{min-height:42px;border:1px solid rgba(248,245,236,.18);border-radius:6px;background:#f8f5ec14;color:#f8f5ec;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}button:hover{border-color:#f8f5ec7a;background:#f8f5ec24}button:active{transform:translateY(1px)}.primary{border-color:transparent;background:#f4f0df;color:#161712;font-weight:800}.primary:hover{border-color:transparent;background:#fff9df}.segment{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:5px;border:1px solid rgba(248,245,236,.13);border-radius:7px;background:#f8f5ec0d}.segment button{min-height:34px;border:0;border-radius:4px;background:transparent}.segment button.active{background:#243b6b}.lockable-control{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:6px;align-items:stretch}.lock-button{position:relative;min-height:34px;padding:0;border-radius:7px;color:#f8f5ec80;font-size:0}.lock-button.active{border-color:#13b7a6b8;background:#13b7a62e;color:#13b7a6}.lock-button:before,.lock-button:after{position:absolute;left:50%;content:"";transition:opacity .16s ease,transform .16s ease}.lock-button:before{top:7px;width:10px;height:10px;border:2px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0;transform:translate(-50%)}.lock-button:after{top:15px;width:15px;height:11px;border:2px solid currentColor;border-radius:3px;background:linear-gradient(currentColor,currentColor) center 5px / 2px 4px no-repeat,#f8f5ec0d;transform:translate(-50%)}.lock-button:not(.active):before{opacity:.82;transform:translate(-50%,-6px)}.lock-button:not(.active):after{background:#f8f5ec08}.pattern-segment{grid-template-columns:repeat(3,1fr)}.pattern-segment button,.color-segment button,.wave-segment button{font-size:13px}.color-segment,.wave-segment{grid-template-columns:repeat(2,1fr)}.quad-segment{grid-template-columns:repeat(4,1fr)}.quad-segment button{font-size:12px}label{display:grid;gap:8px;color:#f8f5ecc7;font-size:13px;font-weight:760}.toggle{display:flex;align-items:center;justify-content:space-between;min-height:34px}.toggle input{width:42px;height:22px;accent-color:#13b7a6}.conditional-control{opacity:1;transition:opacity .16s ease}.conditional-control.inactive{opacity:.48}.hidden{display:none}input[type=range]{width:100%;accent-color:#13b7a6}.status{min-height:42px;margin:0;color:#f8f5eca3;font-size:13px;line-height:1.45}.export-total{display:inline-flex;align-items:baseline;gap:8px;margin-top:14px;color:#f8f5ecb3;font-size:12px;font-weight:800;letter-spacing:.02em}.export-total.hidden{display:none}.export-total:before{align-self:center;width:6px;height:6px;border-radius:50%;background:#13b7a6;box-shadow:0 0 14px #13b7a6b8;content:""}.export-total strong{color:#f8f5ec;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}.share-block{display:grid;gap:7px;margin-top:auto}.share-label{margin:0;color:#f8f5eca3;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.native-share-button{min-height:36px;border-color:#13b7a67a;background:#13b7a624;color:#f8f5ec;font-size:13px;font-weight:800}.share-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.share-panel button{display:grid;place-items:center;min-height:34px;padding:0}.share-panel svg{width:18px;height:18px;fill:currentColor;overflow:visible}.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:#050608ad;backdrop-filter:blur(10px)}.modal.hidden{display:none}.modal-panel{width:min(520px,100%);padding:18px;border:1px solid rgba(248,245,236,.16);border-radius:8px;background:#10110f;box-shadow:0 24px 80px #0000007a}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.modal-header h2{margin:0;font-size:20px;letter-spacing:0}.modal-copy{margin:0 0 14px;color:#f8f5ecad;font-size:13px;line-height:1.45}.download-preview{display:block;width:100%;max-height:min(58vh,520px);margin-bottom:12px;border-radius:6px;background:#06070d}.download-filename{margin:0 0 10px;overflow-wrap:anywhere;color:#f8f5ecbd;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.4}.download-share{width:100%;margin-bottom:8px;border-color:#13b7a6b8;background:#13b7a62e;color:#f8f5ec;font-weight:800}.download-hint{margin:10px 0 0;color:#f8f5ec94;font-size:12px;line-height:1.4}.modal-close{min-width:34px;min-height:34px;padding:0;font-size:20px}.export-choice-grid{display:grid;gap:10px}.export-choice{display:grid;gap:6px;min-height:0;padding:14px;text-align:left}.export-choice strong{font-size:16px}.export-choice span{color:#f8f5ecad;font-size:13px;line-height:1.4}.primary-choice{border-color:#13b7a6b8;background:#13b7a624}@media (max-width: 920px){html,body{min-height:100%;overflow:auto;overscroll-behavior-y:auto}.app{grid-template-columns:1fr;min-height:100svh}.stage{min-height:auto;padding:14px}canvas{width:min(92vw,54svh);max-height:58svh}.panel{max-height:none;overflow:visible;padding:22px 16px max(24px,env(safe-area-inset-bottom));border-top:1px solid rgba(248,245,236,.14);border-left:0}h1{max-width:14ch}}