:root{--paper:#f8f7f3;--ink:#203e39;--muted:#72817b;--green:#216b61;--green-dark:#18544b;--mint:#e1ede5;--coral:#ee8d75;--rose:#fff0e9;--line:#e0e4da;--lavender:#eeeaf7;--white:#fffefa;--shadow:0 14px 36px #263a3210;--radius:24px;font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:var(--green);text-underline-offset:4px}button{cursor:pointer}button:disabled{opacity:.48;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #e39d3e;outline-offset:4px}input:focus,select:focus{outline:2px solid #7cae9e;outline-offset:2px}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:1.5}p{line-height:1.85}small{font-size:12px}img{max-width:100%}svg{vertical-align:middle}header{max-width:1152px;margin:auto;padding:26px 40px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.04em;text-decoration:none;color:var(--ink);background:none;border:0;padding:0}.brand-icon{width:35px;height:35px;flex-shrink:0}.header-actions{display:flex;gap:12px;align-items:center}.nav-button{border:0;background:transparent;padding:10px 12px;font-size:13px;font-weight:700;border-radius:12px}.nav-button:hover{background:var(--mint)}.page{max-width:1080px;padding:26px 36px 80px;margin:auto}.narrow{max-width:680px}.page-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--green);text-transform:uppercase;display:flex;align-items:center;gap:8px}.page-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:25px 0 42px}.hero h1{font-size:clamp(42px,5.3vw,64px);line-height:1.4;margin:22px 0;letter-spacing:-.06em}.hero h1 span{position:relative;z-index:1}.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:13px;background:#efb29377;z-index:-1;border-radius:8px}.hero-copy{font-size:15px;max-width:420px;color:#586c63}.hero-sub{margin-top:16px;font-size:12px;color:var(--muted)}.hero-art{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center}.orbit{width:280px;height:280px;border:1px dashed #aebfb2;border-radius:50%;position:absolute;transform:rotate(-20deg)}.orbit:after{content:"";position:absolute;inset:30px;border:1px solid #dce4da;border-radius:50%}.bubble{position:absolute;border-radius:26px;font-size:13px;font-weight:700;box-shadow:var(--shadow);transform:rotate(var(--rotate));z-index:2;padding:20px 25px;background:var(--white)}.bubble:after{content:"";position:absolute;width:16px;height:16px;bottom:-5px;left:25px;transform:rotate(45deg);background:inherit;border-radius:3px}.bubble.b1{left:0;top:28px;background:var(--mint);--rotate:-8deg}.bubble.b2{right:0;top:95px;background:var(--rose);--rotate:7deg}.bubble.b3{left:20px;bottom:20px;background:var(--lavender);--rotate:4deg}.art-center{font-size:82px;font-family:Georgia,serif;font-style:italic;letter-spacing:-10px;font-weight:700;color:var(--green);transform:rotate(-9deg);opacity:.9}.spark{position:absolute;font-size:26px;color:var(--coral);right:42px;bottom:48px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mode-card{padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--white);text-align:left;text-decoration:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:inherit;transition:transform .2s,box-shadow .2s}.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.mode-card.primary{background:var(--green);color:white;border-color:var(--green)}.mode-card h2{font-size:23px;margin:14px 0 8px}.mode-card p{font-size:13px;opacity:.85}.mode-tag{font-size:10px;letter-spacing:.12em;font-weight:700;opacity:.72}.mode-arrow{border:1px solid currentColor;border-radius:50%;height:35px;min-width:35px;display:grid;place-items:center;opacity:.7;margin-top:auto;align-self:flex-end}.intro-foot{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:26px 0 0;font-size:11px;color:var(--muted)}.intro-foot span:before{content:"✓";margin-right:5px;color:var(--green)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:46px 0 17px;gap:12px}.section-heading h2{font-size:20px}.section-heading span{font-size:12px;color:var(--muted)}.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.theme{border:1px solid var(--line);border-radius:18px;background:#fffefa;padding:18px 10px;text-align:center;display:flex;flex-direction:column;gap:9px;align-items:center;min-height:102px;font-size:11px;font-weight:700}.theme:hover{border-color:#6c9d8a;background:var(--mint)}.theme-icon{font-size:23px;line-height:1}.footer{max-width:1080px;margin:auto;padding:24px 36px 34px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;line-height:1.7}.btn{border:1px solid var(--line);border-radius:15px;background:var(--white);padding:15px 22px;min-height:52px;font-size:14px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.5}.btn:hover{filter:brightness(.97)}.btn.primary{background:var(--green);border-color:var(--green);color:white}.btn.coral{background:var(--coral);border-color:var(--coral);color:#3e302b}.btn.ghost{background:transparent}.btn.small{font-size:12px;padding:10px 14px;min-height:42px}.btn.full{width:100%}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.actions>*{flex:1}.text-button{border:0;background:transparent;color:var(--muted);padding:14px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.back{display:inline-flex;gap:8px;align-items:center;padding:0;background:transparent;border:0;font-size:12px;color:var(--muted);margin-bottom:25px;min-height:32px}.panel{padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}.panel h2{font-size:21px;margin-bottom:12px}.panel p{font-size:13px}.muted{color:var(--muted)}.small{font-size:12px}.center{text-align:center}.stack{display:flex;flex-direction:column;gap:16px}.spaced{margin-top:22px}.tag{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:20px;background:var(--mint);color:var(--green);font-size:11px;font-weight:750}.tag.coral{background:var(--rose);color:#9f523c}.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;font-size:12px;color:var(--muted)}.progress{height:5px;border-radius:10px;background:#e1e5dc;overflow:hidden;margin-bottom:42px}.progress span{display:block;height:100%;background:var(--green);border-radius:10px;transition:width .3s}.question-card{animation:enter .25s ease}.question-number{font-size:11px;letter-spacing:.15em;color:var(--muted);font-weight:750}.question-text{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.65;letter-spacing:-.035em;margin:17px 0 29px;min-height:108px;overflow-wrap:anywhere}.choices{display:grid;gap:13px}.choice{display:flex;align-items:center;gap:15px;min-height:86px;width:100%;border:1.5px solid #d4dfd4;background:var(--white);border-radius:18px;padding:20px 23px;text-align:left;transition:border-color .15s,transform .15s,background .15s;font-size:17px;font-weight:750;line-height:1.6}.choice:hover{background:var(--mint);border-color:var(--green);transform:translateY(-2px)}.choice:nth-child(2):hover{background:var(--rose);border-color:var(--coral)}.choice-letter{font-size:12px;display:grid;place-items:center;min-width:33px;height:33px;border-radius:50%;background:var(--mint);color:var(--green)}.choice:nth-child(2) .choice-letter{background:var(--rose);color:#9f523c}.skip-wrap{text-align:center;margin:16px 0}.quiz-note{text-align:center;font-size:11px;line-height:1.8;color:var(--muted);margin-top:16px}.result-heading{text-align:center;margin:2px 0 22px}.result-heading h1{font-size:28px;margin:11px 0}.result-card{background:#e5eee5;border:1px solid #d3dfd1;border-radius:28px;position:relative;overflow:hidden;padding:35px 28px;text-align:center}.result-card:before{content:"";position:absolute;width:190px;height:190px;border:1px solid #c7d8c3;border-radius:50%;right:-80px;top:-90px}.result-card:after{content:"";position:absolute;width:160px;height:160px;border:1px dashed #cadbc5;border-radius:50%;left:-80px;bottom:-80px}.result-from{font-size:12px;color:#5f7467;margin-bottom:21px;line-height:1.8}.result-region{font-size:clamp(31px,7vw,44px);font-weight:850;line-height:1.45;letter-spacing:-.06em}.result-demographic{font-size:24px;font-weight:800;margin:6px 0}.result-type{font-size:13px;font-weight:700;margin-top:7px}.result-mark{font-size:35px;display:inline-block;margin-bottom:15px;color:var(--green)}.result-card-footer{font-size:10px;letter-spacing:.08em;margin-top:28px;opacity:.65}.result-note{font-size:10px;color:var(--muted);text-align:center;margin:12px 0 24px;line-height:1.8}.matches{display:flex;gap:10px;margin:15px 0}.match{flex:1;min-width:0;font-size:12px;border:1px solid var(--line);background:var(--white);border-radius:16px;padding:14px}.match .rank{font-family:Georgia,serif;color:var(--green);font-size:24px;margin-bottom:6px}.count-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.count-box{border:1px solid var(--line);background:var(--white);border-radius:18px;padding:20px}.count-box strong{display:block;font-size:28px}.count-box span{font-size:11px;color:var(--muted)}.answer-item{padding:19px 0;border-bottom:1px solid var(--line)}.answer-item:last-child{border-bottom:0}.answer-item h3{font-size:14px;line-height:1.7;margin-bottom:12px}.answer-item .my-answer{font-size:12px;color:var(--green);font-weight:750}.bar{height:9px;border-radius:8px;background:#f1c4b3;overflow:hidden;margin:10px 0 7px}.bar span{display:block;height:100%;background:var(--green)}.bar-labels{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);line-height:1.7}.field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}.field>label,.field>span{font-size:12px;font-weight:750}.field select,.field input{width:100%;border:1px solid #ced7cb;border-radius:12px;background:white;padding:13px 14px;min-height:49px;color:var(--ink)}.field small{font-size:10px;color:var(--muted);line-height:1.8}.check-label{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.8}.check-label input{margin-top:5px;accent-color:var(--green)}.modal-backdrop{position:fixed;inset:0;background:#163b365c;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}.modal{width:min(100%,480px);max-height:90dvh;overflow:auto;border-radius:24px;background:var(--paper);padding:28px;box-shadow:0 20px 80px #17382d44}.modal h2{font-size:22px;margin:0 0 10px}.modal p{font-size:12px;color:var(--muted);margin-bottom:20px}.modal-close{float:right;border:0;background:transparent;min-width:36px;min-height:36px;font-size:22px}.loading{min-height:60vh;display:grid;place-content:center;font-size:13px;color:var(--muted);text-align:center;line-height:2}.loading-dots{animation:pulse 1s infinite}.lock-graphic{font-size:37px;width:90px;height:90px;background:var(--mint);border-radius:50%;display:grid;place-items:center;margin:0 auto 25px}.locked{padding-top:40px;text-align:center}.locked h1{font-size:25px}.locked p{font-size:13px;max-width:420px;margin:14px auto 25px;color:var(--muted)}.locked .field{text-align:left}.notice{background:var(--mint);border-radius:14px;padding:13px 16px;font-size:11px;line-height:1.8;color:var(--green)}.notice.coral{background:var(--rose);color:#975d45}.notice.error{background:#fbe4e1;color:#9d3d38}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.room-heading h1{font-size:28px}.room-code{font-size:12px;font-family:monospace;letter-spacing:.13em;color:var(--muted)}.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.person{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:13px;padding:12px 14px;font-size:12px}.person-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--mint);font-size:13px}.person small{margin-left:auto;font-size:10px;color:var(--muted)}.people-list{display:flex;flex-direction:column;gap:9px;margin-top:18px}.invite-link{word-break:break-all;font-size:11px;padding:12px;border:1px solid var(--line);background:var(--paper);border-radius:12px;line-height:1.7;margin:10px 0}.qr{width:165px;height:165px;background:white;display:block;margin:0 auto 14px;border-radius:14px;padding:5px}.join-count{font-size:45px;line-height:1.2;font-weight:800;color:var(--green)}.waiting-art{display:flex;justify-content:center;margin:28px 0;font-size:58px;color:var(--coral)}.waiting-card{text-align:center;padding:35px 26px}.waiting-card h2{font-size:23px;margin:15px 0}.timer{font-family:monospace;font-size:13px;background:var(--mint);border-radius:10px;padding:7px 10px;color:var(--green);white-space:nowrap}.result-option{background:var(--paper);border-radius:16px;padding:17px;margin:12px 0}.result-option-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:750}.result-option-head strong{font-size:22px;white-space:nowrap}.name-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.name-chips span{background:white;border:1px solid var(--line);padding:5px 9px;border-radius:10px;font-size:10px}.result-question{font-size:24px;margin:14px 0 24px;line-height:1.7}.summary-insight{padding:20px;border-radius:18px;background:var(--lavender);margin:16px 0}.summary-insight .small{font-size:11px;margin-bottom:7px;color:#76648c}.summary-insight h3{font-size:16px;line-height:1.7}.summary-insight p{font-size:12px;margin-top:10px}.result-list-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;margin-top:16px}.result-list-card h3{font-size:16px;line-height:1.75}.inline-form{display:flex;gap:8px}.inline-form input{min-width:0}.inline-form .btn{flex-shrink:0}.disconnect{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--rose);padding:12px 20px;border-radius:12px;font-size:12px;z-index:10;box-shadow:var(--shadow)}#toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;max-width:calc(100% - 30px);width:max-content;padding:13px 21px;border-radius:14px;z-index:100;font-size:12px;opacity:0;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.form-error{color:#a84037;font-size:12px;margin:12px 0;line-height:1.8}.save-banner{border:1px solid #d9d7bd;background:#f6f2df;padding:18px 20px;border-radius:18px;margin:22px 0}.save-banner p{font-size:11px;line-height:1.8;margin:7px 0 12px;color:#766a46}.share-preview{padding:25px;background:var(--mint);border-radius:18px;text-align:center;margin-bottom:18px}.share-preview strong{font-size:21px;line-height:1.7;display:block}.theme-selected{background:var(--mint)}.theme-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.theme-row:last-child{border:0}.live-dot{width:7px;height:7px;display:inline-block;background:#568a55;border-radius:50%;margin-right:6px;animation:pulse 2s infinite}.error-page{padding-top:55px;text-align:center}.error-page h1{font-size:26px;margin:16px 0}.error-page p{font-size:13px;color:var(--muted);margin-bottom:25px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{opacity:.45}}@media(min-width:900px){.quiz-page{padding-top:40px}.question-card{padding:0 10px}}@media(max-width:700px){header{padding:20px 20px}.brand{font-size:14px}.brand-icon{width:29px;height:29px}.nav-button{padding:8px;font-size:11px}.header-actions{gap:3px}.page{padding:16px 20px 60px}.hero{grid-template-columns:1fr;padding:12px 0 26px;gap:0}.hero h1{font-size:43px;margin:18px 0}.hero-copy{font-size:13px}.hero-art{display:none}.mode-grid{gap:12px}.mode-card{padding:22px 17px;min-height:185px;position:relative}.mode-card h2{font-size:19px;margin:17px 0 8px;white-space:nowrap}.mode-card p{font-size:11px;padding-right:4px}.mode-arrow{position:absolute;bottom:15px;right:15px;width:24px;min-width:24px;height:24px;font-size:13px}.mode-tag{font-size:9px}.intro-foot{gap:13px;font-size:10px;margin-top:20px}.section-heading{margin-top:33px}.section-heading h2{font-size:18px}.section-heading span{font-size:10px}.themes{grid-template-columns:repeat(3,1fr);gap:9px}.theme{padding:15px 8px;font-size:10px;min-height:93px}.theme-icon{font-size:21px}.footer{padding:20px;flex-direction:column;gap:7px}.panel{padding:23px 20px}.room-grid{grid-template-columns:1fr}.room-heading h1{font-size:24px}.question-text{font-size:26px;min-height:112px;margin-bottom:25px}.progress{margin-bottom:32px}.choice{font-size:16px;padding:19px 18px;min-height:84px}.result-heading h1{font-size:24px}.result-card{padding:29px 20px}.result-demographic{font-size:24px}.actions{gap:9px}.actions>.btn{padding:14px 12px;font-size:13px}.result-question{font-size:23px}.modal{padding:25px 20px}.match{font-size:11px;padding:12px}.count-box{padding:16px}.count-box strong{font-size:25px}.join-count{font-size:38px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}