*{box-sizing:border-box}html{font-family:Arial,Helvetica,sans-serif;color:#202629;background:#fcfbff}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;padding:9px 12px;border-radius:3px}button:hover{background:#e8eaec}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #167cc0;outline-offset:3px}a{color:#24699b}header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;position:relative;z-index:5;background:#fcfbfff2}.brand{text-decoration:none;color:#354149;font-weight:800;font-size:23px;letter-spacing:-1px;white-space:nowrap}.brand span:last-child{font-size:13px;letter-spacing:0;font-weight:400}.brand-wheel{color:#2a99bf;font-size:28px;vertical-align:middle}nav{display:flex;align-items:center;gap:1px}nav button{padding:10px 9px}.raised,.primary{box-shadow:0 2px 3px #0003;background:white}.primary{background:#40555d;color:white}button.primary:hover{background:#283d46}.page-tools{display:flex;justify-content:flex-end;align-items:center;gap:9px;max-width:1120px;margin:0 auto;height:24px;font-size:11px;color:#69757e}.page-tools button{font-size:12px;padding:3px 7px}#spin-all{margin-right:auto;background:#40555d;color:white}.page-tools span{padding-right:16px}#wheels{max-width:1100px;margin:0 auto;display:grid;gap:26px}.wheel-card{display:grid;grid-template-columns:minmax(0,610px) 350px;gap:28px;justify-content:center;align-items:start;padding:0 16px;min-width:0}.wheel-side{padding:0 8px;min-width:0}.wheel-stage{position:relative;aspect-ratio:1;max-width:590px;margin:0 auto;border-radius:50%;filter:drop-shadow(0 10px 15px #0002)}canvas{width:100%;height:100%;border-radius:50%;display:block;border:1px solid #818b8e}.spin-target{position:absolute;inset:0;width:100%;border-radius:50%;padding:0;background:transparent!important}.spin-invitation{position:absolute;top:23%;left:0;width:100%;font-weight:700;font-size:clamp(22px,3.8vw,47px);color:white;text-shadow:0 2px 6px #000b;pointer-events:none}.hub{position:absolute;width:20%;height:20%;left:40%;top:40%;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#fff,#f6f5fa 60%,#d9dbe0);border:1px solid #bac0c6;overflow:hidden;pointer-events:none}.hub img{width:100%;height:100%;object-fit:cover}.pointer{position:absolute;right:-14px;top:calc(50% - 16px);width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:29px solid #dd3439;filter:drop-shadow(-2px 0 1px white)}.wheel-name{display:block;border:0;background:transparent;text-align:center;margin:8px auto 0;width:90%;font-size:13px;color:#65717c;height:25px}.editor{width:350px;padding-top:0}.tabs{display:flex;background:#fff8;margin-bottom:9px}.tabs button{flex:1;border-radius:0;font-size:23px;line-height:24px;border-bottom:2px solid transparent;padding:4px 8px}.tabs button.active{border-bottom-color:#40555d}.tabs .add-wheel{font-size:20px;white-space:nowrap}.mini-wheel{display:inline-block;width:21px;height:21px;border-radius:50%;vertical-align:middle;background:conic-gradient(#ea3137 0 14%,#ed8c20 14% 28%,#35aa47 28% 43%,#705291 43% 58%,#efe847 58% 72%,#fafafa 72% 86%,#4ea8d2 86%)}.entry-tools{display:flex;gap:5px;margin-bottom:8px}.entry-tools button{background:#e0e4e7;box-shadow:0 2px 3px #0002;padding:4px 12px;font-size:17px;min-height:30px}.entry-tools .image-button{font-size:14px}.entry-box{position:relative}.entry-text{width:100%;height:230px;resize:vertical;min-height:130px;max-height:480px;padding:9px 13px 30px;border:1px solid #58616a;border-radius:4px;background:#ffffff55;line-height:25px;font-size:16px;color:#30363c}.emoji-button{position:absolute;right:13px;bottom:12px;padding:3px;font-size:18px}.editor-bottom{display:flex;justify-content:space-between;font-size:11px;margin-top:4px;color:#637785}.badge{background:#5376a0;color:#fff;border-radius:12px;padding:4px 6px}.hint{font-style:italic}.results-panel{height:270px;overflow:auto;border:1px solid #bdc4ca;background:#fff9;padding:12px;border-radius:4px;font-size:14px}.result-row{padding:8px 0;border-bottom:1px solid #e3e6e8;display:flex;justify-content:space-between;gap:10px}.result-row small{color:#78828a}.weights-panel{max-height:260px;overflow:auto;background:white;border:1px solid #c5cbd0}.weight-row{display:flex;align-items:center;gap:8px;padding:5px 8px}.weight-row span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}.weight-row input{width:58px}.weight-row small{width:52px;text-align:right}.editor-note{font-size:11px;color:#7a8188;line-height:1.5;margin-top:20px}.multi#wheels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1400px}.multi .wheel-card{display:flex;flex-direction:column;align-items:center;gap:12px}.multi .wheel-side{width:100%}.multi .editor{max-width:100%}.multi .spin-invitation{font-size:clamp(20px,3vw,40px)}.hidden-editor .entry-content,.hidden-editor .entry-tools,.hidden-editor .editor-bottom,.hidden-editor .editor-note{display:none}#status{min-height:22px;text-align:center;font-size:13px;color:#607280;margin:17px 16px 35px}.guide{max-width:1020px;margin:60px auto 0;padding:35px 25px;border-top:1px solid #e0e3e6;line-height:1.65;font-size:16px}.guide h1{font-size:28px}.guide h2{font-size:24px;margin-top:40px}.guide h3{font-size:18px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}details{padding:15px 0;border-bottom:1px solid #e0e3e6}summary{cursor:pointer;font-weight:bold}footer{max-width:1070px;margin:50px auto 0;border-top:1px solid #ddd;padding:25px;display:flex;flex-wrap:wrap;gap:20px;font-size:13px}footer span{margin-left:auto;color:#7d858b}dialog{border:0;border-radius:4px;box-shadow:0 15px 50px #0004;padding:24px;width:min(700px,calc(100% - 28px));max-height:88vh;overflow:auto;background:white}dialog::backdrop{background:#0006}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.modal-head h2{font-size:20px;margin:0 0 20px}.modal-head button{font-size:25px;margin-top:-15px}.modal-tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:24px}.modal-tabs button{flex:1;border-bottom:2px solid transparent;border-radius:0}.modal-tabs button.active{border-color:#42565d}.setting-section h3{font-size:18px;border-bottom:3px solid #e0e1e3;padding-bottom:7px;margin:20px 0}.setting-section label{display:block;margin:15px 0}.setting-section input[type=range]{width:82%;vertical-align:middle}.setting-section select,.setting-section input[type=text],.field{display:block;padding:12px;background:#f5f5f5;border:0;border-bottom:1px solid #9da4a9;width:100%;margin:7px 0 12px}.setting-section input[type=checkbox]{margin-right:8px}.palette{display:flex;gap:8px;flex-wrap:wrap}.palette input{width:51px;height:42px;border:0;padding:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.actions button{box-shadow:0 2px 3px #0003;background:#fafafa}.actions button.primary{background:#40555d}.small{font-size:13px;color:#6a7780;line-height:1.5}.library-item{display:flex;align-items:center;gap:10px;border-bottom:1px solid #eee;padding:10px 0}.library-item button:first-child{flex:1;text-align:left}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.template-grid button{text-align:left;background:#f3f5f7;padding:18px}.template-grid small{display:block;margin-top:8px;color:#687782}#winner-dialog{padding:0;max-width:550px}.winner-head{padding:12px 20px;background:#40555d;color:white;display:flex;justify-content:space-between;align-items:center}.winner-head button{font-size:25px}#winner-content{padding:24px 30px;text-align:center}#winner-content h2{font-size:38px;overflow-wrap:anywhere}#winner-dialog .actions{padding:0 20px 20px}.celebrate{animation:celebrate .45s ease-out}@keyframes celebrate{from{transform:scale(.85)}to{transform:scale(1)}}#undo-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#34454e;color:white;padding:8px 15px;box-shadow:0 2px 10px #0004;z-index:20;white-space:nowrap}.skip{position:absolute;top:-60px;background:white;z-index:100;padding:15px}.skip:focus{top:0}[hidden]{display:none!important}.error{color:#b3272e}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1200px){#wheels{max-width:1080px}.wheel-card{grid-template-columns:610px 350px}.wheel-stage{max-width:590px}}@media(max-width:800px){header{height:auto;min-height:48px;flex-wrap:wrap;justify-content:center;padding:6px}.brand{margin-right:auto;font-size:20px}nav{width:100%;justify-content:space-between;margin-top:5px}nav button{font-size:13px;padding:8px 7px}.page-tools{margin:8px 10px;height:25px}.wheel-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 22px}.wheel-side{width:100%;max-width:550px}.wheel-stage{width:100%}.spin-invitation{font-size:clamp(25px,6.8vw,42px)}.editor{width:100%;max-width:440px}.entry-text{height:200px}.multi#wheels{grid-template-columns:1fr}.multi .wheel-stage{max-width:470px}.multi .spin-invitation{font-size:7vw}.guide{margin-top:30px}.guide-grid{grid-template-columns:1fr;gap:5px}.guide h1{font-size:25px}footer span{margin-left:0}.modal-tabs button{padding:10px 6px;font-size:13px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Full workspace layout, 20260930-spinwheelify1 */
:root{--accent:#df4b0b;--line:#e3e6ea;--surface:#f8fafc;--ink:#26303e}html{background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{height:56px;padding:0 24px;border-bottom:1px solid var(--line);background:#fff;gap:24px}.brand{font-size:24px;letter-spacing:-1px;font-weight:800}.brand span:last-child{font-size:inherit;letter-spacing:inherit;font-weight:inherit}nav{gap:28px}nav a{text-decoration:none;color:#697383;font-size:15px}.header-actions{display:flex;align-items:center;gap:12px}.raised{border:1px solid var(--line);box-shadow:0 1px 2px #0001;font-size:12px;font-weight:600;text-decoration:none;color:inherit}.page-tools{position:absolute;top:58px;left:15px;z-index:3;height:0;max-width:none}.page-tools #sound,.page-tools #storage-badge{display:none}#wheels{max-width:none;gap:0}.wheel-card{grid-template-columns:minmax(0,1fr) minmax(340px,32.4%);gap:0;padding:0;min-height:calc(100vh - 56px)}.wheel-side{padding:0 32px 24px;background:radial-gradient(ellipse at 50% 0,#fff0e9,transparent 65%);display:flex;flex-direction:column;align-items:center;justify-content:center}.wheel-top{width:100%;height:42px;display:flex;align-items:center;position:relative;flex-shrink:0;margin-bottom:5px}.wheel-top button{color:#718095;padding:7px}.wheel-name{text-align:left;margin:0 auto 0 0;width:65%;font-size:14px;color:#758293}.wheel-stage{width:min(100%,calc(100vh - 115px));max-width:760px;filter:drop-shadow(0 2px 2px #0002);margin:auto;flex-shrink:0}.pointer{right:auto;left:calc(50% - 16px);top:-18px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:34px solid #e74139;border-bottom:0;filter:drop-shadow(0 1px 1px #fff)}.hub{width:21.5%;height:21.5%;left:39.25%;top:39.25%;background:#f3f4f6;border:1px solid #e1e4e8}.spin-invitation{top:46.5%;left:40%;width:20%;z-index:2;color:#8b94a0;text-shadow:none;font-size:clamp(10px,1.15vw,16px);font-weight:500}.editor{width:100%;border-left:1px solid var(--line);background:#f8fafc;display:flex;flex-direction:column;min-height:calc(100vh - 56px);padding:0 10px 9px}.tabs{margin:0 -10px 5px;height:47px;display:flex;background:#f8fafc;border-bottom:1px solid var(--line);align-items:stretch}.tabs button{font-size:17px;padding:8px;flex:0 1 auto;color:#8994a3;line-height:1;white-space:nowrap}.tabs button:first-child,.tabs button:nth-child(2){font-size:12px;font-weight:700;flex:1}.tabs button.active{color:var(--accent);background:#fff3ed;border-color:var(--accent)}.entry-tools{gap:3px;margin-bottom:10px;display:flex}.entry-tools button{font-size:11px;flex:1;padding:5px 4px;box-shadow:0 1px 2px #0001;border:1px solid var(--line);background:transparent;min-height:28px;white-space:nowrap}.entry-tools button:hover{background:#ffede4}.entry-content{flex:1;display:flex;flex-direction:column;min-height:260px}.entry-box{flex:1;display:flex}.entry-text{flex:1;min-height:260px;height:100%;max-height:none;resize:none;border:1px solid var(--line);background:#f8fafc;border-radius:4px;font-size:14px;line-height:22px;padding:13px 12px 40px}.emoji-button{font-size:16px;color:#e17a75;background:#fff1f0;border:1px solid #f4d5d2;bottom:8px;right:8px}.editor-bottom{padding:5px 0;margin:0;height:22px;font-size:10px}.badge{background:transparent;color:#8391a1;padding:0}.hint{font-style:normal}.editor-note{display:none}.picker-row{padding:0;border-top:1px solid var(--line);border-bottom:0;margin:0 -10px}.picker-row summary{padding:14px 13px;font-size:11px;color:#708092;letter-spacing:.5px;font-weight:600}.style-swatches{display:flex;overflow:auto;gap:8px;padding:4px 10px 14px}.style-swatches button{font-size:10px;flex-shrink:0;padding:3px}.palette-preview{display:block;width:38px;height:38px;margin:0 auto 5px;border-radius:50%;box-shadow:0 0 0 1px #d8dde5}.preset-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 12px}.preset-chips button,.preset-chips a{padding:7px 9px;border:1px solid var(--line);background:white;border-radius:15px;font-size:11px;text-decoration:none;color:#546174}.editor-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.primary,button.primary:hover,.actions button.primary{background:var(--accent);color:white}.editor-foot button{font-size:12px}.results-panel{height:auto;flex:1;border-color:var(--line)}#status{margin:15px;font-size:12px}.guide{margin-top:35px}.modal-tabs button.active{border-color:var(--accent);color:var(--accent)}.winner-head{background:var(--accent)}dialog{border-radius:12px}.multi#wheels{max-width:none}.multi .wheel-card{border-bottom:1px solid var(--line);gap:0}.multi .wheel-side{padding-bottom:25px}.multi .editor{max-width:none;min-height:450px}.multi .wheel-stage{max-width:480px}.multi .spin-invitation{font-size:13px}.gallery{max-width:1000px;margin:auto;padding:45px 20px 60px}.gallery-hero{text-align:center}.gallery-hero h1{font-size:46px;line-height:1.15;letter-spacing:-1px;margin:12px 0 24px}.gallery-hero p{font-size:16px;line-height:1.65;color:#8993a1}.gallery-hero input{width:min(100%,570px);padding:16px 20px;border:1px solid #e0e4e9;border-radius:13px;margin:18px 0 30px;background:#f8fafc;box-shadow:0 1px 2px #0001}.category-tabs{display:flex;justify-content:space-around;border:1px solid var(--line);border-radius:30px;padding:4px;box-shadow:0 4px 8px #0001;background:#f8fafc;gap:3px}.category-tabs button{text-transform:uppercase;font-size:10px;font-weight:bold;letter-spacing:.5px;border-radius:24px;padding:12px}.category-tabs button.active{background:#26303e;color:#fff}.template-section h2{display:flex;justify-content:space-between;font-size:28px;font-style:italic;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:15px;margin:40px 0 24px}.template-section h2 span{color:#dce1e8}.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.template-card{display:grid;grid-template-columns:30% 70%;border:1px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;min-height:148px;background:#f9fafb;transition:transform .15s,box-shadow .15s}.template-card:hover{transform:translateY(-3px);box-shadow:0 5px 16px #0001}.card-preview{background:#eef2f5;display:grid;place-items:center;border-right:1px solid var(--line)}.preview-wheel{width:83px;height:83px;border-radius:50%;background:conic-gradient(#e8403b 0 17%,#f3a123 17% 34%,#40b478 34% 51%,#3e88e5 51% 68%,#9766d3 68% 85%,#e7619b 85%);box-shadow:0 2px 5px #0002;position:relative}.preview-wheel:after{content:'';position:absolute;inset:35%;background:#fff;border-radius:50%}.template-card>div:last-child{padding:23px}.template-card small{font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:#4b9a6d}.template-card h3{font-size:20px;margin:10px 0}.template-card p{font-size:12px;color:#929aa8;line-height:1.7;margin:0}.dark{filter:invert(.9) hue-rotate(180deg)}.dark canvas,.dark .brand,.dark .palette-preview{filter:invert(1) hue-rotate(180deg)}@media(min-width:1200px){.wheel-card{grid-template-columns:minmax(0,1fr) minmax(365px,32.4%)}#wheels{max-width:none}.wheel-stage{max-width:760px}}@media(max-width:800px){header{padding:10px 14px;height:auto;gap:12px;justify-content:space-between}.brand{font-size:23px;margin:0}.header-actions{margin-left:auto}nav{order:3;width:100%;justify-content:center;gap:25px;margin:0;padding:4px}nav a{font-size:13px}.wheel-card{display:flex;padding:0;gap:0;min-height:0}.wheel-side{padding:0 24px 25px;width:100%;max-width:none}.wheel-top{height:35px}.wheel-stage{width:100%;max-width:520px}.editor{min-height:430px;max-width:none;padding:0 10px 10px}.spin-invitation{font-size:12px}.entry-text{min-height:220px}.entry-content{min-height:220px}.tabs button:first-child,.tabs button:nth-child(2){font-size:13px}.entry-tools button{font-size:12px}.gallery{padding-top:28px}.gallery-hero h1{font-size:32px}.gallery-hero p{font-size:14px}.category-tabs{flex-wrap:wrap;justify-content:center;border-radius:18px}.category-tabs button{padding:9px;font-size:9px}.catalog-grid{grid-template-columns:1fr}.template-section h2{font-size:22px}.template-card h3{font-size:19px}.multi .spin-invitation{font-size:12px}}