:root{color-scheme:light;--paper:#f5f1e9;--paper-deep:#ebe4d8;--ink:#17211d;--ink-soft:#59625e;--line:#d8d1c6;--white:#fffefa;--blue:#1e5fa8;--blue-soft:#e8f1fb;--red:#c33c34;--red-soft:#fbecea;--orange:#c56318;--orange-soft:#fff0df;--green:#27704d;--green-soft:#e6f3eb;--shadow:0 12px 32px #241f1814, 0 2px 6px #241f180d;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth;min-width:320px}body{min-width:320px;min-height:100vh;color:var(--ink);background:linear-gradient(#17211d05 1px, transparent 1px), var(--paper);text-rendering:optimizelegibility;background-size:100% 32px;margin:0;font-size:1rem;line-height:1.5}button{font:inherit}button:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible{outline-offset:4px;outline:3px solid #0b72ce}button:disabled{cursor:not-allowed}[hidden]{display:none!important}main{width:min(100% - 32px,900px);margin-inline:auto;padding:48px 0 72px}.intro{max-width:760px;margin-bottom:44px;position:relative}.intro-badge{border:1px solid var(--line);color:var(--ink-soft);letter-spacing:.02em;background:#fffefaa6;border-radius:999px;align-items:center;gap:8px;margin-bottom:28px;padding:7px 11px 7px 9px;font-size:.77rem;font-weight:700;display:inline-flex}.intro-badge svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:18px}.eyebrow,.step-label,.card-kicker,.result-kicker{color:var(--ink-soft);letter-spacing:.13em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.065em;margin-bottom:20px;font-size:clamp(2.8rem,11vw,5.7rem);font-weight:790;line-height:.93}h1 span{color:var(--blue);display:inline-block;position:relative}h1 span:after{background:var(--blue);content:"";border-radius:999px;height:.08em;position:absolute;bottom:-.11em;left:.02em;right:.02em;transform:rotate(-1.2deg)}.intro-copy{max-width:630px;color:var(--ink-soft);margin-bottom:28px;font-size:clamp(1.04rem,3vw,1.2rem);line-height:1.65}.quick-guide{gap:10px;margin:0;padding:0;list-style:none;display:grid}.quick-guide li{grid-template-columns:34px minmax(0,1fr);align-items:center;gap:11px;display:grid}.quick-guide li>span{border:1px solid var(--line);width:32px;height:32px;color:var(--blue);background:#fffefab3;border-radius:50%;place-items:center;font-size:.78rem;font-weight:850;display:grid}.quick-guide div{flex-wrap:wrap;align-items:baseline;gap:2px 8px;display:flex}.quick-guide strong{letter-spacing:.06em;text-transform:uppercase;font-size:.86rem}.quick-guide small{color:var(--ink-soft);font-size:.84rem}.ranking-panel,.result-panel{border-top:1px solid var(--line);padding-top:28px}.ranking-panel:not([data-ready=true]) .ranking-list{visibility:hidden}.section-heading{flex-direction:column;gap:16px;margin-bottom:22px;display:flex}.section-heading h2{letter-spacing:-.035em;margin:5px 0 0;font-size:clamp(1.55rem,5vw,2rem)}.instruction{color:var(--ink-soft);align-items:center;gap:8px;margin-bottom:0;font-size:.82rem;font-weight:650;display:flex}.instruction svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:18px}.ranking-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.workstyle-card{--accent:var(--blue);--accent-soft:var(--blue-soft);border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);touch-action:pan-y;border-radius:20px;grid-template-columns:56px minmax(0,1fr);transition:border-color .16s,box-shadow .16s,transform .16s;display:grid;position:relative;overflow:hidden}.workstyle-card:before{background:var(--accent);content:"";width:5px;position:absolute;inset:0 auto 0 0}.workstyle-card--red{--accent:var(--red);--accent-soft:var(--red-soft)}.workstyle-card--orange{--accent:var(--orange);--accent-soft:var(--orange-soft)}.workstyle-card--green{--accent:var(--green);--accent-soft:var(--green-soft)}.workstyle-card:is(:hover,:focus-within){border-color:color-mix(in srgb, var(--accent) 38%, var(--line));box-shadow:0 16px 38px #241f181c,0 2px 6px #241f180f}.rank-marker{border-right:1px solid var(--line);background:var(--accent-soft);flex-direction:column;justify-content:center;align-self:stretch;align-items:center;gap:3px;padding:18px 7px;display:flex}.rank-number{color:var(--accent);letter-spacing:-.04em;font-size:1.5rem;font-weight:850}.rank-label{max-width:48px;color:var(--accent);text-align:center;text-transform:uppercase;font-size:.5rem;font-weight:850;line-height:1.15;display:block}.card-body{min-width:0;padding:20px 18px 17px}.card-heading{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.card-kicker{color:var(--accent);margin-bottom:2px;font-size:.62rem}.card-heading h3{letter-spacing:-.035em;text-transform:uppercase;margin:0;font-size:clamp(1.28rem,5vw,1.65rem)}.letter-mark{border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);width:42px;height:42px;color:var(--accent);background:var(--accent-soft);border-radius:12px;flex:0 0 42px;place-items:center;font-size:1.3rem;font-weight:900;display:grid}.card-description{color:var(--ink-soft);margin:13px 0 14px;font-size:.92rem;line-height:1.55}.value-list{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.value-list li{border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));color:color-mix(in srgb, var(--accent) 80%, var(--ink));background:color-mix(in srgb, var(--accent-soft) 65%, var(--white));border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:650}.card-controls{border-top:1px solid var(--line);background:#fcfaf6;grid-column:1/-1;justify-content:space-between;display:flex}.drag-handle,.move-button{min-height:44px;color:var(--ink-soft);cursor:grab;background:0 0;border:0;justify-content:center;align-items:center;gap:7px;font-size:.75rem;font-weight:750;display:inline-flex}.drag-handle{padding:0 15px}.drag-handle:active{cursor:grabbing}.drag-handle svg{fill:currentColor;width:17px}.move-controls{display:flex}.move-button{border-left:1px solid var(--line);cursor:pointer;min-width:68px;padding:0 11px}.move-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:18px}.drag-handle:hover,.move-button:hover:not(:disabled){color:var(--accent);background:var(--accent-soft)}.move-button:disabled{color:#a7aaa7;background:0 0}.workstyle-card.is-chosen{border-color:var(--accent)}.workstyle-card.is-ghost{opacity:.25}.workstyle-card.is-dragging{transform:rotate(.7deg);box-shadow:0 24px 48px #241f1833}.reveal-wrap{text-align:center;justify-items:center;gap:12px;padding-top:30px;display:grid}.reveal-wrap p{color:var(--ink-soft);margin:0;font-size:.74rem}.primary-button,.secondary-button{border:1px solid var(--ink);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 22px;font-weight:800;text-decoration:none;transition:background .15s,color .15s,transform .15s,box-shadow .15s;display:inline-flex}.primary-button{color:var(--white);background:var(--ink);box-shadow:0 8px 20px #17211d2e}.secondary-button{color:var(--ink);background:0 0}.primary-button svg,.secondary-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:20px}.primary-button:hover{background:#2b3933;transform:translateY(-1px);box-shadow:0 10px 24px #17211d3d}.secondary-button:hover{color:var(--white);background:var(--ink)}.result-panel{text-align:center;max-width:700px;margin-inline:auto}.result-page-header{max-width:700px;margin:0 auto 36px}.result-page-header h1{color:var(--blue);margin:14px 0 18px;font-size:clamp(2.7rem,10vw,5.2rem)}.result-page-header>p:last-child{max-width:620px;color:var(--ink-soft);margin-bottom:0;font-size:1.02rem}.back-link{color:var(--ink-soft);align-items:center;gap:7px;margin-bottom:32px;font-size:.82rem;font-weight:750;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--blue)}.back-link svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:18px}.result-kicker{margin:22px 0 8px}.result-panel h2{color:var(--blue);letter-spacing:-.075em;margin:0 0 28px;font-size:clamp(5rem,24vw,9.5rem);font-weight:900;line-height:.9}.style-pair{border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);text-align:left;border-radius:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px;display:grid;overflow:hidden}.style-pair div{padding:18px}.style-pair div+div{border-left:1px solid var(--line)}.style-pair span,.style-pair strong{display:block}.style-pair span{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;font-size:.7rem;font-weight:800}.style-pair strong{font-size:clamp(1rem,4vw,1.35rem)}.complete-order{color:var(--ink-soft);margin:0 0 22px;font-size:clamp(.83rem,3.2vw,1rem);font-weight:700}.result-description{border:1px solid var(--line);text-align:left;background:#fffefaa6;border-radius:18px;margin-bottom:26px;padding:22px}.result-description p{color:var(--ink-soft);margin-bottom:10px;line-height:1.65}.result-description p:last-child{margin-bottom:0}.code-guide{border:1px solid var(--line);text-align:left;background:#fffefaad;border-radius:18px;margin-bottom:26px;padding:22px}.code-guide h3{letter-spacing:-.025em;margin:5px 0 18px;font-size:1.2rem}.code-guide ol{gap:10px;margin:0;padding:0;list-style:none;display:grid}.code-guide li{border-top:1px solid var(--line);grid-template-columns:minmax(110px,.38fr) minmax(0,1fr);gap:12px;padding-top:10px;display:grid}.code-guide li span,.code-note,.site-note{color:var(--ink-soft)}.code-note{margin:18px 0 0;font-size:.86rem}.result-actions{flex-direction:column;gap:10px;display:flex}.empty-result{border:1px solid var(--line);background:var(--white);max-width:620px;box-shadow:var(--shadow);text-align:center;border-radius:20px;margin-inline:auto;padding:32px}.empty-result h2{letter-spacing:-.04em;margin:6px 0 12px;font-size:clamp(1.8rem,7vw,2.8rem)}.empty-result>p:not(.result-kicker){max-width:470px;color:var(--ink-soft);margin:0 auto 24px}.site-note{border-top:1px solid var(--line);text-align:center;max-width:700px;margin:44px auto 0;padding-top:22px;font-size:.76rem;line-height:1.55}.site-note p{margin-bottom:6px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=640px){main{width:min(100% - 64px,900px);padding-top:72px}.intro-badge{position:absolute;top:3px;right:0}.section-heading{flex-direction:row;justify-content:space-between;align-items:end}.quick-guide{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.quick-guide li{align-items:start}.quick-guide div{display:grid}.workstyle-card{grid-template-columns:100px minmax(0,1fr) 112px}.rank-marker{grid-area:1/1;gap:1px;padding:20px 12px}.rank-number{font-size:2.35rem;line-height:1}.rank-label{max-width:76px;min-height:2.5em;color:var(--accent);text-align:center;text-transform:uppercase;font-size:.65rem;font-weight:800;line-height:1.25}.card-body{grid-area:1/2;padding:22px 24px}.card-controls{border-top:0;border-left:1px solid var(--line);grid-area:1/3;display:grid}.drag-handle{border-bottom:1px solid var(--line);flex-direction:column;padding:12px}.move-controls{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.move-button{border-left:0;flex-direction:column;gap:2px;min-width:0;padding:6px}.move-button+.move-button{border-left:1px solid var(--line)}.result-actions{flex-direction:row;justify-content:center}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}