*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#f1f1f3;color:#34343b;font-family:Arial,sans-serif;letter-spacing:0}canvas{display:block;touch-action:none}#scene{position:fixed;inset:0}header{position:fixed;left:30px;right:30px;top:24px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.brand{font-size:44px;font-weight:800;font-style:italic;color:#d7297c}.brand span{display:block;font-size:10px;font-style:normal;color:#494650;margin-top:4px}.tools{display:flex;gap:7px}button{font:inherit;cursor:pointer;border:1px solid #d9d6df;border-radius:5px;background:#fffc;color:#34343b;touch-action:none;pointer-events:auto}button:hover{background:#fff}button:focus-visible{outline:3px solid #239caa;outline-offset:3px}.tools button,.rotation button{width:42px;height:42px;font-size:25px}.challenge{position:fixed;top:135px;left:30px;max-width:270px;pointer-events:none}small{font-size:10px;font-weight:bold;color:#ad2465}h1{font-size:25px;margin:8px 0 12px}#brief{font-size:12px;line-height:1.8;color:#5b5663}.wardrobe{position:fixed;right:30px;top:130px;bottom:35px;width:290px;padding:22px 0 0 22px;border-left:1px solid #d3ced8;display:flex;flex-direction:column}.heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:22px;margin:0}.heading span{color:#ae7a12;font-size:13px}.tabs{display:flex;margin:24px 0 20px;border-bottom:1px solid #d6d0db;gap:16px}.tabs button{padding:0 0 12px;border:0;border-radius:0;background:none;font-size:12px;color:#6b626e}.tabs button[aria-selected=true]{color:#c41d6b;border-bottom:2px solid #c41d6b}#options{display:grid;gap:10px}#options button{text-align:left;padding:14px 12px;display:flex;justify-content:space-between;font-size:13px;height:46px}#options button.selected{border:2px solid #c72b76;color:#b41e64;background:#fff6fb}.colors{display:flex;gap:10px;margin:22px 0}.colors button{width:30px;height:30px;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;border-radius:50%}.colors button.selected{outline:2px solid #333;outline-offset:3px}.primary{background:#cb2676;color:white;border:0;min-height:46px;padding:13px 20px;font-weight:bold;font-size:13px}.primary:hover{background:#ad1d62}#walk{margin-top:auto}.rotation{position:fixed;bottom:28px;left:calc((100% - 320px)/2);transform:translateX(-50%);display:flex;gap:8px}#result{position:fixed;inset:0;background:#f8f4f7ed;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}#result[hidden]{display:none}#result h2{font-size:32px;margin-top:16px}#rating{font-size:42px;color:#ca971e;margin:18px 0}#feedback{font-size:14px;max-width:340px;line-height:1.7}.result-actions{display:flex;gap:10px;margin-top:16px}.result-actions button{padding:14px}button:disabled{opacity:.5;cursor:default}@media(max-width:700px){header{top:14px;left:16px;right:16px}.brand{font-size:31px}.brand span{font-size:8px}.tools button{width:36px;height:36px}.challenge{left:16px;top:87px;max-width:180px}h1{font-size:19px;margin:5px 0}#brief{font-size:10px;line-height:1.5}.wardrobe{top:auto;bottom:0;right:0;left:0;width:100%;height:275px;background:#f8f6f9f5;padding:14px 16px;border-left:0;border-top:1px solid #d3ced8}.heading h2{font-size:16px}.tabs{margin:13px 0 10px;gap:24px}.tabs button{padding-bottom:8px}#options{display:flex;gap:6px}#options button{flex:1;min-width:0;height:42px;font-size:10px;padding:6px;justify-content:center;text-align:center}#options button span{display:none}.colors{margin:12px 0;gap:14px}.colors button{width:24px;height:24px}#walk{position:absolute;right:16px;bottom:17px;min-height:40px}#colors{max-width:190px}.rotation{left:auto;right:14px;bottom:290px;transform:none}.rotation button{width:33px;height:33px;font-size:20px}.result-actions{flex-direction:column}#result h2{font-size:28px}}@media(max-height:690px) and (min-width:701px){.wardrobe{top:95px;bottom:18px}.tabs{margin:15px 0}.colors{margin:15px 0}#options{gap:6px}.challenge{top:110px}}
