*{box-sizing:border-box}body{margin:0;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;font-weight:400;background:linear-gradient(180deg,#fcfdfe,#f1f3f7);background-attachment:fixed;color:#23232e;-webkit-font-smoothing:antialiased}.page{--accent: #888;max-width:680px;margin:0 auto;padding:32px 16px 56px;text-align:center}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;text-align:left;margin-bottom:20px}.title-block{flex:1}h1{font-size:30px;font-weight:600;letter-spacing:.05em;margin:4px 0 8px}h1:after{content:"";display:block;width:56px;height:4px;border-radius:2px;margin-top:10px;background:var(--accent);transition:background .4s ease}.sub{color:#7a7f8c;font-size:14px;font-weight:300;line-height:1.7;margin:0}.mute-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #e4e7ee;background:#fff;font-size:19px;cursor:pointer;box-shadow:0 2px 8px #1e233c0f;transition:transform .12s ease,box-shadow .12s ease}.mute-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #1e233c1a}.mute-btn:active{transform:scale(.94)}.mode-tabs{display:inline-flex;gap:2px;background:#e9ecf2;border-radius:999px;padding:4px;margin-bottom:18px}.tab{font-family:inherit;font-size:14.5px;border:none;border-radius:999px;background:transparent;color:#5a5f6d;padding:9px 22px;cursor:pointer;transition:all .25s ease}.tab.active{background:#fff;color:#23232e;font-weight:600;box-shadow:0 2px 10px #1e233c1f}.card{background:#fff;border:1px solid #e6e8ee;border-radius:24px;padding:26px 22px;box-shadow:0 10px 30px #1e233c0f;margin-bottom:18px}.target-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}.target-box{display:flex;align-items:center;gap:8px}.target-label{font-size:12.5px;letter-spacing:.06em;color:#8a8f9c}.round-label{font-size:15px;font-weight:600}.round-total{color:#8a8f9c;font-weight:400;font-size:13px}.score-label{font-size:15px;font-weight:600}.target-name{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}.nearest-label{font-size:12.5px;color:#8a8f9c}.swatch{display:inline-block;width:44px;height:44px;border-radius:12px;border:1px solid rgba(20,20,40,.12);box-shadow:0 2px 8px #1e233c1a;vertical-align:middle;transition:background .15s ease}.swatch.mini{width:18px;height:18px;border-radius:5px;box-shadow:none}.hex{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:#4a4f5e}.nearest{display:inline-flex;align-items:center;gap:7px;background:#f6f7fa;border:1px solid #e6e8ee;border-radius:999px;padding:4px 14px 4px 6px;font-size:13.5px;color:#3c404e}.nearest-chip{width:17px;height:17px;border-radius:50%;border:1px solid rgba(20,20,40,.15);flex:none}.ripple-canvas{width:360px;height:360px;max-width:85vw;max-height:85vw;background:#05050d;border-radius:18px;box-shadow:0 14px 34px #14143238}.your-color{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 8px;flex-wrap:wrap}.your-name{margin-bottom:4px}.live-hints{margin-top:10px}.distance-word{font-size:20px;font-weight:700;letter-spacing:.04em;margin:0 0 2px;color:color-mix(in srgb,var(--accent) 62%,#23232e);transition:color .3s ease}.orb-row{display:flex;justify-content:center;gap:26px;margin:20px auto 2px}.orb-btn{--ch: #888;width:92px;height:92px;border-radius:50%;border:none;padding:5px;font-family:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 8px 20px #1e233c29,inset 0 0 0 1px #1414280f;transition:transform .08s ease,box-shadow .15s ease}.orb-btn.pressing{transform:scale(.93);box-shadow:0 3px 10px #1e233c2e,0 0 0 8px color-mix(in srgb,var(--ch) 22%,transparent)}.orb-btn.full{box-shadow:0 3px 10px #1e233c2e,0 0 24px 5px color-mix(in srgb,var(--ch) 55%,transparent)}.orb-btn:disabled{cursor:default;opacity:.5;box-shadow:none}.orb-core{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 -6px 12px #14143221,inset 0 3px 6px #ffffffa6,0 2px 6px #1e233c1f}.orb-letter{font-size:28px;font-weight:800;line-height:1.05}.orb-name{font-size:12px;opacity:.8}.tool-row{margin-top:12px}.ghost-btn{font-family:inherit;font-size:14px;padding:8px 24px;border-radius:999px;border:1px solid #dde1ea;background:#fff;color:#4a4f5e;cursor:pointer;transition:background .15s ease,transform .1s ease}.ghost-btn:hover{background:#f6f7fa}.ghost-btn:active{transform:scale(.96)}.ghost-btn:disabled{opacity:.5;cursor:default}.control-caption{font-size:12px;color:#9aa0ae;margin:8px 0 0;line-height:1.7}.rgb-values{font-size:13px;color:#8a8f9c;font-family:ui-monospace,Menlo,monospace}.charge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:480px;margin:16px auto 6px}.charge-btn{--ch: #888;position:relative;overflow:hidden;font-family:inherit;border-radius:16px;border:1.5px solid var(--ch);background:#fff;padding:12px 8px 10px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .08s ease,box-shadow .15s ease}.charge-btn:active{transform:scale(.97)}.charge-btn.charging{box-shadow:0 0 0 4px color-mix(in srgb,var(--ch) 28%,transparent)}.charge-btn:disabled{cursor:default;opacity:.55}.charge-fill{position:absolute;top:0;left:0;bottom:0;background:var(--ch);opacity:.16;pointer-events:none}.charge-btn.charging .charge-fill{opacity:.3}.charge-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px}.charge-name{font-size:13px;font-weight:600;color:var(--ch)}.charge-value{font-size:22px;font-weight:700;font-family:ui-monospace,Menlo,monospace;color:#23232e;line-height:1.15}.charge-hint{font-size:10.5px;color:#9aa0ae}.sliders{display:flex;flex-direction:column;gap:8px;margin:12px auto 16px;max-width:440px}.slider-row{display:grid;grid-template-columns:74px 1fr 40px;align-items:center;gap:10px;text-align:left;font-size:14px}.slider-name{font-weight:600}.slider-row input[type=range]{width:100%;height:28px;cursor:pointer}.slider-row input[type=range]:disabled{cursor:default;opacity:.55}.slider-value{text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:15px}.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}button.primary{font-family:inherit;font-size:17px;border-radius:999px;border:none;background:color-mix(in srgb,var(--accent) 76%,#1c1c28);color:#fff;font-weight:700;letter-spacing:.06em;padding:12px 38px;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .12s ease,filter .15s ease,background .3s ease}button.primary:hover{filter:brightness(1.07)}button.primary:active{transform:scale(.96)}.judge{margin-top:12px}.clear-title{font-size:23px;font-weight:800;letter-spacing:.04em;margin:6px 0 0;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}.judge-detail{font-size:13.5px;color:#6d7280;margin:2px 0 0}.judge-score{font-size:34px;font-weight:700;margin:6px 0;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{0%{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}.hints{list-style:none;padding:0;margin:8px 0 10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.hints li{background:#f2f4f8;border:1px solid #e3e6ee;border-radius:999px;padding:4px 14px;font-size:14px}.judge-names{font-size:13.5px;color:#6d7280;margin:2px 0 8px}.result-total{font-size:46px;font-weight:700;margin:4px 0 0;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}.result-rank{font-size:24px;font-weight:700;color:color-mix(in srgb,var(--accent) 70%,#23232e);margin:4px 0}.result-comment{color:#7a7f8c;margin:0 0 18px}.result-table{margin:0 auto 20px;border-collapse:collapse;font-size:14px}.result-table th,.result-table td{padding:6px 12px;border-bottom:1px solid #eceef3;text-align:left}.result-table th{color:#8a8f9c;font-weight:400}.zukan-card{text-align:left}.zukan-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.zukan-head h2{font-size:20px;font-weight:600;letter-spacing:.05em;margin:0}.zukan-count{font-size:13px;color:#8a8f9c}.zukan-search{width:100%;font-family:inherit;font-size:14.5px;padding:11px 15px;border-radius:12px;border:1px solid #dde1ea;background:#fbfcfe;color:#23232e;margin-bottom:16px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.zukan-search:focus{border-color:color-mix(in srgb,var(--accent) 55%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.zukan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}.color-chip{font-family:inherit;border:1px solid #e6e8ee;border-radius:14px;background:#fff;padding:0;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 2px 8px #1e233c0d;transition:transform .13s ease,box-shadow .13s ease}.color-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px #1e233c1f}.color-chip:active{transform:scale(.97)}.chip-color{display:flex;align-items:flex-end;height:54px;padding:5px 8px}.chip-hex{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.02em;opacity:.9}.chip-meta{display:flex;flex-direction:column;padding:6px 9px 8px}.chip-name{font-size:13.5px;font-weight:600;color:#2c2f3a}.chip-yomi{font-size:11px;color:#9aa0ae}.hint{font-size:13px;color:#8a8f9c;line-height:1.7}footer{margin-top:10px;font-size:12px;color:#a6abb8;line-height:1.7}@media (max-width: 480px){h1{font-size:24px}.tab{padding:8px 15px;font-size:13.5px}.orb-row{gap:18px}.orb-btn{width:80px;height:80px}.orb-letter{font-size:24px}.charge-name{font-size:11.5px}.charge-value{font-size:19px}.charge-hint{display:none}}