.start{--horizon:40svh;--sun-size:clamp(130px, 22svh, 210px);--sun-y:.5;min-height:100svh;position:relative}.start .sun{transition:top .7s var(--ease), left .9s var(--ease), width .9s var(--ease)}.start[data-step=length] .sun{pointer-events:auto;cursor:grab;touch-action:none}.start[data-step=length] .sun:active{cursor:grabbing}@keyframes hum{50%{scale:1.06}}.start.sounding .sun{animation:2.4s ease-in-out infinite hum}.start-nav{z-index:2;justify-content:space-between;align-items:center;padding:26px clamp(20px,5vw,72px);display:flex;position:relative}.start-main{z-index:1;width:min(100%,880px);min-height:calc(100svh - var(--horizon));margin:calc(var(--horizon) - 92px) auto 0;flex-direction:column;padding:28px clamp(20px,5vw,48px) 24px;display:flex;position:relative}@keyframes step-in{0%{opacity:0;transform:translateY(22px)}}.step{animation:step-in .55s var(--ease)}.step h1{letter-spacing:-.03em;text-wrap:balance;font-size:clamp(2.2rem,5.4vw,4rem);font-weight:800;line-height:.92}.step-hint{color:var(--text-3);margin-top:14px;font-size:.92rem}.step-hint a{color:var(--text)}.big-input{border:0;border-bottom:2.5px solid color-mix(in srgb, var(--text) 30%, transparent);width:100%;color:var(--text);caret-color:var(--sun);background:0 0;outline:0;margin-top:28px;padding:6px 0 12px;font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:600;transition:border-color .2s}.big-input::placeholder{color:color-mix(in srgb, var(--text) 32%, transparent)}.big-input:focus{border-color:var(--sun)}.start .swatches{margin-top:22px}.length-read{color:var(--text-2);margin-top:14px;font-size:1.2rem}.length-read strong{color:var(--text);font-variant-numeric:tabular-nums;margin-right:8px;font-size:clamp(3.2rem,8vw,4.8rem)}#start-length{width:100%;accent-color:var(--sun);margin:8px 0 14px}.presets{max-width:420px}.choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px;display:grid}.choices button{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--text) 7%, transparent);color:var(--text-2);text-align:left;cursor:pointer;transition:transform .2s var(--ease), border-color .15s;border:1.5px solid #0000;flex-direction:column;gap:4px;padding:11px 14px;font-size:.88rem;line-height:1.4;display:flex}.choices button:hover{transform:translateY(-3px)}.choices strong{color:var(--text);font-size:1rem}.choices span{font-size:.8rem}.choices button[aria-pressed=true]{border-color:var(--text)}.account-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;display:grid}.account-fields label{margin-bottom:8px}.account-fields .input{padding:14px}#start-message{margin-top:20px}#start-message.ok{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)}.start-foot{align-items:center;gap:20px;margin-top:auto;padding-top:24px;display:flex}.start-dots{gap:8px;margin-right:auto;display:flex}.start-dots i{background:color-mix(in srgb, var(--text) 22%, transparent);width:9px;height:9px;transition:background-color .3s, width .3s var(--ease);border-radius:50%}.start-dots i.on{background:var(--sun);border-radius:9px;width:28px}#start-back[hidden]+.start-dots{margin-left:0}@media (width<=760px){.start{--horizon:34svh}.start .swatches{grid-template-columns:repeat(4,minmax(0,1fr))}.start .swatch{height:36px}.choices,.account-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width<=420px){.account-fields{grid-template-columns:minmax(0,1fr)}}
