*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;width:100%;max-width:100%}body{margin:0;background:radial-gradient(ellipse at center,rgba(10,28,38,.85) 0%,rgba(5,7,11,1) 70%),linear-gradient(180deg,var(--bg1),var(--bg0));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}.app-shell{min-height:100vh;display:flex;flex-direction:column;min-width:0;overflow-x:hidden}.frame{width:min(1180px,calc(100vw - 32px));max-width:100%;margin:0 auto}.topbar{width:min(1180px,calc(100vw - 32px));max-width:100%;margin:12px auto 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.45);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.topbar .left{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}.topbar .center{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.topbar .right{display:flex;justify-content:flex-end;flex-wrap:wrap}.account-mini{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex-wrap:wrap}.account-email{max-width:170px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ebf5ffd1;font-size:12px}.account-plan{height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(137,211,255,.24);background:rgba(20,62,82,.24);color:#d2f0ffe6;font-size:11px;font-weight:800;line-height:22px;white-space:nowrap}.account-btn{height:24px;padding:0 9px;font-size:12px}.redeem-mini{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex-wrap:wrap}.redeem-input{width:112px;max-width:100%;min-width:0;height:24px;padding:0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:#ebf5ffeb;font-size:12px}.redeem-input::placeholder{color:#ebf5ff75}.redeem-status{max-width:210px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#d2f0ffd1}.redeem-status.error{color:#ffb2b2eb}.redeem-status.success{color:#a2ffc4eb}.btn{height:28px;padding:0 12px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);color:#ebf5ffeb;cursor:pointer;-webkit-user-select:none;user-select:none;max-width:100%}.btn:hover{background:rgba(0,0,0,.35)}.btn:active{transform:translateY(1px)}.pill{height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2);color:#ebf5ffe0;font-size:12px;line-height:26px;white-space:nowrap}.row2{display:grid;grid-template-columns:minmax(270px,300px) minmax(0,1fr) minmax(310px,340px);gap:18px;align-items:stretch;margin-top:12px;min-width:0}.panel{border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.45);padding:14px;overflow:hidden;min-height:150px;min-width:0}.panel h3{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.2px}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}.panel-title-row h3{margin:0}.panel-expand-btn{height:24px;padding:0 8px;border-radius:8px;border:1px solid rgba(137,211,255,.24);background:rgba(0,0,0,.22);color:#dcebffe0;cursor:pointer;font-size:11px;font-weight:800;white-space:nowrap}.panel-expand-btn:hover{background:rgba(18,40,54,.58);border-color:#89d3ff75}.meta{font-size:12px;color:#ebf5ffdb;line-height:1.35}.progression-overview-block{margin-top:10px;display:grid;gap:7px}.progression-overview-title{color:#89d3ffdb;font-weight:900;letter-spacing:.15px}.progression-grouped{display:grid;gap:7px}.progression-row{display:grid;gap:2px;padding:7px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.13)}.progression-row-label{color:#ebf5ff9e;font-size:11px;font-weight:800}.progression-bar-line{color:#f5faffeb;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.analysis-scroll{display:grid;gap:10px;max-height:min(330px,44vh);overflow-y:auto;padding-right:4px}.expanded-panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.68)}.expanded-panel-modal{width:min(980px,calc(100vw - 32px));max-height:min(90vh,860px);max-height:min(90dvh,860px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;border:1px solid rgba(137,211,255,.24);background:radial-gradient(ellipse at top,rgba(24,56,72,.32),rgba(10,16,22,.96) 56%),rgba(10,16,22,.96);box-shadow:0 22px 64px #00000094}.expanded-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(137,211,255,.16)}.expanded-panel-eyebrow{color:#89d3ffc7;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.expanded-panel-title{margin-top:2px;color:#f5fafff0;font-size:18px;font-weight:900}.expanded-panel-close{height:30px;padding:0 10px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.24);color:#ebf5ffe6;cursor:pointer;font-weight:800}.expanded-panel-close:hover{background:rgba(28,40,54,.92);border-color:#89d3ff75}.expanded-panel-body{display:grid;gap:12px;padding:14px 16px 18px;overflow-y:auto;min-height:0;color:#dcebffe0}.analysis-section{display:grid;gap:8px;padding:10px;border-radius:10px;border:1px solid rgba(120,160,200,.16);background:rgba(0,0,0,.13);box-shadow:0 0 0 1px #00000029 inset}.analysis-section-title{color:#89d3ffe0;font-size:11px;font-weight:900;letter-spacing:.16px;text-transform:uppercase}.analysis-error-section{color:#ff6b6b;border-color:#ff6b6b47}.analysis-summary-box{color:#ebf5ffdb;line-height:1.42}.analysis-muted{color:#dcebffb3}.analysis-detail-grid{display:grid;gap:5px}.analysis-detail-row{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr);gap:10px;align-items:start}.analysis-term{color:#89d3ffd1;font-weight:800;white-space:nowrap}.analysis-value{min-width:0;color:#ebf5ffe0;overflow-wrap:anywhere;word-break:normal}.analysis-function-list{display:grid;gap:8px}.analysis-function-item{display:grid;gap:3px;padding:7px 0 8px;border-top:1px solid rgba(255,255,255,.07)}.analysis-function-item:first-child{border-top:0;padding-top:0}.analysis-function-head{color:#f5faffeb;font-weight:800;line-height:1.35}.analysis-function-explanation{color:#dcebffbd;line-height:1.38}.selected-chord-details{border-color:#89d3ff3d;background:rgba(0,0,0,.18)}.selected-chord-title{font-size:12px;font-weight:900;color:#f5fafff2}.selected-chord-empty{color:#dcebffb8}.selected-chord-grid{display:grid;gap:5px}.selected-chord-explanation{border-top:1px solid rgba(255,255,255,.08);padding-top:6px;color:#dcebffd1;overflow-wrap:anywhere}.wheel-panel{display:flex;align-items:center;justify-content:center;min-width:0}.wheel{width:260px;height:260px;border-radius:999px;border:1px solid rgba(120,160,200,.22);box-shadow:0 0 0 1px #00000059 inset;position:relative;display:flex;align-items:center;justify-content:center}.center-note{width:150px;height:150px;border-radius:999px;border:1px solid rgba(120,160,200,.18);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900}.ring-note{position:absolute;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#ebf5ffe0}.controls-row{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.35);display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}.controls-row select.btn,.controls-row button.btn{min-width:0}.tempo-control{min-height:28px;display:flex;align-items:center;gap:7px;padding:3px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);color:#ebf5ffd1;font-size:12px;font-weight:800;min-width:0;max-width:100%}.tempo-slider{width:116px;max-width:32vw;accent-color:rgba(137,211,255,.9)}.tempo-input{width:56px;min-width:0;height:24px;padding:0 5px;border-radius:7px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.24);color:#ebf5ffeb;font:inherit;font-weight:800}.hint{margin-left:6px;font-size:12px;color:#ebf5ff8c}.upgrade-message{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,198,92,.28);background:rgba(82,54,18,.28);color:#ffecc6f0;font-size:12px;line-height:1.35;display:flex;align-items:center;justify-content:space-between;gap:10px}.upgrade-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}.upgrade-action,.upgrade-dismiss{height:24px;padding:0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:#fff6e6f0;cursor:pointer}.upgrade-action{border-color:#ffd58057;background:rgba(255,198,92,.16);font-weight:800}.upgrade-action:disabled{cursor:default;opacity:.62}.upgrade-action:hover:not(:disabled),.upgrade-dismiss:hover{background:rgba(0,0,0,.34)}.auth-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.62)}.auth-modal{width:min(420px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 32px));overflow-y:auto;border-radius:14px;border:1px solid rgba(120,160,200,.3);background:rgba(9,15,22,.98);box-shadow:0 18px 44px #00000080;padding:14px}.auth-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.auth-title{color:#f5fafff2;font-size:15px;font-weight:900}.auth-subtitle{margin-top:3px;color:#dcebffa8;font-size:12px;line-height:1.35}.auth-close{height:26px;padding:0 9px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.24);color:#ebf5ffe6;cursor:pointer}.auth-form{display:grid;gap:10px}.auth-field{display:grid;gap:4px;color:#dcebffc2;font-size:12px;font-weight:800}.auth-field input{width:100%;min-width:0;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.26);color:#f5fafff0;padding:0 10px}.auth-actions{display:flex;flex-wrap:wrap;gap:8px}.auth-message,.auth-error{padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.35}.auth-message{border:1px solid rgba(137,211,255,.2);background:rgba(20,62,82,.22);color:#daf0ffeb}.auth-error{border:1px solid rgba(255,107,107,.3);background:rgba(92,24,24,.26);color:#ffd7d7f0}.piano-frame{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.35);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%}.measures-wrap{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.35);width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}.measures-title{font-size:13px;font-weight:800;margin:0 0 10px;color:#ebf5ffeb}.measure-grid{width:100%;max-width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.measure-card{border-radius:14px;border:1px solid rgba(120,160,200,.22);background:rgba(10,16,22,.35);padding:10px;cursor:pointer;width:100%;min-width:0;overflow:hidden;min-height:116px;box-sizing:border-box;display:flex;flex-direction:column;transition:border-color .14s ease,box-shadow .14s ease,filter .14s ease,background .14s ease}.measure-card.function-tonic{border-color:#61dafb70;background:linear-gradient(180deg,rgba(24,76,92,.28),rgba(10,16,22,.35));box-shadow:0 0 0 1px #61dafb1a inset}.measure-card.function-predominant{border-color:#ffc65c6b;background:linear-gradient(180deg,rgba(104,72,20,.25),rgba(10,16,22,.35));box-shadow:0 0 0 1px #ffc65c1a inset}.measure-card.function-dominant{border-color:#ff626270;background:linear-gradient(180deg,rgba(104,32,32,.26),rgba(10,16,22,.35));box-shadow:0 0 0 1px #ff62621a inset}.measure-card.function-modal-color{border-color:#bc7dff70;background:linear-gradient(180deg,rgba(78,40,110,.26),rgba(10,16,22,.35));box-shadow:0 0 0 1px #bc7dff1a inset}.measure-card.function-secondary-dominant{border-color:#ff844094;background:linear-gradient(180deg,rgba(126,48,18,.3),rgba(10,16,22,.35));box-shadow:0 0 0 1px #ff844024 inset,0 0 12px #ff5e2c1a}.measure-card.function-tritone-sub{border-color:#ff54d680;background:linear-gradient(180deg,rgba(111,28,94,.28),rgba(10,16,22,.35));box-shadow:0 0 0 1px #ff54d61f inset}.measure-card.function-chromatic-mediant{border-color:#dc76ff80;background:linear-gradient(180deg,rgba(96,42,130,.28),rgba(10,16,22,.35));box-shadow:0 0 0 1px #dc76ff1f inset}.measure-card.function-approach{border-color:#64e09e75;background:linear-gradient(180deg,rgba(28,92,58,.24),rgba(10,16,22,.35));box-shadow:0 0 0 1px #64e09e1a inset}.measure-card.function-diminished{border-color:#c3cdd675;background:linear-gradient(180deg,rgba(92,98,104,.22),rgba(10,16,22,.35));box-shadow:0 0 0 1px #c3cdd61a inset}.measure-card.function-unknown{border-color:#78a0c838}.measure-card.selected-measure{outline:2px solid rgba(137,211,255,.62);outline-offset:2px}.measure-card.active-measure{border-color:#89d3ffd1;background:rgba(18,32,42,.52);box-shadow:0 0 0 1px #89d3ff38 inset,0 0 18px #57b7ff3d;filter:brightness(1.12)}.measure-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:18px;margin-bottom:6px;gap:6px}.measure-card .label{font-size:12px;font-weight:800;opacity:.95;min-width:0}.measure-card-head .label{margin-bottom:0}.function-badge{grid-column:2;justify-self:center;max-width:112px;padding:2px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#f5faffe6;font-size:10px;font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 0 0 1px #00000029 inset}.measure-close{grid-column:3;justify-self:end;width:22px;height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.24);color:#ebf5ffc2;cursor:pointer;font-size:15px;font-weight:900;line-height:18px}.measure-close:hover{border-color:#ffb2b27a;background:rgba(92,24,24,.36);color:#ffe1e1f5}.measure-card .slot{flex:1;min-height:0;display:flex;min-width:0}.measure-card .measure-slot{flex:1;min-height:0;min-width:0}@media (max-width: 1100px){.row2{grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(280px,320px);gap:12px}.panel{padding:12px}.analysis-detail-row{grid-template-columns:minmax(88px,118px) minmax(0,1fr);gap:8px}}@media (max-width: 980px){.row2{grid-template-columns:1fr}.analysis-scroll{max-height:min(420px,58vh)}.measure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{grid-template-columns:1fr}.topbar .left,.topbar .center,.topbar .right,.controls-row{justify-content:center}.tempo-control{flex:1 1 260px;justify-content:center}.tempo-slider{flex:1 1 120px;max-width:100%}.hint{flex-basis:100%;margin-left:0;text-align:center}}@media (max-width: 560px){.frame,.topbar{width:min(1180px,calc(100vw - 16px))}.panel,.controls-row,.piano-frame,.measures-wrap{border-radius:12px}.controls-row .btn{flex:1 1 136px;min-width:0}.expanded-panel-backdrop{padding:12px;align-items:stretch}.expanded-panel-modal{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.expanded-panel-header,.expanded-panel-body{padding:12px}.upgrade-message{align-items:stretch;flex-direction:column}.upgrade-actions{justify-content:flex-start}.redeem-mini{justify-content:center;width:100%}.redeem-input{flex:1 1 132px}.redeem-status{flex-basis:100%;max-width:100%;text-align:center}.wheel{width:min(260px,78vw);height:min(260px,78vw)}.center-note{width:min(150px,46vw);height:min(150px,46vw)}.analysis-scroll{max-height:min(520px,70vh)}.measure-grid{grid-template-columns:1fr}.measure-card-head{grid-template-columns:minmax(0,1fr) auto;justify-items:center;text-align:center}.measure-card-head .label{grid-column:1 / -1}.function-badge{grid-column:1;max-width:min(180px,90%)}.measure-close{grid-column:2;grid-row:2}.analysis-detail-row{grid-template-columns:1fr;gap:2px}.analysis-term{white-space:normal}}@media (max-width: 420px){.topbar,.frame{width:min(1180px,calc(100vw - 12px))}.panel,.controls-row,.piano-frame,.measures-wrap{padding:10px}.controls-row .btn{flex-basis:100%}.tempo-control{flex-basis:100%;flex-wrap:wrap}.tempo-slider{flex-basis:100%;order:5}}.brand-lockup{display:flex;align-items:center;gap:8px;justify-content:flex-end}.brand-logo{height:24px;width:auto;max-width:44px;object-fit:contain;opacity:.95;filter:drop-shadow(0 0 4px rgba(0,0,0,.35));-webkit-user-select:none;user-select:none;pointer-events:none}.legal-footer{margin-top:10px;font-size:11px;color:#ebf5ff8c;text-align:left;-webkit-user-select:none;user-select:none}.brand-logo{height:26px;width:auto;display:block}.topbar .right img{height:26px!important;width:auto!important;display:block}.topbar .right{align-items:center;gap:8px}.piano-container{width:100%;max-width:100%;height:120px;overflow:hidden}.piano-viewport{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;touch-action:pan-x}.piano-strip{display:flex;flex-direction:row;height:100%;width:100%;min-width:760px}.piano-white-wrap{flex:0 0 calc(100% / 52);height:100%;position:relative}.piano-key{box-sizing:border-box;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,filter .14s ease}.piano-key.white{width:100%;height:100%;background:linear-gradient(#f5f5f5,#dcdcdc);border:1px solid #555;position:relative;z-index:1}.piano-key.white.active-key{background:linear-gradient(#ffffff,#bfeaff 72%,#7ed7ff);border-color:#89d3ffe6;box-shadow:0 0 0 1px #89d3ff47 inset,0 -16px 26px #57b7ff70 inset,0 0 14px #57b7ff5c;filter:brightness(1.12)}.piano-key.black{position:absolute;top:0;left:70%;transform:translate(-50%);width:60%;height:65%;background:linear-gradient(#222,#000);border:1px solid #000;z-index:2;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.piano-key.black.active-key{background:linear-gradient(#354c58,#031219);border-color:#89d3fff2;box-shadow:0 0 0 1px #89d3ff6b,0 0 16px #57b7ff94,0 -10px 14px #57b7ff38 inset;filter:brightness(1.2)}@media (max-width: 560px){.piano-container{height:104px}.piano-strip{min-width:680px}}@media (max-width: 420px){.piano-container{height:96px}.piano-strip{min-width:620px}}.measure-slot{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;min-width:0}.measure-top{display:block;padding:6px 6px 4px;box-sizing:border-box;min-width:0;width:100%}.measure-controls{display:flex;flex-direction:column;gap:6px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.measure-chord-row{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0}.measure-modifier-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;gap:6px;align-items:center;width:100%;min-width:0}.measure-btn,.measure-slot select{height:24px;font-size:11px;line-height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#ffffffeb;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.measure-btn{padding:0 7px;white-space:nowrap}.measure-btn:hover{background:rgba(0,0,0,.35)}.measure-btn:active{transform:translateY(1px)}.measure-slot select{width:100%;min-width:0;max-width:100%;padding:0 18px 0 7px;overflow:hidden;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.75) 50%),linear-gradient(135deg,rgba(255,255,255,.75) 50%,transparent 50%);background-position:calc(100% - 12px) 9px,calc(100% - 7px) 9px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.measure-slot .chord-select{width:100%;min-width:0;max-width:100%;font-size:12px}.measure-slot .ext-select,.measure-slot .inversion-select{min-width:0;max-width:100%}.measure-slot .measure-clear{min-width:46px}.measure-body{flex:1;min-height:0;padding:4px 8px 8px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.measure-chord{font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}@media (max-width: 420px){.measure-modifier-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.measure-slot .measure-clear{grid-column:1 / -1;width:100%}}.helpOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;box-sizing:border-box}.helpModal{width:min(780px,calc(100vw - 32px));max-height:min(86vh,760px);max-height:min(86dvh,760px);border-radius:14px;border:1px solid rgba(130,170,255,.22);background:radial-gradient(ellipse at top,rgba(24,56,72,.34),rgba(10,16,22,.96) 58%),rgba(10,16,22,.96);box-shadow:0 20px 60px #0000008c;overflow:hidden;display:flex;flex-direction:column}.helpModal.expanded{width:min(1120px,calc(100vw - 28px));max-height:min(94vh,920px);max-height:min(94dvh,920px)}.helpHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(130,170,255,.16)}.helpHeaderActions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.helpEyebrow{color:#89d3ffc7;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.helpTitle{margin:2px 0 0;font-size:18px;font-weight:900;color:#ebf5ffeb}.helpClose{width:32px;height:32px;border-radius:10px;border:1px solid rgba(130,170,255,.22);background:rgba(18,26,36,.75);color:#ebf5ffeb;cursor:pointer;font-size:15px;font-weight:900;line-height:1;flex:0 0 auto}.helpExpand{height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(130,170,255,.22);background:rgba(18,26,36,.75);color:#ebf5ffe6;cursor:pointer;font-size:12px;font-weight:800;line-height:1;flex:0 0 auto;white-space:nowrap}.helpClose:hover,.helpExpand:hover{background:rgba(28,40,54,.92);border-color:#89d3ff75}.helpBody{padding:14px 16px 18px;color:#dcebffdb;overflow-y:auto;min-height:0;display:grid;gap:12px;line-height:1.35}.helpSection{border:1px solid rgba(130,170,255,.12);border-radius:12px;background:rgba(0,0,0,.16);padding:12px}.helpSection h3{margin:0 0 8px;color:#f5fafff0;font-size:13px;font-weight:900}.helpBody ul{margin:0;padding-left:18px}.helpBody ol{margin:0;padding-left:20px}.helpBody li{margin:5px 0;font-size:12px}.help-definition-list,.helpSymbolGrid,.helpLabelGrid{display:grid;grid-template-columns:1fr;gap:7px}.help-definition-row,.helpColorList div{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.035);padding:7px 8px;font-size:12px}.help-definition-row{display:grid;grid-template-columns:minmax(80px,130px) minmax(0,1fr);align-items:start;gap:12px}.help-term{color:#89d3ffeb;font-weight:800;line-height:1.3;white-space:nowrap}.help-description{color:#dcebffd1;line-height:1.35;min-width:0}.helpColorList{display:grid;gap:7px}.helpColorSwatch{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:8px;box-shadow:0 0 0 1px #ffffff29 inset;vertical-align:-1px}.helpColorTonic{background:rgba(97,218,251,.86)}.helpColorPredominant{background:rgba(255,198,92,.86)}.helpColorDominant{background:rgba(255,98,98,.88)}.helpColorModal{background:rgba(188,125,255,.88)}.helpColorAdvanced{background:linear-gradient(135deg,rgba(255,132,64,.9),rgba(255,84,214,.9),rgba(100,224,158,.9))}@media (max-width: 620px){.helpOverlay{padding:12px;align-items:stretch}.helpModal{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.helpModal.expanded{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.helpHeader{align-items:flex-start}.helpHeaderActions{flex-direction:column-reverse;align-items:stretch;gap:6px}.help-definition-list,.helpSymbolGrid,.helpLabelGrid{grid-template-columns:1fr}.help-definition-row{grid-template-columns:1fr;gap:3px}}:root{--bg0: #05070b;--bg1: #071018;--edge: rgba(120,160,200,.25);--text: rgba(235,245,255,.92);--muted: rgba(235,245,255,.7)}html,body,#root{height:100%}body{margin:0;background:radial-gradient(ellipse at center,rgba(10,28,38,.85) 0%,rgba(5,7,11,1) 70%),linear-gradient(180deg,var(--bg1),var(--bg0));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.cf-root{min-height:100%;display:flex;justify-content:center;padding:28px 18px 60px}.cf-shell{width:min(1180px,96vw)}.cf-header{text-align:center;margin-bottom:14px}.cf-title{font-weight:800;letter-spacing:1px;font-size:20px}.cf-subtitle{margin-top:3px;font-size:11px;color:var(--muted)}.cf-top{display:grid;grid-template-columns:260px 1fr 260px;gap:18px;align-items:start;margin-top:10px;margin-bottom:16px}.cf-panel{background:rgba(10,16,22,.55);border:1px solid var(--edge);border-radius:12px;padding:14px 14px 16px;min-height:120px}.cf-panel-title{font-weight:700;font-size:12px;margin-bottom:10px}.cf-panel-line{font-size:11px;color:#ebf5ffdb;margin:6px 0}.cf-center{display:flex;align-items:center;justify-content:center}.cf-wheel{width:260px;height:260px;border-radius:999px;border:1px solid rgba(120,160,200,.22);box-shadow:0 0 0 1px #00000059 inset;display:flex;align-items:center;justify-content:center}.cf-wheel-core{width:150px;height:150px;border-radius:999px;border:1px solid rgba(120,160,200,.18);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800}.cf-keyboard{margin:10px 0 14px}.cf-keyboard-frame{border:1px solid rgba(120,160,200,.22);border-radius:10px;padding:10px;background:rgba(10,16,22,.45)}.cf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media (max-width: 980px){.cf-top{grid-template-columns:1fr}.cf-wheel{width:220px;height:220px;margin:0 auto}.cf-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.cf-grid{grid-template-columns:1fr}}.layoutGrid{width:min(1200px,calc(100vw - 48px));margin:8px auto 40px;display:grid;grid-template-columns:260px 1fr 260px;gap:14px}.centerCol{display:flex;flex-direction:column;align-items:center;gap:10px}.panelLeft,.panelRight{border-radius:14px;border:1px solid rgba(130,170,255,.18);background:rgba(10,16,22,.35);min-height:180px}.measuresGrid{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}