:root{--paper:#f1e6cf;--surface:#fffaf0;--ink:#1d1b17;--muted:#6f6453;--line:#c5b99f;--red:#ed5140;--gold:#f0ad22;--green:#76aa2f;--teal:#35aaa1;--font-ui:"Arial Narrow","Helvetica Neue",Arial,sans-serif;--font-ja:"Hiragino Sans","Yu Gothic","YuGothic",system-ui,sans-serif}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth;scroll-padding-block:24px 180px}body{margin:0;color:var(--ink);font-family:var(--font-ja);background:linear-gradient(135deg,rgba(29,27,23,.025) 25%,transparent 25%) 0 0/7px 7px,var(--paper);text-rendering:optimizeLegibility}body.with-confirmation{padding-bottom:150px}button,input,a{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b6392c;outline-offset:4px}[hidden]{display:none!important}.shell{width:min(1440px,100%);margin:auto;padding:0 clamp(16px,3.6vw,56px)}.eyebrow{font:800 11px/1.4 var(--font-ui);letter-spacing:.16em;color:#527723;margin:0 0 16px}.skip-link{position:fixed;top:-100px;left:12px;z-index:50;background:var(--ink);color:white;padding:14px}.skip-link:focus{top:12px}
.masthead{height:88px;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:900 14px/1 var(--font-ui);letter-spacing:.08em}.color-bars{display:flex;gap:4px}.color-bars i{width:9px;height:14px;background:var(--red)}.color-bars i:nth-child(2){background:var(--gold)}.color-bars i:nth-child(3){background:var(--green)}.color-bars i:nth-child(4){background:var(--teal)}.diagnosis-link{font-size:12px;font-weight:800;text-decoration:none}.diagnosis-link span{margin-left:20px;color:var(--red);font-size:18px}.masthead .diagnosis-link{margin-left:auto;border-left:1px solid var(--line);padding:12px 0 12px 26px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:45px;align-items:center;padding:58px 0 44px}.hero h1{font-size:clamp(28px,3.8vw,53px);line-height:1.55;letter-spacing:-.045em;font-weight:850;margin:0}.hero-question{font-size:clamp(24px,2.6vw,36px);line-height:1.6;letter-spacing:-.04em;font-weight:850;margin:12px 0 0}.hero-question-highlight{padding-bottom:.22em;background:linear-gradient(transparent calc(100% - .24em),var(--gold) 0);-webkit-box-decoration-break:clone;box-decoration-break:clone}.hero-question-part{display:inline-block;white-space:nowrap}.hero-description{font-size:13px;line-height:2;color:#554b3d;margin:22px 0 0}.participation{position:relative;padding:30px 25px 24px;border:1px solid #a99b7e;background:rgba(255,250,240,.55);border-radius:3px;transform:rotate(2deg);box-shadow:5px 5px 0 rgba(53,170,161,.24)}.participation:before{content:"";position:absolute;left:38%;top:-9px;width:62px;height:17px;background:#ead092bb;transform:rotate(-7deg)}.participation .eyebrow{color:var(--muted);font-size:10px}.participation>div{display:flex;align-items:baseline;gap:10px}.participation strong{font:900 64px/1 var(--font-ui);letter-spacing:-.05em}.participation>div>span{font-size:16px;font-weight:700}.participation-decor{position:absolute;right:24px;top:53px;font-size:42px;color:var(--red);transform:rotate(-12deg)}
.steps{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:16px 32px;padding:18px 0;margin:0 0 26px;list-style:none;border-block:1px solid var(--line)}.steps li{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700}.steps li>span{font:800 12px/1 var(--font-ui);letter-spacing:.1em;color:var(--red);border:1px solid #d3c3a6;padding:8px}.mode-banner{margin:12px 0 20px;padding:16px 20px;background:#fff3c4;border:1px solid #bba263;font-size:13px;line-height:1.8;font-weight:700}
.picker{display:flex;align-items:center;gap:22px;background:var(--surface);border:1px solid #a99b7e;box-shadow:4px 4px 0 #d9c7a5;padding:19px 22px;position:relative;border-radius:4px;scroll-margin-top:25px}.picker-heading{align-self:stretch;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px;border-right:1px solid #d6cab4;padding-right:22px}.picker-heading .eyebrow{font-size:9px;margin:0;color:var(--muted);white-space:nowrap}#sticker-preview{width:32px;height:32px;filter:drop-shadow(2px 3px 0 #e6ddce)}svg{width:100%;height:100%;display:block}.picker fieldset{border:0;padding:0;margin:0;min-width:0}.picker legend{font-size:10px;font-weight:750;color:var(--muted);margin-bottom:8px;padding:0}.shape-options{display:flex;gap:4px}.shape-option{width:40px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:3px;background:transparent}.shape-option svg{width:18px;height:18px}.shape-option span{font-size:8px;line-height:1}.shape-option[aria-pressed=true]{background:#f0e7d6;border-color:#8d7958}.shape-option:hover{background:#eee4d2}.color-options{display:flex;flex-wrap:wrap;gap:6px}.color-option{width:30px;height:30px;background:transparent;border:2px solid transparent;border-radius:50%;padding:3px;position:relative}.color-option:before{content:"";position:absolute;inset:3px;background:var(--swatch);border-radius:50%;border:1px solid #00000018}.color-option span{color:white;position:relative;z-index:1;font:900 14px/1 var(--font-ui);opacity:0;display:block}.color-option[aria-pressed=true]{border-color:var(--ink)}.color-option[aria-pressed=true] span{opacity:1}.color-option[data-color="#eab308"] span{color:#111827}.picker-note{font-size:10px;line-height:1.8;color:var(--muted);padding-left:20px;border-left:1px solid #d6cab4;margin:0 0 0 auto;flex-shrink:0}
.board-section{padding-top:44px}.board-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px;border-bottom:3px solid var(--ink);padding-bottom:20px;position:relative}.board-heading:after{content:"";position:absolute;right:0;bottom:-3px;width:136px;height:6px;background:linear-gradient(90deg,var(--red) 25%,var(--gold) 25% 50%,var(--green) 50% 75%,var(--teal) 75%)}.board-heading .eyebrow{font-size:9px;margin:0 0 7px}.board-heading h2{font-size:24px;letter-spacing:-.025em;line-height:1.4;margin:0}.board-meta{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted)}#connection-status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px}#connection-status.is-error:before{background:var(--red)}.text-button{font-size:11px;font-weight:700;color:var(--muted);border:0;background:transparent;padding:10px 2px;text-decoration:underline;text-underline-offset:4px}.text-button span{font-size:16px;margin-left:8px}.board-help{font-size:11px;color:var(--muted);margin:0 0 22px;line-height:1.8}.board-help span{margin-left:12px;font-size:10px}.error-note{color:#9b2d22;background:#fff0e9;border-left:3px solid var(--red);padding:12px 16px;font-size:12px;line-height:1.8}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px;outline:none}
.type-card{min-width:0;padding:12px;background:rgba(255,250,240,.78);border:1px solid #8d7958;border-radius:9px;box-shadow:0 3px 0 rgba(141,121,88,.08);scroll-margin-top:30px;transition:border-color .2s}.type-card:has(.has-draft){border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.card-index{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font:800 9px/1 var(--font-ui);letter-spacing:.12em}.card-index>span:first-child{color:#aa4335}.card-count{color:var(--muted);font:600 10px/1 var(--font-ja);letter-spacing:0}.type-image{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;border-radius:5px;background:#fcf1d8}.rating-grid{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.rating-column{min-width:0}.rating-label{font-size:11px;font-weight:800;color:#fffaf0;display:flex;justify-content:center;align-items:center;gap:4px;padding:7px 2px;border-radius:4px 4px 0 0;background:#c83f31}.rating-label>span{font:600 9px/1 var(--font-ui);opacity:.8}.okay .rating-label{background:#e6a118;color:#312710}.surprise .rating-label{background:#22847e}.sticker-zone{width:100%;height:122px;display:block;position:relative;border:1px dashed #c5b99f;border-top:0;border-radius:0 0 5px 5px;background:radial-gradient(circle,#d7cebd 1px,transparent 1px) 0 0/12px 12px,#fffdf7;overflow:hidden;padding:0;cursor:crosshair;touch-action:manipulation;transition:background .15s}.sticker-zone:hover{background-color:#f9f0df}.sticker-zone:disabled{opacity:1;cursor:wait}.sticker-zone:focus-visible{outline-offset:2px;z-index:1}.sticker-zone.has-draft{border:2px solid var(--red);border-top:2px solid var(--red);background-color:#fff1dc}.zone-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:19px;font-weight:400;color:#bdb29d;pointer-events:none}.sticker-layer{position:absolute;inset:0;pointer-events:none}.sticker{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(1px 2px 1px #00000026)}.sticker.is-own{z-index:2;filter:none}.sticker.is-own:before{content:"";position:absolute;inset:-3px;border:1px solid #171511;border-radius:50%;box-shadow:0 0 0 1px #fffaf0}.sticker.is-draft{z-index:3;opacity:.7;filter:none}.sticker.is-draft:before{content:"";position:absolute;inset:-3px;border:1px dashed #ae3327;border-radius:50%;background:#fffaf066}
.bottom-cta{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:52px 0 26px;padding:30px 34px;background:linear-gradient(110deg,#ead7af88,#fffaf099 50%,#76aa2f20);border-block:2px solid var(--ink);position:relative}.bottom-cta:before{content:"";position:absolute;left:0;top:0;width:5px;height:45%;background:var(--red)}.bottom-cta .eyebrow{font-size:9px;margin-bottom:10px}.bottom-cta h2{font-size:22px;margin:0}.bottom-cta p:not(.eyebrow){font-size:11px;line-height:1.9;color:var(--muted);margin:10px 0 0}.primary-link,.primary-button{background:var(--ink);color:var(--surface);border:1px solid var(--ink);border-radius:3px;padding:16px 20px;text-decoration:none;display:inline-flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;font-weight:800;line-height:1.5;box-shadow:3px 3px 0 var(--teal);white-space:nowrap}.primary-button:hover,.primary-link:hover{background:#b83c30}.primary-link span{color:var(--gold)}.participation-note{font-size:11px;line-height:1.9;color:var(--muted);padding:0 5px}.participation-note summary{cursor:pointer;font-weight:750;padding:12px 0}.participation-note p{max-width:740px}.participation-note a{display:inline-block;padding:8px 0;text-underline-offset:4px}footer{border-top:1px solid var(--line);margin-top:32px;padding:23px 0 28px;display:flex;align-items:center;gap:12px;font:700 9px/1 var(--font-ui);letter-spacing:.12em;color:var(--muted)}footer .color-bars i{width:5px;height:8px}footer>span:last-child{margin-left:auto;font-family:var(--font-ja);letter-spacing:0}
.confirmation{position:fixed;z-index:10;bottom:0;left:0;right:0;background:#fffaf0f5;border-top:2px solid var(--ink);box-shadow:0 -6px 30px #1d1b171a;padding:18px clamp(16px,3.6vw,56px) calc(18px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}.confirmation-inner{max-width:1328px;margin:auto;display:flex;align-items:center;gap:18px}#confirm-preview{width:27px;height:27px;flex-shrink:0}.confirmation-copy{flex:1;min-width:0}.confirmation-copy strong{font-size:12px;line-height:1.8}.confirmation-copy p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.7}.confirmation-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.secondary-button{padding:13px 12px;font-size:11px;font-weight:700;background:transparent;border:1px solid #b9aa91;border-radius:3px}.confirmation .primary-button{font-size:12px;padding:13px 18px}.is-error{color:#a22c20!important}.noscript{position:fixed;inset:15px 15px auto;background:white;padding:20px;border:2px solid var(--red);z-index:30}
@media(min-width:1181px){.picker .color-options{max-width:400px}}
@media(max-width:1180px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}.picker{gap:16px;padding:16px}.picker-note{display:none}.picker-heading{padding-right:16px}.color-options{max-width:230px}.hero{grid-template-columns:minmax(0,1fr) 225px;gap:28px}.participation strong{font-size:56px}.confirmation-inner{gap:12px}.confirmation-actions{gap:8px}.change-link{display:none}}
@media(max-width:900px){.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hero{grid-template-columns:minmax(0,1fr) 180px;padding-block:40px 32px}.hero h1{font-size:30px}.participation{padding:24px 18px}.participation strong{font-size:48px}.participation-decor{right:14px;font-size:30px}.hero-description{font-size:12px}.steps{gap:12px 24px}.steps li{font-size:10px;gap:8px}.steps li>span{padding:6px}.picker{flex-wrap:wrap;gap:12px 18px}.picker-heading{border-right:0;padding-right:8px}.picker .color-field{flex:1;min-width:210px}.color-options{max-width:none}.board-meta{font-size:9px}.board-heading h2{font-size:22px}.sticker-zone{height:140px}.rating-label{font-size:12px}.confirmation-inner{flex-wrap:wrap}.confirmation-copy{flex-basis:calc(100% - 50px)}.confirmation-actions{margin-left:auto}.change-link{display:block}.bottom-cta{padding:26px 20px;flex-direction:column;align-items:flex-start}.bottom-cta h2{font-size:20px}}
@media(max-width:560px){.shell{padding-inline:18px}.masthead{height:68px;gap:12px}.brand{font-size:11px;gap:8px}.brand .color-bars i{width:6px;height:10px}.masthead .diagnosis-link{margin-left:auto;font-size:10px;padding-left:12px}.masthead .diagnosis-link span{margin-left:8px;font-size:14px}.hero{display:block;padding:34px 0 26px}.hero .eyebrow{font-size:8px;letter-spacing:.12em;margin-bottom:16px}.hero h1{font-size:clamp(23px,5.6vw,31px);line-height:1.6}.hero-question{font-size:24px;margin-top:12px}.hero-description{font-size:11px;margin-top:17px}.participation{transform:none;box-shadow:none;border:0;border-left:3px solid var(--teal);padding:10px 14px;margin-top:23px;background:rgba(255,250,240,.45);display:flex;align-items:center;gap:12px}.participation:before,.participation-decor{display:none}.participation .eyebrow{margin:0;font:700 10px/1.6 var(--font-ja);letter-spacing:0}.participation strong{font-size:28px;letter-spacing:-.03em}.participation>div{gap:4px}.participation>div>span{font-size:11px}.steps{display:grid;gap:9px;padding-block:14px;margin-bottom:20px}.steps li{font-size:11px}.steps li>span{padding:3px;border:0;font-size:10px}.picker{padding:16px 13px;gap:15px}.picker-heading{width:40px;padding:0;gap:7px}.picker-heading .eyebrow{font-size:7px;white-space:normal;line-height:1.6;text-align:center;letter-spacing:.09em}#sticker-preview{width:25px;height:25px}.picker legend{font-size:9px;margin-bottom:6px}.shape-options{gap:2px}.shape-option{width:calc((100vw - 140px)/6);max-width:48px;min-width:29px;height:43px}.shape-option span{font-size:8px}.shape-option svg{width:17px;height:17px}.picker .color-field{min-width:0;flex-basis:100%;padding-top:10px;border-top:1px solid #e1d5c0}.color-options{gap:3px;justify-content:space-between}.color-option{width:24px;height:32px;border-radius:4px;padding:2px}.color-option:before{inset:5px 2px;border-radius:50%}.color-option span{font-size:11px}.board-section{padding-top:30px}.board-heading{align-items:flex-start;flex-direction:column;gap:13px;padding-bottom:14px;margin-bottom:12px}.board-heading h2{font-size:22px}.board-meta{width:100%;justify-content:space-between}.board-help{font-size:10px;margin-bottom:18px}.board-help span{display:block;margin:4px 0 0;font-size:9px}.board{grid-template-columns:1fr;gap:20px}.type-card{padding:13px}.card-index{font-size:10px}.sticker-zone{height:128px}.rating-label{font-size:12px;padding:9px 2px}.bottom-cta{margin-top:34px}.bottom-cta h2{font-size:19px}.bottom-cta .primary-link{font-size:11px;white-space:normal;width:100%}.confirmation{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}.confirmation-inner{gap:8px 12px}#confirm-preview{width:22px;height:22px}.confirmation-copy strong{font-size:11px;line-height:1.5;display:block}.confirmation-copy p{font-size:10px;line-height:1.6}.confirmation-actions{width:100%;gap:8px}.confirmation .primary-button{margin-left:auto;padding:12px;font-size:11px;white-space:normal}.secondary-button{font-size:10px;padding:12px 8px}.change-link{font-size:9px}.with-confirmation{padding-bottom:170px!important}footer{gap:8px;font-size:8px;letter-spacing:.04em}footer>span:last-child{font-size:8px}}
@media(max-width:560px){.picker-heading{flex-direction:row;justify-content:space-between;width:100%;padding-bottom:9px;border-bottom:1px solid #e1d5c0}.picker-heading .eyebrow{font-size:9px;white-space:nowrap}.picker fieldset:not(.color-field){width:100%}.shape-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.shape-option{width:100%;max-width:none;min-width:0;height:48px}.shape-option span{font-size:9px}.shape-option svg{width:20px;height:20px}.color-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.color-option{width:100%;height:44px;border-radius:4px}.color-option:before{inset:auto;width:28px;height:28px;top:50%;left:50%;transform:translate(-50%,-50%)}.color-option span{font-size:14px}.color-option[aria-pressed=true]{border-color:var(--ink)}}
@media(max-width:360px){.shape-options{grid-template-columns:repeat(3,minmax(0,1fr))}.color-options{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}