| :root {
|
| --wc-ink: #17263b;
|
| --wc-muted: #657083;
|
| --wc-cream: #fffaf0;
|
| --wc-paper: #ffffff;
|
| --wc-border: #eadfce;
|
| --wc-red: #f05a4f;
|
| --wc-red-soft: #fff0ed;
|
| --wc-yellow: #f3b51b;
|
| --wc-yellow-soft: #fff7d9;
|
| --wc-green: #20a879;
|
| --wc-green-soft: #e9f8f2;
|
| --wc-blue: #62c9e8;
|
| --wc-navy: #1c3150;
|
| --wc-shadow: 0 20px 60px rgba(28, 49, 80, 0.12);
|
| }
|
|
|
| body,
|
| .gradio-container {
|
| background:
|
| radial-gradient(circle at 10% 3%, rgba(243, 181, 27, 0.18), transparent 28rem),
|
| radial-gradient(circle at 92% 14%, rgba(98, 201, 232, 0.14), transparent 30rem),
|
| radial-gradient(circle at 70% 100%, rgba(32, 168, 121, 0.12), transparent 30rem),
|
| #f8f5ed !important;
|
| color: var(--wc-ink);
|
| }
|
|
|
| .gradio-container,
|
| .main,
|
| .wrap {
|
| max-width: none !important;
|
| padding: 0 !important;
|
| }
|
|
|
| .whistle-app,
|
| .whistle-app * {
|
| box-sizing: border-box;
|
| }
|
|
|
| .whistle-app {
|
| width: 100%;
|
| min-width: 1080px;
|
| min-height: 100vh;
|
| padding: 24px clamp(24px, 3vw, 48px) 18px;
|
| color: var(--wc-ink);
|
| font-family:
|
| Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system,
|
| BlinkMacSystemFont, sans-serif;
|
| }
|
|
|
| .app-header {
|
| width: min(1540px, 100%);
|
| margin: 0 auto 18px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 24px;
|
| }
|
|
|
| .brand-lockup {
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| }
|
|
|
| .brand-mark {
|
| width: 60px;
|
| height: 60px;
|
| display: grid;
|
| place-items: center;
|
| flex: 0 0 auto;
|
| border-radius: 20px;
|
| color: white;
|
| background: linear-gradient(145deg, var(--wc-red), #ff875d);
|
| box-shadow: 0 11px 26px rgba(240, 90, 79, 0.26);
|
| transform: rotate(-3deg);
|
| }
|
|
|
| .brand-mark svg {
|
| width: 40px;
|
| height: 40px;
|
| }
|
|
|
| .eyebrow,
|
| .step-label {
|
| margin: 0 0 3px;
|
| color: var(--wc-red);
|
| font-size: 0.7rem;
|
| font-weight: 850;
|
| letter-spacing: 0.13em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .app-header h1 {
|
| margin: 0;
|
| color: var(--wc-navy);
|
| font-size: clamp(1.9rem, 2.6vw, 2.75rem);
|
| font-weight: 900;
|
| letter-spacing: -0.045em;
|
| line-height: 1;
|
| }
|
|
|
| .subtitle {
|
| margin: 7px 0 0;
|
| color: var(--wc-muted);
|
| font-size: 0.98rem;
|
| font-weight: 650;
|
| }
|
|
|
| .controls {
|
| display: flex;
|
| align-items: center;
|
| gap: 9px;
|
| padding: 7px;
|
| border: 1px solid var(--wc-border);
|
| border-radius: 18px;
|
| background: rgba(255, 255, 255, 0.84);
|
| box-shadow: 0 8px 28px rgba(28, 49, 80, 0.06);
|
| backdrop-filter: blur(12px);
|
| }
|
|
|
| .control-button {
|
| min-height: 44px;
|
| padding: 0 17px;
|
| border: 0;
|
| border-radius: 12px;
|
| cursor: pointer;
|
| font: inherit;
|
| font-size: 0.88rem;
|
| font-weight: 850;
|
| transition:
|
| transform 150ms ease,
|
| box-shadow 150ms ease,
|
| opacity 150ms ease;
|
| }
|
|
|
| .control-button:hover:not(:disabled) {
|
| transform: translateY(-1px);
|
| }
|
|
|
| .control-button:focus-visible {
|
| outline: 3px solid rgba(28, 49, 80, 0.22);
|
| outline-offset: 2px;
|
| }
|
|
|
| .control-button:disabled {
|
| cursor: not-allowed;
|
| opacity: 0.45;
|
| }
|
|
|
| .control-button.primary {
|
| color: white;
|
| background: var(--wc-navy);
|
| box-shadow: 0 7px 16px rgba(28, 49, 80, 0.2);
|
| }
|
|
|
| .control-button.secondary {
|
| color: #9b342f;
|
| background: var(--wc-red-soft);
|
| }
|
|
|
| .control-button.ghost {
|
| color: var(--wc-navy);
|
| background: transparent;
|
| }
|
|
|
| .workspace {
|
| width: min(1540px, 100%);
|
| margin: 0 auto;
|
| }
|
|
|
| .garden-workspace {
|
| display: grid;
|
| grid-template-columns: minmax(720px, 1fr) minmax(320px, 0.35fr);
|
| gap: 18px;
|
| align-items: stretch;
|
| }
|
|
|
| .panel {
|
| min-width: 0;
|
| padding: 18px;
|
| border: 1px solid rgba(234, 223, 206, 0.96);
|
| border-radius: 27px;
|
| background: rgba(255, 255, 255, 0.92);
|
| box-shadow: var(--wc-shadow);
|
| }
|
|
|
| .game-panel {
|
| padding: 20px;
|
| }
|
|
|
| .side-stack {
|
| display: grid;
|
| gap: 18px;
|
| grid-template-rows: auto auto;
|
| align-content: start;
|
| }
|
|
|
| .panel-heading {
|
| min-height: 50px;
|
| margin-bottom: 13px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 12px;
|
| }
|
|
|
| .panel-heading.compact {
|
| min-height: auto;
|
| justify-content: flex-start;
|
| }
|
|
|
| .panel-heading h2 {
|
| margin: 0;
|
| color: var(--wc-navy);
|
| font-size: 1.22rem;
|
| font-weight: 900;
|
| letter-spacing: -0.025em;
|
| }
|
|
|
| .session-pill {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 7px;
|
| padding: 7px 10px;
|
| border-radius: 999px;
|
| color: var(--wc-muted);
|
| background: #f3f1ec;
|
| font-size: 0.73rem;
|
| font-weight: 850;
|
| }
|
|
|
| .session-dot {
|
| width: 8px;
|
| height: 8px;
|
| border-radius: 50%;
|
| background: #a6a39c;
|
| }
|
|
|
| .session-pill[data-state="loading"] {
|
| color: #876307;
|
| background: var(--wc-yellow-soft);
|
| }
|
|
|
| .session-pill[data-state="loading"] .session-dot {
|
| background: var(--wc-yellow);
|
| animation: wc-pulse 1s infinite;
|
| }
|
|
|
| .session-pill[data-state="live"] {
|
| color: #116d50;
|
| background: var(--wc-green-soft);
|
| }
|
|
|
| .session-pill[data-state="live"] .session-dot {
|
| background: var(--wc-green);
|
| box-shadow: 0 0 0 4px rgba(32, 168, 121, 0.15);
|
| }
|
|
|
| .session-pill[data-state="error"] {
|
| color: #9b342f;
|
| background: var(--wc-red-soft);
|
| }
|
|
|
| .session-pill[data-state="error"] .session-dot {
|
| background: var(--wc-red);
|
| }
|
|
|
| @keyframes wc-pulse {
|
| 50% {
|
| opacity: 0.35;
|
| }
|
| }
|
|
|
| .camera-stage {
|
| position: relative;
|
| aspect-ratio: 16 / 9;
|
| overflow: hidden;
|
| border: 5px solid var(--wc-red);
|
| border-radius: 25px;
|
| background:
|
| linear-gradient(180deg, rgba(23, 38, 59, 0.12), rgba(23, 38, 59, 0.42)),
|
| #182536;
|
| box-shadow: inset 0 -100px 90px rgba(5, 18, 20, 0.3);
|
| transition:
|
| border-color 180ms ease,
|
| box-shadow 180ms ease;
|
| }
|
|
|
| .camera-stage[data-feedback="yellow"] {
|
| border-color: var(--wc-yellow);
|
| box-shadow:
|
| 0 0 0 5px rgba(243, 181, 27, 0.13),
|
| inset 0 -100px 90px rgba(5, 18, 20, 0.25);
|
| }
|
|
|
| .camera-stage[data-feedback="green"] {
|
| border-color: var(--wc-green);
|
| box-shadow:
|
| 0 0 0 5px rgba(32, 168, 121, 0.14),
|
| inset 0 -100px 90px rgba(5, 18, 20, 0.18);
|
| }
|
|
|
| #camera-placeholder,
|
| #practice-video,
|
| #mouth-overlay,
|
| #garden-canvas {
|
| position: absolute;
|
| inset: 0;
|
| width: 100%;
|
| height: 100%;
|
| }
|
|
|
| #camera-placeholder {
|
| z-index: 1;
|
| display: grid;
|
| place-items: center;
|
| padding: clamp(22px, 4vw, 52px);
|
| overflow: hidden;
|
| }
|
|
|
| .start-screen {
|
| background:
|
| radial-gradient(circle at 28% 28%, rgba(98, 201, 232, 0.28), transparent 13rem),
|
| radial-gradient(circle at 77% 78%, rgba(32, 168, 121, 0.3), transparent 14rem),
|
| linear-gradient(135deg, #182536, #263a58 52%, #203143);
|
| color: white;
|
| }
|
|
|
| .start-orbit {
|
| position: absolute;
|
| inset: 16%;
|
| border: 1px dashed rgba(255, 255, 255, 0.24);
|
| border-radius: 999px;
|
| animation: wc-orbit 9s linear infinite;
|
| }
|
|
|
| .start-orbit span {
|
| position: absolute;
|
| width: 16px;
|
| height: 16px;
|
| border-radius: 50%;
|
| background: #98f1c5;
|
| box-shadow: 0 0 28px rgba(152, 241, 197, 0.8);
|
| }
|
|
|
| .start-orbit span:nth-child(1) {
|
| top: -8px;
|
| left: 48%;
|
| }
|
|
|
| .start-orbit span:nth-child(2) {
|
| right: 8%;
|
| bottom: 14%;
|
| background: #ffe27a;
|
| }
|
|
|
| .start-orbit span:nth-child(3) {
|
| left: 9%;
|
| bottom: 19%;
|
| background: #8ad7ff;
|
| }
|
|
|
| .start-copy {
|
| position: relative;
|
| z-index: 2;
|
| width: min(560px, 88%);
|
| padding: 28px 30px;
|
| border: 1px solid rgba(255, 255, 255, 0.28);
|
| border-radius: 26px;
|
| background: rgba(23, 38, 59, 0.66);
|
| box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
|
| text-align: center;
|
| backdrop-filter: blur(13px);
|
| }
|
|
|
| .start-kicker {
|
| margin: 0 0 8px;
|
| color: #98f1c5;
|
| font-size: 0.72rem;
|
| font-weight: 900;
|
| letter-spacing: 0.14em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .start-copy h3 {
|
| margin: 0;
|
| font-size: clamp(1.4rem, 3vw, 2.35rem);
|
| font-weight: 950;
|
| letter-spacing: -0.045em;
|
| line-height: 1.04;
|
| }
|
|
|
| .start-copy p:last-child {
|
| margin: 13px auto 0;
|
| max-width: 440px;
|
| color: rgba(255, 255, 255, 0.76);
|
| font-size: 0.84rem;
|
| font-weight: 650;
|
| line-height: 1.55;
|
| }
|
|
|
| @keyframes wc-orbit {
|
| to {
|
| transform: rotate(360deg);
|
| }
|
| }
|
|
|
| #practice-video {
|
| z-index: 2;
|
| display: none;
|
| object-fit: cover;
|
| transform: scaleX(-1);
|
| }
|
|
|
| #mouth-overlay {
|
| z-index: 4;
|
| pointer-events: none;
|
| }
|
|
|
| #garden-canvas {
|
| z-index: 3;
|
| pointer-events: none;
|
| }
|
|
|
| .permission-note {
|
| position: absolute;
|
| z-index: 7;
|
| left: 50%;
|
| bottom: 92px;
|
| width: min(88%, 430px);
|
| padding: 13px 16px;
|
| border: 1px solid rgba(255, 255, 255, 0.32);
|
| border-radius: 16px;
|
| color: white;
|
| background: rgba(23, 38, 59, 0.82);
|
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
| text-align: center;
|
| transform: translateX(-50%);
|
| backdrop-filter: blur(9px);
|
| }
|
|
|
| .permission-note strong,
|
| .permission-note span {
|
| display: block;
|
| }
|
|
|
| .permission-note strong {
|
| margin-bottom: 3px;
|
| font-size: 0.82rem;
|
| }
|
|
|
| .permission-note span {
|
| color: rgba(255, 255, 255, 0.78);
|
| font-size: 0.72rem;
|
| }
|
|
|
| .target-legend {
|
| position: absolute;
|
| z-index: 6;
|
| top: 13px;
|
| left: 13px;
|
| display: flex;
|
| align-items: center;
|
| gap: 7px;
|
| padding: 7px 10px;
|
| border-radius: 999px;
|
| color: white;
|
| background: rgba(23, 38, 59, 0.66);
|
| font-size: 0.68rem;
|
| font-weight: 800;
|
| backdrop-filter: blur(8px);
|
| }
|
|
|
| .legend-swatch {
|
| width: 18px;
|
| height: 9px;
|
| border: 2px dashed white;
|
| border-radius: 50%;
|
| }
|
|
|
| .garden-hud {
|
| position: absolute;
|
| z-index: 6;
|
| right: 14px;
|
| bottom: 14px;
|
| width: min(310px, calc(100% - 28px));
|
| padding: 13px;
|
| border: 1px solid rgba(255, 255, 255, 0.35);
|
| border-radius: 18px;
|
| color: white;
|
| background: rgba(23, 38, 59, 0.72);
|
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
| backdrop-filter: blur(10px);
|
| }
|
|
|
| .garden-hud > div:first-child,
|
| .garden-stats {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 12px;
|
| }
|
|
|
| .garden-hud-label,
|
| .garden-stats {
|
| color: rgba(255, 255, 255, 0.72);
|
| font-size: 0.69rem;
|
| font-weight: 750;
|
| }
|
|
|
| #garden-growth {
|
| color: #98f1c5;
|
| font-size: 1.25rem;
|
| font-weight: 950;
|
| }
|
|
|
| .garden-track {
|
| height: 8px;
|
| margin: 10px 0 9px;
|
| overflow: hidden;
|
| border-radius: 999px;
|
| background: rgba(255, 255, 255, 0.18);
|
| }
|
|
|
| #garden-growth-fill {
|
| display: block;
|
| width: 0;
|
| height: 100%;
|
| border-radius: inherit;
|
| background: linear-gradient(90deg, #7ee7a7, #ffe27a, #ff9d6e);
|
| transition: width 120ms linear;
|
| }
|
|
|
| .garden-stats strong {
|
| color: white;
|
| font-size: 0.82rem;
|
| }
|
|
|
| .camera-hint {
|
| margin: 13px 3px 0;
|
| color: var(--wc-muted);
|
| font-size: 0.78rem;
|
| line-height: 1.55;
|
| }
|
|
|
| .status-panel,
|
| .coach-panel {
|
| display: flex;
|
| flex-direction: column;
|
| }
|
|
|
| .coach-panel {
|
| order: -1;
|
| }
|
|
|
| .indicator-stack {
|
| display: grid;
|
| gap: 11px;
|
| }
|
|
|
| .indicator-card {
|
| --indicator: var(--wc-red);
|
| --indicator-soft: var(--wc-red-soft);
|
| padding: 14px;
|
| border: 1px solid color-mix(in srgb, var(--indicator) 24%, white);
|
| border-radius: 17px;
|
| background: var(--indicator-soft);
|
| transition:
|
| border-color 180ms ease,
|
| background 180ms ease;
|
| }
|
|
|
| .indicator-card[data-state="yellow"] {
|
| --indicator: var(--wc-yellow);
|
| --indicator-soft: var(--wc-yellow-soft);
|
| }
|
|
|
| .indicator-card[data-state="green"] {
|
| --indicator: var(--wc-green);
|
| --indicator-soft: var(--wc-green-soft);
|
| }
|
|
|
| .indicator-topline,
|
| .indicator-name {
|
| display: flex;
|
| align-items: center;
|
| }
|
|
|
| .indicator-topline {
|
| justify-content: space-between;
|
| gap: 10px;
|
| }
|
|
|
| .indicator-name {
|
| gap: 8px;
|
| color: var(--wc-navy);
|
| font-size: 0.81rem;
|
| font-weight: 850;
|
| }
|
|
|
| .status-light {
|
| width: 10px;
|
| height: 10px;
|
| border-radius: 50%;
|
| background: var(--indicator);
|
| box-shadow: 0 0 0 4px color-mix(in srgb, var(--indicator) 17%, transparent);
|
| }
|
|
|
| .indicator-score {
|
| color: var(--indicator);
|
| font-size: 1.12rem;
|
| font-weight: 950;
|
| }
|
|
|
| .indicator-score small {
|
| margin-left: 2px;
|
| color: var(--wc-muted);
|
| font-size: 0.6rem;
|
| font-weight: 750;
|
| }
|
|
|
| .score-track {
|
| height: 7px;
|
| margin: 12px 0 9px;
|
| overflow: hidden;
|
| border-radius: 99px;
|
| background: rgba(23, 38, 59, 0.09);
|
| }
|
|
|
| .score-fill {
|
| display: block;
|
| width: 0;
|
| height: 100%;
|
| border-radius: inherit;
|
| background: var(--indicator);
|
| transition: width 140ms linear;
|
| }
|
|
|
| .indicator-detail {
|
| min-height: 1.1em;
|
| margin: 0;
|
| color: var(--wc-muted);
|
| font-size: 0.68rem;
|
| font-weight: 650;
|
| }
|
|
|
| .signal-note {
|
| margin-top: 13px;
|
| padding: 13px 14px;
|
| border: 1px dashed #ded7ca;
|
| border-radius: 15px;
|
| background: #faf8f3;
|
| }
|
|
|
| .signal-note strong,
|
| .signal-note span {
|
| display: block;
|
| }
|
|
|
| .signal-note strong {
|
| margin-bottom: 3px;
|
| color: var(--wc-navy);
|
| font-size: 0.73rem;
|
| }
|
|
|
| .signal-note span {
|
| color: var(--wc-muted);
|
| font-size: 0.67rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .coach-card {
|
| position: relative;
|
| min-height: 150px;
|
| padding: 20px 18px;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 14px;
|
| overflow: hidden;
|
| border-radius: 21px;
|
| background:
|
| radial-gradient(circle at 85% 12%, rgba(243, 181, 27, 0.32), transparent 5rem),
|
| var(--wc-yellow-soft);
|
| text-align: center;
|
| transition: background 180ms ease;
|
| }
|
|
|
| .coach-card[data-state="red"] {
|
| background:
|
| radial-gradient(circle at 85% 12%, rgba(240, 90, 79, 0.2), transparent 5rem),
|
| var(--wc-red-soft);
|
| }
|
|
|
| .coach-card[data-state="green"] {
|
| background:
|
| radial-gradient(circle at 85% 12%, rgba(32, 168, 121, 0.2), transparent 5rem),
|
| var(--wc-green-soft);
|
| }
|
|
|
| .coach-face {
|
| position: relative;
|
| width: 60px;
|
| height: 54px;
|
| flex: 0 0 auto;
|
| border: 3px solid var(--wc-navy);
|
| border-radius: 48% 48% 44% 44%;
|
| background: #ffd970;
|
| box-shadow: 5px 6px 0 rgba(28, 49, 80, 0.11);
|
| transform: rotate(-2deg);
|
| }
|
|
|
| .coach-eye {
|
| position: absolute;
|
| top: 19px;
|
| width: 6px;
|
| height: 7px;
|
| border-radius: 50%;
|
| background: var(--wc-navy);
|
| }
|
|
|
| .coach-eye.left {
|
| left: 15px;
|
| }
|
|
|
| .coach-eye.right {
|
| right: 15px;
|
| }
|
|
|
| .coach-mouth {
|
| position: absolute;
|
| left: 50%;
|
| bottom: 10px;
|
| width: 10px;
|
| height: 8px;
|
| border: 3px solid var(--wc-navy);
|
| border-radius: 50%;
|
| transform: translateX(-50%);
|
| }
|
|
|
| #coach-message {
|
| max-width: 290px;
|
| margin: 0;
|
| color: var(--wc-navy);
|
| font-size: clamp(0.98rem, 1.25vw, 1.16rem);
|
| font-weight: 900;
|
| line-height: 1.35;
|
| letter-spacing: -0.02em;
|
| }
|
|
|
| .mini-guide {
|
| margin-top: 13px;
|
| padding: 15px;
|
| border: 1px solid var(--wc-border);
|
| border-radius: 18px;
|
| background: #fcfbf8;
|
| }
|
|
|
| .mini-guide-title {
|
| margin: 0 0 10px;
|
| color: var(--wc-navy);
|
| font-size: 0.74rem;
|
| font-weight: 900;
|
| text-transform: uppercase;
|
| letter-spacing: 0.08em;
|
| }
|
|
|
| .mini-guide ol {
|
| display: grid;
|
| gap: 9px;
|
| margin: 0;
|
| padding: 0;
|
| list-style: none;
|
| }
|
|
|
| .mini-guide li {
|
| display: flex;
|
| align-items: center;
|
| gap: 9px;
|
| color: var(--wc-muted);
|
| font-size: 0.73rem;
|
| font-weight: 650;
|
| }
|
|
|
| .mini-guide li span {
|
| width: 22px;
|
| height: 22px;
|
| display: grid;
|
| place-items: center;
|
| flex: 0 0 auto;
|
| border-radius: 8px;
|
| color: white;
|
| background: var(--wc-navy);
|
| font-size: 0.65rem;
|
| font-weight: 850;
|
| }
|
|
|
| .technical-status {
|
| margin: auto 3px 0;
|
| padding-top: 13px;
|
| color: var(--wc-muted);
|
| font-size: 0.65rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .app-footer {
|
| width: min(1540px, 100%);
|
| margin: 14px auto 0;
|
| color: #858a93;
|
| font-size: 0.68rem;
|
| text-align: center;
|
| }
|
|
|
| @media (max-width: 1220px) {
|
| .whistle-app {
|
| padding-inline: 20px;
|
| }
|
|
|
| .garden-workspace {
|
| grid-template-columns: minmax(650px, 1fr) 310px;
|
| }
|
| }
|
|
|
| @media (prefers-reduced-motion: reduce) {
|
| .whistle-app *,
|
| .whistle-app *::before,
|
| .whistle-app *::after {
|
| scroll-behavior: auto !important;
|
| animation-duration: 0.01ms !important;
|
| animation-iteration-count: 1 !important;
|
| transition-duration: 0.01ms !important;
|
| }
|
| }
|
|
|
|
|
| .whistle-app {
|
| min-width: 1180px;
|
| padding: 26px 34px 16px;
|
| background: rgba(255, 255, 255, 0.72);
|
| }
|
|
|
| .app-header {
|
| width: min(1500px, 100%);
|
| margin-bottom: 18px;
|
| }
|
|
|
| .brand-mark {
|
| border-radius: 16px;
|
| background: linear-gradient(145deg, #5147ff, #6b5cff);
|
| box-shadow: 0 14px 28px rgba(81, 71, 255, 0.22);
|
| transform: none;
|
| }
|
|
|
| .eyebrow {
|
| display: none;
|
| }
|
|
|
| .app-header h1 {
|
| color: #121328;
|
| font-size: clamp(2.2rem, 3vw, 3.3rem);
|
| }
|
|
|
| .subtitle {
|
| color: #4f46e5;
|
| font-size: 1.05rem;
|
| }
|
|
|
| .header-badges {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| }
|
|
|
| .tech-badge,
|
| .about-badge {
|
| min-height: 40px;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 8px;
|
| padding: 0 18px;
|
| border: 1px solid rgba(226, 232, 240, 0.9);
|
| border-radius: 999px;
|
| color: #25283b;
|
| background: rgba(255, 255, 255, 0.9);
|
| box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
|
| font-size: 0.78rem;
|
| font-weight: 850;
|
| }
|
|
|
| .about-badge::before {
|
| content: "i";
|
| width: 18px;
|
| height: 18px;
|
| display: grid;
|
| place-items: center;
|
| border: 2px solid currentColor;
|
| border-radius: 50%;
|
| font-size: 0.72rem;
|
| font-weight: 950;
|
| }
|
|
|
| .coach-workspace {
|
| display: grid;
|
| grid-template-columns: 280px minmax(980px, 1fr);
|
| gap: 18px;
|
| align-items: stretch;
|
| }
|
|
|
| .coach-sidebar,
|
| .signal-sidebar {
|
| min-width: 0;
|
| }
|
|
|
| .coach-sidebar {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 15px;
|
| padding: 18px;
|
| }
|
|
|
| .camera-card {
|
| min-width: 0;
|
| position: relative;
|
| }
|
|
|
| .camera-stage {
|
| border: 0;
|
| border-radius: 26px;
|
| background: #101827;
|
| box-shadow:
|
| 0 22px 64px rgba(15, 23, 42, 0.16),
|
| inset 0 -110px 90px rgba(5, 18, 20, 0.26);
|
| }
|
|
|
| .camera-stage[data-feedback="yellow"],
|
| .camera-stage[data-feedback="green"] {
|
| border-color: transparent;
|
| }
|
|
|
| #mouth-overlay {
|
| z-index: 5;
|
| }
|
|
|
| #garden-canvas {
|
| z-index: 4;
|
| }
|
|
|
| .live-pill {
|
| position: absolute;
|
| z-index: 8;
|
| top: 16px;
|
| left: 16px;
|
| color: white;
|
| background: rgba(15, 23, 42, 0.78);
|
| backdrop-filter: blur(12px);
|
| }
|
|
|
| .target-legend {
|
| top: auto;
|
| left: 18px;
|
| bottom: 18px;
|
| width: 210px;
|
| border-radius: 14px;
|
| background: rgba(15, 23, 42, 0.78);
|
| }
|
|
|
| .legend-swatch {
|
| border-color: #32eb84;
|
| }
|
|
|
| .garden-hud {
|
| right: 18px;
|
| bottom: 18px;
|
| width: 310px;
|
| border-radius: 20px;
|
| background: rgba(255, 255, 255, 0.83);
|
| color: #121328;
|
| }
|
|
|
| .garden-hud-label,
|
| .garden-stats {
|
| color: #5f6678;
|
| }
|
|
|
| #garden-growth-stage {
|
| color: var(--wc-green);
|
| }
|
|
|
| .camera-hint {
|
| position: absolute;
|
| z-index: 8;
|
| left: 50%;
|
| bottom: 14px;
|
| width: min(500px, 62%);
|
| margin: 0;
|
| padding: 10px 15px;
|
| border-radius: 12px;
|
| color: white;
|
| background: rgba(15, 23, 42, 0.76);
|
| text-align: center;
|
| transform: translateX(-50%);
|
| backdrop-filter: blur(10px);
|
| }
|
|
|
| .coach-card {
|
| min-height: 116px;
|
| padding: 16px;
|
| flex-direction: row;
|
| justify-content: flex-start;
|
| text-align: left;
|
| border: 1px solid rgba(34, 197, 94, 0.18);
|
| background: #eafff0;
|
| }
|
|
|
| .coach-card[data-state="red"] {
|
| background: #fff1ed;
|
| }
|
|
|
| .coach-card[data-state="green"] {
|
| background: #eafff0;
|
| }
|
|
|
| .coach-face {
|
| width: 42px;
|
| height: 40px;
|
| border-width: 2px;
|
| border-radius: 16px;
|
| background: #d8ffe4;
|
| box-shadow: none;
|
| }
|
|
|
| .coach-eye {
|
| top: 14px;
|
| }
|
|
|
| .coach-eye.left {
|
| left: 10px;
|
| }
|
|
|
| .coach-eye.right {
|
| right: 10px;
|
| }
|
|
|
| .coach-mouth {
|
| bottom: 7px;
|
| }
|
|
|
| #coach-message {
|
| font-size: 0.94rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .mini-guide {
|
| margin-top: 0;
|
| border-color: rgba(226, 232, 240, 0.9);
|
| background: rgba(255, 255, 255, 0.82);
|
| }
|
|
|
| .mini-guide li {
|
| padding: 8px 9px;
|
| border-radius: 11px;
|
| background: #f8fafc;
|
| }
|
|
|
| .mini-guide li span {
|
| background: #dffbea;
|
| color: #138a5a;
|
| }
|
|
|
| .progress-card {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| padding: 15px;
|
| border: 1px solid rgba(226, 232, 240, 0.9);
|
| border-radius: 18px;
|
| background: rgba(255, 255, 255, 0.82);
|
| }
|
|
|
| .progress-ring {
|
| width: 70px;
|
| height: 70px;
|
| display: grid;
|
| place-items: center;
|
| flex: 0 0 auto;
|
| border: 8px solid #e6e8ff;
|
| border-top-color: #5b50ff;
|
| border-radius: 50%;
|
| }
|
|
|
| .progress-ring strong {
|
| color: #4f46e5;
|
| font-size: 1rem;
|
| font-weight: 950;
|
| }
|
|
|
| .progress-card p:last-child {
|
| margin: 3px 0 0;
|
| color: var(--wc-muted);
|
| font-size: 0.73rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .melody-card,
|
| .state-card,
|
| .trace-card {
|
| padding: 15px;
|
| border: 1px solid rgba(226, 232, 240, 0.9);
|
| border-radius: 18px;
|
| background: rgba(255, 255, 255, 0.82);
|
| }
|
|
|
| .melody-card p:nth-child(2),
|
| .state-card code {
|
| margin: 3px 0 0;
|
| color: var(--wc-muted);
|
| font-size: 0.72rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .melody-download {
|
| display: inline-flex;
|
| margin-top: 10px;
|
| padding: 9px 12px;
|
| border-radius: 999px;
|
| color: white;
|
| background: linear-gradient(135deg, #554bff, #6b5cff);
|
| font-size: 0.75rem;
|
| font-weight: 900;
|
| text-decoration: none;
|
| }
|
|
|
| .state-card code {
|
| display: block;
|
| white-space: pre-wrap;
|
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
| }
|
|
|
| .trace-card ol {
|
| display: grid;
|
| gap: 9px;
|
| margin: 10px 0 0;
|
| padding: 0;
|
| list-style: none;
|
| }
|
|
|
| .trace-card li {
|
| display: grid;
|
| gap: 3px;
|
| padding: 10px 11px;
|
| border: 1px solid rgba(148, 163, 184, 0.2);
|
| border-radius: 14px;
|
| background: rgba(248, 250, 252, 0.86);
|
| }
|
|
|
| .trace-card strong {
|
| color: #334155;
|
| font-size: 0.72rem;
|
| font-weight: 950;
|
| text-transform: uppercase;
|
| }
|
|
|
| .trace-card span {
|
| color: var(--wc-muted);
|
| font-size: 0.72rem;
|
| line-height: 1.35;
|
| }
|
|
|
| .signal-sidebar {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| }
|
|
|
| .indicator-stack {
|
| gap: 14px;
|
| }
|
|
|
| .indicator-card {
|
| padding: 18px;
|
| border: 1px solid rgba(226, 232, 240, 0.86);
|
| border-radius: 22px;
|
| background: rgba(255, 255, 255, 0.78);
|
| box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
|
| backdrop-filter: blur(12px);
|
| }
|
|
|
| .indicator-name {
|
| font-size: 0.95rem;
|
| }
|
|
|
| .indicator-score {
|
| font-size: 1.5rem;
|
| }
|
|
|
| .score-track {
|
| height: 8px;
|
| margin: 14px 0 10px;
|
| background: linear-gradient(90deg, #2bd873, #ffe45e, #ff444a);
|
| }
|
|
|
| .score-fill {
|
| background: rgba(255, 255, 255, 0.82);
|
| box-shadow: -999px 0 0 999px var(--indicator);
|
| }
|
|
|
| .signal-note {
|
| margin-top: 0;
|
| background: rgba(255, 255, 255, 0.82);
|
| }
|
|
|
| .bottom-controls {
|
| width: min(1120px, 100%);
|
| margin: 20px auto 0;
|
| display: grid;
|
| grid-template-columns: 1fr 1fr 0.65fr;
|
| gap: 18px;
|
| padding: 0;
|
| border: 0;
|
| background: transparent;
|
| box-shadow: none;
|
| }
|
|
|
| .bottom-controls .control-button {
|
| min-height: 56px;
|
| border-radius: 17px;
|
| font-size: 1rem;
|
| }
|
|
|
| .bottom-controls .primary {
|
| background: linear-gradient(135deg, #554bff, #6b5cff);
|
| }
|
|
|
| .bottom-controls .secondary {
|
| color: white;
|
| background: linear-gradient(135deg, #ff4048, #ff3038);
|
| }
|
|
|
| .bottom-controls .ghost {
|
| color: #33384f;
|
| background: white;
|
| box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
|
| }
|
|
|
|
|
| .whistle-app {
|
| background:
|
| radial-gradient(circle at 50% 0%, rgba(107, 92, 255, 0.08), transparent 34rem),
|
| #fbfaf8;
|
| }
|
|
|
| .coach-workspace {
|
| grid-template-columns: 270px minmax(1040px, 1fr);
|
| }
|
|
|
| .camera-stage {
|
| border: 7px solid rgba(255, 255, 255, 0.92);
|
| border-radius: 30px;
|
| background: #111;
|
| box-shadow:
|
| 0 30px 72px rgba(21, 24, 40, 0.16),
|
| 0 0 0 1px rgba(20, 25, 38, 0.08);
|
| }
|
|
|
| .camera-stage[data-feedback="yellow"],
|
| .camera-stage[data-feedback="green"] {
|
| box-shadow:
|
| 0 30px 72px rgba(21, 24, 40, 0.16),
|
| 0 0 0 1px rgba(20, 25, 38, 0.08);
|
| }
|
|
|
| #practice-video {
|
| filter: grayscale(1) contrast(1.12) brightness(0.88);
|
| transform: scaleX(-1);
|
| }
|
|
|
| #mouth-overlay,
|
| #garden-canvas {
|
| mix-blend-mode: normal;
|
| }
|
|
|
| .target-legend {
|
| bottom: auto;
|
| top: 17px;
|
| left: auto;
|
| right: 18px;
|
| width: auto;
|
| min-width: 150px;
|
| justify-content: center;
|
| color: white;
|
| background: rgba(14, 18, 26, 0.72);
|
| }
|
|
|
| .garden-hud,
|
| .compact-signals,
|
| .state-card {
|
| display: none;
|
| }
|
|
|
| .camera-hint {
|
| bottom: 138px;
|
| width: min(520px, 58%);
|
| background: rgba(15, 17, 24, 0.72);
|
| }
|
|
|
| .live-pill {
|
| background: rgba(255, 255, 255, 0.86);
|
| color: #111827;
|
| }
|
|
|
| .live-pill .session-dot {
|
| background: #4ade80;
|
| }
|
|
|
| .action-sidebar {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 18px;
|
| }
|
|
|
| .action-stack {
|
| display: grid;
|
| gap: 18px;
|
| }
|
|
|
| .melody-action {
|
| min-height: 122px;
|
| display: grid;
|
| grid-template-columns: 62px 1fr;
|
| align-items: center;
|
| gap: 18px;
|
| padding: 22px;
|
| border: 1px solid rgba(226, 232, 240, 0.9);
|
| border-radius: 24px;
|
| color: #182039;
|
| background: rgba(255, 255, 255, 0.92);
|
| box-shadow: 0 18px 48px rgba(20, 24, 40, 0.08);
|
| text-align: left;
|
| text-decoration: none;
|
| font: inherit;
|
| }
|
|
|
| .melody-action strong {
|
| font-size: 1.05rem;
|
| font-weight: 900;
|
| }
|
|
|
| .melody-action small,
|
| .melody-action select {
|
| grid-column: 2;
|
| color: #71798b;
|
| font-size: 0.73rem;
|
| }
|
|
|
| .melody-action select {
|
| width: 100%;
|
| margin-top: 8px;
|
| padding: 8px 10px;
|
| border: 1px solid #e5e7eb;
|
| border-radius: 12px;
|
| background: #f8fafc;
|
| font-weight: 800;
|
| }
|
|
|
| .action-icon {
|
| width: 62px;
|
| height: 62px;
|
| display: grid;
|
| place-items: center;
|
| border-radius: 50%;
|
| font-size: 1.7rem;
|
| font-weight: 950;
|
| }
|
|
|
| .record-action .action-icon {
|
| color: #ff4052;
|
| background: #ffe4e8;
|
| box-shadow: inset 0 0 0 1px rgba(255, 64, 82, 0.25);
|
| }
|
|
|
| .style-action .action-icon {
|
| color: #9656ff;
|
| background: #efe5ff;
|
| }
|
|
|
| .generating-action .action-icon {
|
| color: #615dff;
|
| background: #e8e8ff;
|
| }
|
|
|
| .generating-action[data-active="true"] .action-icon {
|
| animation: wc-pulse 0.8s infinite;
|
| }
|
|
|
| .generating-action[data-active="done"] .action-icon,
|
| .play-action .action-icon {
|
| color: #20b970;
|
| background: #ddfaeb;
|
| }
|
|
|
| .download-action .action-icon {
|
| color: #228be6;
|
| background: #e1f1ff;
|
| }
|
|
|
| .melody-action:disabled,
|
| .download-action[aria-disabled="true"] {
|
| opacity: 0.58;
|
| cursor: not-allowed;
|
| }
|
|
|
| .download-action.ready {
|
| opacity: 1;
|
| }
|
|
|
| .signal-note {
|
| display: none;
|
| }
|
|
|
|
|
| .whistle-app {
|
| min-width: 0;
|
| font-family:
|
| "Avenir Next", Avenir, "DIN Alternate", "Arial Rounded MT Bold",
|
| "Helvetica Neue", Arial, system-ui, sans-serif;
|
| letter-spacing: 0.005em;
|
| }
|
|
|
| .app-header h1,
|
| .melody-action strong,
|
| .coach-card,
|
| .mini-guide,
|
| .control-button {
|
| letter-spacing: 0.01em;
|
| }
|
|
|
| @media (max-width: 980px) {
|
| body,
|
| .gradio-container {
|
| overflow-x: hidden !important;
|
| }
|
|
|
| .whistle-app {
|
| width: 100%;
|
| min-width: 0;
|
| padding: 12px;
|
| }
|
|
|
| .app-header {
|
| align-items: flex-start;
|
| flex-direction: column;
|
| gap: 12px;
|
| margin-bottom: 12px;
|
| }
|
|
|
| .brand-lockup {
|
| gap: 11px;
|
| }
|
|
|
| .brand-mark {
|
| width: 46px;
|
| height: 46px;
|
| border-radius: 15px;
|
| }
|
|
|
| .brand-mark svg {
|
| width: 31px;
|
| height: 31px;
|
| }
|
|
|
| .app-header h1 {
|
| font-size: 1.75rem;
|
| letter-spacing: -0.035em;
|
| }
|
|
|
| .subtitle {
|
| margin-top: 4px;
|
| font-size: 0.84rem;
|
| }
|
|
|
| .header-badges {
|
| width: 100%;
|
| justify-content: flex-start;
|
| gap: 8px;
|
| overflow-x: auto;
|
| padding-bottom: 2px;
|
| }
|
|
|
| .tech-badge,
|
| .about-badge {
|
| min-height: 34px;
|
| flex: 0 0 auto;
|
| padding: 0 12px;
|
| border-radius: 999px;
|
| font-size: 0.68rem;
|
| white-space: nowrap;
|
| }
|
|
|
| .coach-workspace {
|
| width: 100%;
|
| min-width: 0;
|
| display: grid;
|
| grid-template-columns: minmax(0, 1fr);
|
| gap: 12px;
|
| }
|
|
|
| .camera-card {
|
| order: 1;
|
| min-width: 0;
|
| }
|
|
|
| .coach-sidebar {
|
| order: 2;
|
| min-width: 0;
|
| padding: 12px;
|
| border-radius: 20px;
|
| }
|
|
|
| .action-sidebar {
|
| order: 3;
|
| min-width: 0;
|
| }
|
|
|
| .camera-stage {
|
| width: 100%;
|
| min-width: 0;
|
| aspect-ratio: 9 / 12.8;
|
| border-width: 4px;
|
| border-radius: 22px;
|
| }
|
|
|
| .live-pill,
|
| .target-legend {
|
| top: 10px;
|
| padding: 6px 9px;
|
| border-radius: 12px;
|
| font-size: 0.62rem;
|
| }
|
|
|
| .live-pill {
|
| left: 10px;
|
| }
|
|
|
| .target-legend {
|
| right: 10px;
|
| min-width: 0;
|
| }
|
|
|
| .camera-hint {
|
| bottom: 88px;
|
| width: min(86%, 410px);
|
| padding: 8px 10px;
|
| border-radius: 12px;
|
| font-size: 0.62rem;
|
| }
|
|
|
| .coach-card {
|
| min-height: 96px;
|
| padding: 16px;
|
| border-radius: 18px;
|
| }
|
|
|
| #coach-message {
|
| font-size: 0.84rem;
|
| }
|
|
|
| .mini-guide ol {
|
| grid-template-columns: 1fr 1fr;
|
| gap: 8px;
|
| }
|
|
|
| .progress-card,
|
| .melody-card {
|
| padding: 14px;
|
| border-radius: 18px;
|
| }
|
|
|
| .action-stack {
|
| display: grid;
|
| grid-template-columns: repeat(5, minmax(86px, 1fr));
|
| gap: 10px;
|
| overflow-x: auto;
|
| padding-bottom: 2px;
|
| }
|
|
|
| .melody-action {
|
| min-height: 88px;
|
| grid-template-columns: 1fr;
|
| justify-items: center;
|
| gap: 7px;
|
| padding: 12px 10px;
|
| border-radius: 18px;
|
| text-align: center;
|
| }
|
|
|
| .action-icon {
|
| width: 42px;
|
| height: 42px;
|
| font-size: 1.1rem;
|
| }
|
|
|
| .melody-action strong {
|
| font-size: 0.72rem;
|
| }
|
|
|
| .melody-action small,
|
| .melody-action select {
|
| grid-column: 1;
|
| margin-top: 0;
|
| font-size: 0.58rem;
|
| }
|
|
|
| .bottom-controls {
|
| position: sticky;
|
| bottom: 8px;
|
| z-index: 20;
|
| width: 100%;
|
| grid-template-columns: 1fr 1fr 0.85fr;
|
| gap: 8px;
|
| margin-top: 12px;
|
| padding: 0;
|
| }
|
|
|
| .bottom-controls .control-button {
|
| min-height: 44px;
|
| border-radius: 14px;
|
| font-size: 0.78rem;
|
| }
|
|
|
| .technical-status,
|
| .app-footer {
|
| display: none;
|
| }
|
| }
|
|
|
| @media (max-width: 560px) {
|
| .whistle-app {
|
| padding: 10px;
|
| }
|
|
|
| .camera-stage {
|
| aspect-ratio: 9 / 14;
|
| }
|
|
|
| .coach-face {
|
| display: none;
|
| }
|
|
|
| .coach-card {
|
| min-height: auto;
|
| }
|
|
|
| .mini-guide {
|
| display: none;
|
| }
|
|
|
| .action-stack {
|
| grid-template-columns: repeat(5, minmax(78px, 1fr));
|
| }
|
|
|
| .melody-action {
|
| min-height: 82px;
|
| padding: 10px 8px;
|
| }
|
| }
|
|
|
