:root{--ink: #171717;--muted: #69645d;--line: #ded8cf;--panel: rgba(255, 252, 247, .86);--panel-strong: #fffaf2;--field: #f2ece2;--accent: #16b6a5;--accent-2: #f27a2c;--clay: #b96d3e;--shadow: 0 22px 60px rgba(58, 43, 24, .12);color:var(--ink);background:#e9e1d4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(90deg,rgba(23,23,23,.035) 1px,transparent 1px),linear-gradient(180deg,rgba(23,23,23,.035) 1px,transparent 1px),radial-gradient(circle at 82% 8%,rgba(242,122,44,.16),transparent 24rem),linear-gradient(135deg,#f7f1e7,#ebe2d5 46%,#ded5c8);background-size:42px 42px,42px 42px,auto,auto}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,58px);letter-spacing:0;line-height:.95;margin-bottom:0}h2{font-size:19px;letter-spacing:0;line-height:1.1;margin-bottom:0}h3{font-size:12px;letter-spacing:.04em;margin-bottom:10px;text-transform:uppercase}.app-shell{min-height:100vh;overflow-x:hidden;padding:16px}.topbar{align-items:center;background:#171717f0;border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 18px 42px #1717173d;color:#fffaf2;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(360px,1.8fr) minmax(0,1fr);padding:10px;position:sticky;top:12px;z-index:10}.brand-block{align-items:center;display:flex;gap:12px;min-width:0;padding-left:2px}.brand-mark{align-items:center;background:#fffaf2;border-radius:7px;color:#171717;display:inline-flex;font-size:12px;font-weight:900;height:38px;justify-content:center;width:38px}.brand-block strong{display:block;font-size:14px;letter-spacing:.01em;line-height:1.2}.brand-block span{color:#fffaf29e;display:block;font-size:12px;margin-top:2px}.nav-tabs{align-items:center;background:#fffaf214;border:1px solid rgba(255,250,242,.09);border-radius:7px;display:flex;gap:3px;justify-content:center;min-width:0;padding:3px}.nav-tabs button,.segmented button{background:transparent;border:0;border-radius:6px;color:inherit;font-size:12px;font-weight:760;min-height:34px;padding:0 12px}.nav-tabs button{color:#fffaf29e}.nav-tabs button.is-active{background:#fffaf2;color:#171717}.topbar__status{align-items:flex-end;display:flex;flex-direction:column;gap:5px;justify-self:end;white-space:nowrap}.topbar__status span{color:var(--accent);font-size:11px;font-weight:860;text-transform:uppercase}.topbar__status strong{color:#fffaf2b8;font-size:12px}.language-toggle{align-items:center;background:#fffaf214;border:1px solid rgba(255,250,242,.12);border-radius:7px;display:inline-flex;gap:2px;padding:2px}.language-toggle button{background:transparent;border:0;border-radius:5px;color:#fffaf2a8;font-size:11px;font-weight:820;min-height:26px;padding:0 9px}.language-toggle button.is-selected{background:#fffaf2;color:#171717}.studio-layout{display:grid;gap:14px;grid-template-columns:minmax(288px,330px) minmax(460px,1fr) minmax(282px,318px);margin:14px auto 0;max-width:1580px;min-width:0;width:100%}.panel,.canvas-stage,.placeholder-page{background:var(--panel);border:1px solid rgba(23,23,23,.1);border-radius:8px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);min-width:0}.panel{padding:16px}.configurator{max-height:calc(100vh - 98px);overflow:auto;scrollbar-color:#b9afa2 transparent}.panel__header{border-bottom:1px solid rgba(23,23,23,.1);margin-bottom:14px;padding-bottom:14px}.eyebrow{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.08em;margin:0 0 7px;text-transform:uppercase}.control-group{border-bottom:1px solid rgba(23,23,23,.08);display:grid;gap:10px;grid-template-columns:1fr 1fr;padding:14px 0}.control-group h3{color:#302d29;grid-column:1 / -1}.field{color:var(--muted);display:grid;gap:7px;font-size:11px;font-weight:820}.field--full{grid-column:1 / -1}.field input[type=color]{background:#fffaf2;border:1px solid rgba(23,23,23,.18);border-radius:6px;height:36px;padding:4px;width:100%}.field input[type=range]{accent-color:var(--ink);width:100%}.segmented{background:#1717170e;border:1px solid rgba(23,23,23,.08);border-radius:7px;display:grid;gap:3px;grid-auto-columns:1fr;grid-auto-flow:column;padding:3px}.segmented button{color:#514c45;min-width:0;padding:0 8px}.segmented button.is-selected{background:#171717;color:#fffaf2}.primary-action{background:#171717;border:0;border-radius:7px;color:#fffaf2;font-size:12px;font-weight:900;margin-top:14px;min-height:42px;width:100%}.canvas-stage{display:grid;grid-template-rows:auto minmax(480px,1fr) auto auto;min-height:calc(100vh - 98px);overflow:hidden;padding:18px;position:relative}.canvas-stage:before{background:linear-gradient(90deg,rgba(23,23,23,.04) 1px,transparent 1px),linear-gradient(180deg,rgba(23,23,23,.04) 1px,transparent 1px);background-size:34px 34px;content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}.canvas-stage--studio{background:linear-gradient(150deg,#fffaf2f5,#ebe4d9eb)}.canvas-stage--court{background:linear-gradient(155deg,#f8f1e6,#e8f3e8 58%,#d8e5df)}.canvas-stage--match{background:linear-gradient(155deg,#fff4e5,#eadac9 52%,#d9e5e0)}.canvas-stage__topline{align-items:flex-start;display:flex;gap:18px;justify-content:space-between;position:relative;z-index:1}.stage-status{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:330px}.stage-status span,.challenge-strip span,.card-stats span{background:#17171714;border:1px solid rgba(23,23,23,.08);border-radius:999px;color:#302d29;font-size:11px;font-weight:860;padding:7px 10px;text-transform:capitalize}.preview-surface{align-items:center;display:flex;justify-content:center;min-height:440px;min-width:0;perspective:900px;position:relative;z-index:1}.scene-note{color:var(--muted);font-size:12px;margin:12px 0 0;position:relative;z-index:1}.cover-preview{align-items:center;border-top:1px solid rgba(23,23,23,.1);display:flex;gap:18px;justify-content:space-between;padding-top:14px;position:relative;z-index:1}.cover-preview span{color:var(--muted);display:block;font-size:11px;font-weight:820}.cover-preview strong{display:block;font-size:15px;text-transform:capitalize}.cover-strip{border:1px solid rgba(23,23,23,.12);border-radius:7px;display:flex;height:40px;overflow:hidden;width:168px}.cover-strip span{flex:1}.cover-strip--retro{transform:skew(-8deg)}.racket-canvas{border-radius:8px;max-width:100%;outline:none;overflow:hidden;position:relative;width:100%}.racket-canvas--stage{height:min(62vh,660px);min-height:480px}.racket-canvas--compact{background:transparent;height:100%;min-height:0}.racket-canvas canvas{display:block;height:100%;width:100%}.racket-canvas--studio{background:radial-gradient(circle at 50% 44%,#fffaf2eb,#f7f0e6d1 34%,#dad0c2e0)}.racket-canvas--court{background:linear-gradient(180deg,#e8f3e8,#dcebdc 58%,#cbded4)}.racket-canvas--match{background:radial-gradient(circle at 68% 18%,rgba(242,122,44,.32),transparent 18rem),linear-gradient(180deg,#fff4e5,#e8ded0 55%,#d8e5df)}.webgl-fallback{align-items:center;background:#f8faf2eb;color:var(--muted);display:flex;font-size:14px;height:100%;top:0;right:0;bottom:0;left:0;justify-content:center;padding:24px;position:absolute;text-align:center;z-index:2}.metric-list{display:grid;gap:14px}.metric__row{align-items:baseline;display:flex;gap:12px;justify-content:space-between}.metric__row span{color:#4f4941;font-size:12px;font-weight:820}.metric__row strong{font-size:24px}.metric__track{background:#17171714;border-radius:999px;height:8px;margin-top:8px;overflow:hidden}.metric__track span{background:linear-gradient(90deg,#171717,var(--accent),var(--accent-2));display:block;height:100%}.recommendation-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:18px}.recommendation-grid div,.comparison-card{background:#fffaf294;border:1px solid rgba(23,23,23,.09);border-radius:7px;padding:12px}.recommendation-grid span,.comparison-card span{color:var(--muted);display:block;font-size:10px;font-weight:900;margin-bottom:5px;text-transform:uppercase}.recommendation-grid strong,.comparison-card strong{display:block;font-size:14px}.comparison-card{margin-top:10px}.comparison-card p{color:var(--muted);font-size:12px;line-height:1.5;margin:8px 0 0}.performance-panel__save{margin-top:14px}.mini-racket{filter:drop-shadow(0 28px 28px rgba(58,43,24,.18));height:100%;width:100%}.mini-racket--compact{transform-origin:center}.placeholder-page,.playtest-page,.gallery-page,.my-designs-page{margin:14px auto 0;max-width:1320px}.placeholder-page{min-height:540px;padding:40px}.placeholder-page p:last-child{color:var(--muted);margin-bottom:0}.playtest-page,.gallery-page,.my-designs-page{display:grid;gap:14px}.playtest-hero{display:grid;gap:18px;grid-template-columns:minmax(280px,.8fr) minmax(480px,1.2fr);min-height:560px}.playtest-copy{align-self:center}.playtest-copy p:not(.eyebrow),.gallery-hero p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.7;max-width:560px}.playtest-button{max-width:180px}.playtest-court{align-items:center;background:linear-gradient(90deg,rgba(255,255,255,.65) 0 2px,transparent 2px 100%),linear-gradient(180deg,#e8f3e8,#d8e5df);background-size:120px 100%,100% 100%;border:1px solid rgba(23,23,23,.12);border-radius:8px;display:grid;min-height:460px;overflow:hidden;position:relative}.playtest-racket{height:280px;left:24px;position:absolute;top:82px;width:190px;z-index:2}.playtest-racket .mini-racket{height:100%;width:100%}.playtest-court--active .playtest-racket{animation:swing .76s ease-out}.trajectory{height:72%;justify-self:center;overflow:visible;pointer-events:none;width:88%}.trajectory path{animation:drawPath .9s ease-out both;fill:none;stroke:#171717;stroke-dasharray:8 10;stroke-linecap:round;stroke-width:4}.ball-dot{animation:ball-reveal .9s ease-out both;fill:var(--accent-2);filter:drop-shadow(0 8px 10px rgba(242,122,44,.35))}.landing-zone{animation:landing-zone-reveal .26s .7s ease-out both;fill:#16b6a52e;stroke:#16b6a58c;stroke-width:2;transform-box:fill-box;transform-origin:center}.playtest-status{background:#fffaf2db;border:1px solid rgba(23,23,23,.12);border-radius:999px;color:#302d29;font-size:11px;font-weight:820;line-height:1.35;margin:0;max-width:min(300px,calc(100% - 48px));padding:9px 12px;position:absolute;right:24px;text-align:center;top:24px;z-index:3}.sweet-spot{background:#fffaf2c2;border:1px solid rgba(22,182,165,.4);border-radius:999px;bottom:34px;color:#0f766e;font-size:11px;font-weight:900;left:34px;min-width:118px;padding:8px 12px;position:absolute;text-align:center;text-transform:uppercase}.feedback-grid{display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}.feedback-card,.design-card,.saved-row,.empty-state{background:var(--panel);border:1px solid rgba(23,23,23,.1);border-radius:8px;box-shadow:var(--shadow)}.feedback-card{padding:18px}.feedback-card span{color:var(--muted);display:block;font-size:12px;font-weight:900;margin-bottom:10px}.feedback-card strong{display:block;font-size:22px;line-height:1.1}.gallery-hero,.ranking-bar{align-items:center;display:flex;gap:18px;justify-content:space-between}.challenge-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.ranking-bar span{color:var(--muted);display:block;font-size:12px;font-weight:900;margin-bottom:5px}.ranking-toggle{min-width:220px}.gallery-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.design-card{overflow:hidden}.design-card__preview{align-items:center;background:linear-gradient(180deg,#fffaf2f5,#e8e0d3e6);display:flex;height:250px;justify-content:center;overflow:hidden}.design-card__preview .mini-racket{height:100%;width:100%}.design-card__body{padding:18px}.design-card__body>span,.saved-row__copy p{color:var(--muted);font-size:12px;font-weight:900}.design-card__body h2,.saved-row__copy h2{font-size:20px;margin:8px 0}.design-card__body p{color:var(--muted);font-size:13px;line-height:1.5}.card-stats{display:flex;gap:8px;margin:14px 0}.design-card button,.saved-row__actions button{background:#171717;border:0;border-radius:7px;color:#fffaf2;font-size:12px;font-weight:900;min-height:36px;padding:0 12px}.saved-list{display:grid;gap:12px}.saved-row{align-items:center;display:grid;gap:16px;grid-template-columns:120px 1fr auto;min-height:132px;overflow:hidden;padding:14px}.saved-row__preview{align-items:center;background:#fffaf294;border-radius:7px;display:flex;height:104px;justify-content:center;overflow:hidden}.saved-row__preview .mini-racket{height:104px;width:100%}.saved-row__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.saved-row__actions button:not(:first-child){background:#17171714;color:#171717}.empty-state{padding:36px;text-align:center}.empty-state p{color:var(--muted);margin-bottom:0}@keyframes swing{0%{transform:rotate(-20deg) translate(-40px)}60%{transform:rotate(14deg) translate(20px)}to{transform:rotate(0) translate(0)}}@keyframes drawPath{0%{stroke-dashoffset:180;opacity:.35}to{stroke-dashoffset:0;opacity:1}}@keyframes ball-reveal{0%,12%{opacity:0}24%,to{opacity:1}}@keyframes landing-zone-reveal{0%{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}@media(max-width:1180px){.topbar{grid-template-columns:1fr}.topbar__status{align-items:flex-start;justify-self:start}.nav-tabs{justify-content:flex-start;overflow-x:auto}.studio-layout{grid-template-columns:minmax(0,1fr);max-width:100%}.configurator,.canvas-stage{max-height:none;min-height:auto}}@media(max-width:980px){.playtest-hero,.feedback-grid,.gallery-grid{grid-template-columns:1fr}.playtest-court{min-height:360px}.gallery-hero,.ranking-bar{align-items:flex-start;flex-direction:column}.saved-row{grid-template-columns:96px 1fr}.saved-row__actions{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:640px){.app-shell{padding:10px}.topbar{position:static}.brand-block,.nav-tabs,.topbar__status{min-width:0;width:100%}.nav-tabs{max-width:100%}.control-group,.recommendation-grid{grid-template-columns:1fr}.canvas-stage{grid-template-rows:auto minmax(340px,auto) auto auto;padding:14px}.canvas-stage__topline{flex-direction:column}.preview-surface{min-height:340px}.cover-preview{align-items:flex-start;flex-direction:column}.nav-tabs button{flex:0 0 auto}.racket-canvas--stage{height:360px;min-height:320px}}