.home{background:
 radial-gradient(ellipse at 9% 21rem,#ffc9ef91 0,transparent 33rem),
 radial-gradient(ellipse at 93% 12rem,#aee7ffad 0,transparent 38rem),
 linear-gradient(#c8c5fc 2rem,#e8dcff 37rem,#f9f4ff 66rem);
 color:#30186a}
.home header{background:#fcfaffeb;border-color:#ffffffac}
.home .top,.home main{width:min(1320px,calc(100% - 24px))}
.home .top{padding:.38rem 0;gap:.1rem .7rem}
.home .brand{gap:.32rem;font-size:1.05rem;letter-spacing:.025em;color:#37186e}
.home-logo{display:block}
.home .top nav{gap:.12rem}
.home .top nav a{padding:0 .54rem;border-radius:999px;color:#492a83}
.home .top nav [aria-current]{background:linear-gradient(#9065ff,#6c42e1);color:white}
.home .hero{isolation:isolate;padding:.8rem 0 1rem}
.home .hero::before,.home .hero::after{content:'★';color:#ffda72;position:absolute;z-index:-1;top:31%;font-size:clamp(1.3rem,4vw,3.5rem);line-height:1;-webkit-text-stroke:2px #fff3cb;filter:drop-shadow(0 3px 0 #e0a75950);transform:rotate(-15deg)}
.home .hero::before{left:1%}.home .hero::after{right:1%;transform:rotate(15deg)}
.home .hero .eyebrow{display:none}
.home .hero h1{font-size:clamp(1.87rem,6.7vw,4.1rem);font-weight:950;letter-spacing:-.045em;line-height:1.05;color:#462282;paint-order:stroke fill;-webkit-text-stroke:.12em white;text-shadow:0 .12em .09em #6746a66b;margin:.18rem 1.35rem .52rem}
.home .hero h1 em{color:#6b3bc8}
.home .hero p{font-weight:700;color:#442877;font-size:clamp(.85rem,2.8vw,1.15rem);padding:0 1.2rem}
.home .picker{isolation:isolate;display:grid;gap:.65rem;min-width:0;padding:0;background:none;border:0;box-shadow:none}
.home .picker>*{min-width:0}
.home .setup,.home .actions,.home .details-grid details{
 background:linear-gradient(155deg,#fffdfefa,#f6effffa);
 border:1px solid #fff;border-radius:20px;box-shadow:0 5px 12px #6641bc24;
}
.home .setup{padding:.55rem .65rem}
.home .setup legend{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.home .controls{gap:.35rem .6rem;align-items:center}
.home .segment{flex:1 1 100%;background:#eee5fc;border-radius:999px;padding:.23rem}
.home .segment button{flex:1;border-radius:999px;padding:.3rem .54rem;color:#3e246d;white-space:nowrap}
.home .segment [aria-pressed=true]{color:white;background:linear-gradient(165deg,#916aff,#693ee3);box-shadow:0 3px 8px #7e52ce4d,inset 0 2px 1px #ffffff54}
.home .number-stepper{display:grid;grid-template-columns:auto 44px minmax(48px,1fr) 44px;align-items:center;gap:.28rem;width:100%;font-weight:800}
.home .number-stepper button{padding:0;min-width:44px;border-radius:50%;background:#eee7fb;font-size:1.32rem;line-height:1}
.home #count{appearance:textfield;text-align:center;padding:.18rem .15rem;font-weight:900;font-size:1.2rem;border-radius:14px}
.home #count::-webkit-inner-spin-button,.home #count::-webkit-outer-spin-button{appearance:none}
.home .controls .compact{display:flex;align-items:center;gap:.28rem;max-width:none}
.home .controls .compact select{width:auto;padding:.3rem}
.home .switch{gap:.28rem;white-space:nowrap}
.home .switch input{width:30px;height:19px;appearance:none;background:#dcd1ee;border-radius:999px;position:relative;flex:none}
.home .switch input::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:white}
.home .switch input:checked{background:#7446ec;border-color:#7446ec}
.home .switch input:checked::after{left:13px}
.home .name-fields details>div>*{min-width:0}
.home .stage{margin:0;border:1px solid #ffffffbf;border-radius:25px;min-width:0;
 background:
  radial-gradient(ellipse at 50% 44%,#ffe1fb 0,#e0cdff77 55%,transparent 75%),
  repeating-linear-gradient(0deg,transparent 0 35px,#fff5 36px,transparent 38px 65px),
  linear-gradient(110deg,#d5c8fb,#cbb7f8 52%,#b5dfff);
 box-shadow:inset 0 0 20px #8460c545,0 6px 16px #7149be24}
.home .board{--board-height:242px;min-height:var(--board-height);padding:1.35rem 0}
.home .lane{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:.75rem 0 1rem}
.home .track{animation-delay:-2.1s}
.home .picker:not([data-phase]) .track,.home [data-phase=idle] .track{animation-name:none}
.home .card{
 width:clamp(90px,26vw,112px);height:auto;aspect-ratio:.63;margin:3px clamp(5px,.6vw,10px);
 border:4px solid #fff9;border-radius:clamp(15px,2vw,25px);transform:rotate(3deg);
 font-size:0;color:var(--accent);position:relative;
 background:radial-gradient(ellipse at 19% 0%,#fff9 0,transparent 45%),linear-gradient(148deg,var(--card),var(--shade));
 box-shadow:0 7px 0 var(--shade),0 12px 14px #6540a848,inset 0 0 0 2px #ffffff59;
}
.home .card:nth-child(3n+1){transform:rotate(-4deg)}
.home .card::before{content:'?';display:grid;place-items:center;width:72%;aspect-ratio:1;background:url('/assets/card-badge.svg') center/contain no-repeat;font-size:clamp(1.55rem,4vw,3rem);font-weight:950;text-shadow:0 1px 1px #fff;filter:drop-shadow(0 3px 1px #5b39962d)}
.home .card::after{content:'✦';position:absolute;top:.17rem;right:.39rem;font-size:1rem;color:#fff9}
.home button.card:hover:not(:disabled){background:linear-gradient(148deg,var(--card),var(--shade));border-color:white}
.home .card:disabled{opacity:1}
.home .lavender{--card:#d7beff;--shade:#a67be9;--accent:#673eb4}
.home .pink{--card:#ffc4e4;--shade:#f589bb;--accent:#a93372}
.home .peach{--card:#ffe9a5;--shade:#ffc369;--accent:#975314}
.home .mint{--card:#bbf8e4;--shade:#67d3b9;--accent:#127964}
.home .blue{--card:#beeaff;--shade:#7cc3ed;--accent:#226f9d}
.home [data-phase=revealed] .stage{background:radial-gradient(ellipse at center,#ffd194 0,#ffc8f7 24%,#d0baf7 59%,#c1d9ff 100%)}
.home .outcome{
 width:min(78%,185px);min-height:205px;max-height:calc(100% - 12px);place-content:center;
 border:4px solid #9e72f0;border-radius:24px;box-shadow:0 0 0 3px white,0 0 27px 9px #ffefa2a6,0 8px 24px #6532aa74;
 background:radial-gradient(circle at 4% 100%,#ffbce5 0,transparent 27%),radial-gradient(circle at 100% 100%,#f5bde9 0,transparent 32%),#fff8ea;
 padding:.55rem .6rem;pointer-events:auto;overflow:auto;color:#321665
}
.home .outcome span{color:#fff;letter-spacing:.09em;background:#6840c6;border-radius:999px;padding:.2rem .42rem;justify-self:center;margin-bottom:.4rem}
.home .outcome strong{font-size:1.42rem}
.home [data-label-size=short] strong{font-size:clamp(3.1rem,8vw,5rem);line-height:1}
.home .outcome[data-label-size=long]{width:min(86%,310px)}
.home .stage:has(.outcome[data-label-size=long]:not([hidden])) .board{min-height:max(252px,var(--board-height))}
.home [data-label-size=long] strong{font-size:1rem;line-height:1.22}
.home .outcome small{margin-top:.34rem}
.home .actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.45rem;padding:.53rem;text-align:center}
.home .actions button{min-height:50px;padding:.34rem .44rem;border-radius:999px;font-weight:850;color:#442281;background:#f8f1ff;border:1px solid #d7c2f7}
.home .actions .primary{font-size:1.1rem;color:white;background:linear-gradient(180deg,#8d61ed,#6233bc);border-color:#6b3acd;box-shadow:inset 0 2px #ffffff55,0 4px 7px #7038c543}
.home .actions .primary::before{content:'▶';margin-right:.42em;font-size:.8em}
.home [data-phase=running] .actions .primary::before{content:'Ⅱ'}
.home .actions .status{margin:0;padding:.3rem;color:#513586;align-self:center}
.home #result-export:not([hidden]) ~ .status{grid-column:1/-1}
.home .details-grid{margin:0;grid-template-columns:minmax(0,1fr)}
.home .details-grid summary{min-height:44px;align-content:center;padding:.3rem 0}
.home .details-grid details{padding:.15rem .65rem}
.home-history #history-count{border-radius:999px;background:#e8dcff;padding:.15em .42em;font-size:.82rem}
.home-history #history-empty{margin:.12rem 0 .6rem;font-size:.86rem;color:#634e88}
.home-history #history-list{list-style:none;margin:0 0 .52rem;padding:0;max-height:9rem;display:grid;gap:.35rem}
.home-history #history-list li{background:#eee5fa;border-radius:13px;padding:.25rem .5rem;line-height:1.22}
.home-history #history-list li:first-child{background:#ffefc4}
.home-history #history-list li p{font-weight:800;margin:.22rem 0;color:#3e246f}
.home-history #history-list li strong,.home-history #history-list small{font-size:.69rem;color:#665181}
.home .picker:fullscreen,.home .picker.expanded{padding:.75rem;align-content:start;background:linear-gradient(140deg,#e9d8ff,#d1e9ff)}
.home-tools{margin-top:2rem}
.home-tools h2{margin-bottom:.9rem}
@media(min-width:600px){
 .home .top,.home main{width:min(1340px,calc(100% - 44px))}
 .home .top nav a{padding:0 1rem}.home .hero{padding:.95rem 0 1.15rem}
 .home .setup{padding:.7rem .85rem}
 .home .controls{justify-content:center;gap:.5rem 1.15rem}
 .home .segment{flex:0 1 auto;min-width:245px}.home .number-stepper{width:235px}
 .home .card{width:clamp(112px,16vw,140px)}
 .home .board{--board-height:252px}
 .home .outcome{min-height:211px;width:min(78%,200px)}
 .home .actions{display:flex;justify-content:center;padding:.54rem;gap:.6rem}
 .home .actions button{min-width:105px;padding:.35rem .85rem}
 .home .actions .primary{min-width:155px}
}
@media(min-width:1000px){
 .home .hero{padding:.7rem 0 .9rem}
 .home .picker{grid-template-columns:minmax(0,1fr) minmax(185px,18%);gap:.8rem}
 .home .setup,.home .confirm,.home .notice{grid-column:1/-1}
 .home .segment{min-width:266px}
 .home .controls label,.home .segment button{font-size:.94rem}
 .home .controls :is(button,input:not([type=checkbox]),select){min-height:49px}
 .home .number-stepper{grid-template-columns:auto 49px minmax(48px,1fr) 49px}
 .home .switch input{width:34px;height:21px}
 .home .switch input::after{width:15px;height:15px}
 .home .switch input:checked::after{left:15px}
 .home .stage{grid-column:1;grid-row:2}
 .home .board{--board-height:clamp(340px,26vw,382px)}
 .home .card{width:clamp(145px,11.7vw,170px)}
 .home .outcome{min-height:290px;width:min(78%,226px)}
 .home .actions{grid-column:1}
 .home .actions button{min-height:54px;min-width:125px}
 .home .actions .primary{min-width:175px}
 .home .details-grid{display:contents}
 .home .details-grid .home-history{grid-column:2;grid-row:2}
 .home .details-grid details:last-child{grid-column:1/-1}
 .home-history #history-list{max-height:265px}
}
@media(max-width:350px){
 .home .top nav a{padding:0 .43rem}.home .controls{gap:.26rem .48rem}
 .home .controls .compact{gap:.15rem}.home .controls .compact select{max-width:85px}
 .home .switch input{width:26px}.home .switch input:checked::after{left:9px}
}
@media(orientation:landscape) and (max-height:500px){
 .home .hero{padding:.2rem 0 .5rem}.home .hero h1{font-size:2.1rem}
 .home .board,.home .picker:fullscreen .board,.home .picker.expanded .board{min-height:165px;padding:.35rem 0}
 .home .card{width:83px}.home .lane{padding:.45rem 0 .7rem}
 .home .outcome{min-height:130px;width:min(78%,160px)}.home [data-label-size=short] strong{font-size:2.65rem}
 .home .controls{column-gap:.6rem}.home .number-stepper{width:193px}
}