*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,Noto Sans JP,system-ui,sans-serif;background-color:#f2f3f5;color:#2e3338}html,body{height:100%}body{font-size:16px;line-height:1.5;background:#f2f3f5;color:#2e3338}button{background:none;border:none;cursor:pointer;font:inherit}textarea,select,input{font:inherit}.counter-display{cursor:default;-webkit-user-select:none;user-select:none;font-size:6rem;font-weight:700;padding:1rem 2rem;border-radius:8px;min-width:280px;width:100%;text-align:center;background:transparent;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0}.counter-unit{margin-left:.2em;font-size:.4em;font-weight:400;line-height:1}.counter-display-number{font-variant-numeric:tabular-nums;transition:transform .1s;order:0;line-height:1}.counter-display-number.interactive:active{transform:scale(.95)}.counter-display-number.count-up{animation:countUpAnimation .3s ease-out}@keyframes countUpAnimation{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.counter-section{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1rem;border-radius:12px;background:#fff;box-shadow:0 2px 8px #0000001a;min-width:280px;width:100%;max-width:440px;margin:0 auto}.counter-hint{margin:0;font-size:.75rem;color:#666;text-align:center}.reset-button{padding:.625rem 1.25rem;font-size:.75rem;font-weight:600;color:#fff;background:#f87171;border:none;border-radius:10px;cursor:pointer;transition:background .2s ease;width:auto;max-width:160px}.reset-button:hover{background:#ef4444;cursor:pointer}.reset-button:active{background:#dc2626}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:flex-start;z-index:1000;animation:fadeIn .2s ease-out;padding:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:calc(800px - 2rem);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease-out;margin:0 auto}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1rem;border-bottom:1px solid #e5e7eb}.modal-title{margin:0;font-size:1.125rem;font-weight:600;color:#1f2937}.modal-close{background:none;border:none;font-size:2rem;line-height:1;color:#9ca3af;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.modal-close:hover{background:#f3f4f6;color:#4b5563}.modal-body{padding:1.5rem 1rem;overflow-y:auto}.modal-body p{margin:0;margin-top:1.25rem;font-size:.875rem;line-height:1.7;color:#4b5563}.modal-body p:first-child{margin-top:0}.modal-body p:has(strong){margin-bottom:.5rem}.modal-body p:has(strong)+p{margin-top:.75rem}.modal-body strong{color:#1f2937;font-weight:600;display:block;margin-bottom:.25rem}.modal-body pre{background:#f3f4f6;padding:1rem;margin:.75rem 0 0;border-radius:8px;font-size:.8125rem;line-height:1.5;overflow-x:auto;color:#374151}.modal-body p:has(strong)+pre{margin-top:.5rem}.usage-section{width:100%;margin-top:1rem}.usage-title{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#374151;text-align:center}.accordion{display:flex;flex-direction:column;gap:.5rem;width:100%}.accordion-item{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff}.accordion-header{width:100%;padding:.875rem 1rem;display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:#374151;transition:background .2s;text-align:left}.accordion-header:hover{background:#f3f4f6}.accordion-header.active{background:#e0e7ff;color:#4f46e5}.accordion-icon{font-size:1.125rem;font-weight:700;color:#6b7280;min-width:20px;text-align:center}.accordion-header.active .accordion-icon{color:#4f46e5}.dual-action-button{width:100%;gap:.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.dual-action-button-main{width:100%;max-width:220px;padding:.75rem 1rem;font-size:1rem;font-weight:600;color:#1d4ed8;background:#e0f2ff;border:none;border-radius:12px;cursor:pointer;transition:background .15s ease}.dual-action-button-main:hover{background:#dbeafe;cursor:pointer}.dual-action-button-main:active{background:#bfdbfe}.dual-action-helper{font-size:.7rem;color:#64748b}.text-input{padding:.5rem .875rem;border:2px solid #e1e5e9;border-radius:8px;font-size:.875rem;width:100%;outline:none;background-color:#fff;color:#333;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.text-input:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #00000014}.text-input:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a,0 2px 4px #0000001a;background-color:#fff}.text-input::placeholder{color:#a0aec0;opacity:1}.combobox-container{position:relative;width:100%}.combobox-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;background-color:transparent;border:1px solid hsl(240 5.9% 90%);border-radius:.375rem;cursor:pointer;transition:all .2s}.combobox-trigger:hover{background-color:#f4f4f5}.combobox-trigger:focus{outline:none;border-color:#18181b}.combobox-trigger:disabled{cursor:not-allowed;opacity:.5}.combobox-value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combobox-icon{width:1rem;height:1rem;opacity:.5;flex-shrink:0;margin-left:.5rem}.combobox-content{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:50;background-color:#fff;border:1px solid hsl(240 5.9% 90%);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;max-height:24rem;overflow:hidden;animation:combobox-in .15s ease-out}@keyframes combobox-in{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}.combobox-search{padding:.5rem;border-bottom:1px solid hsl(240 5.9% 90%)}.combobox-input{width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem;background-color:transparent;border:1px solid hsl(240 5.9% 90%);border-radius:.25rem;outline:none}.combobox-input:focus{border-color:#18181b}.combobox-list{max-height:20rem;overflow-y:auto;padding:.25rem}.combobox-item{display:flex;align-items:center;width:100%;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;text-align:left;background-color:transparent;border:none;border-radius:.25rem;cursor:pointer;transition:background-color .15s}.combobox-item:hover,.combobox-item-selected{background-color:#f4f4f5}.combobox-check{width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0}.combobox-check-visible{opacity:1}.combobox-check-hidden{opacity:0}.combobox-empty{padding:.5rem .75rem;font-size:.875rem;text-align:center;color:#71717a}.slider-root{position:relative;display:flex;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;height:20px;cursor:pointer}.slider-root[data-disabled]{cursor:not-allowed;opacity:.5}.slider-track{position:relative;height:6px;width:100%;flex-grow:1;overflow:hidden;border-radius:9999px;background:#d4dce5}.slider-range{position:absolute;height:100%;background:#5865f2;transition:background-color .15s}.slider-root:hover .slider-range{background:#4752c4}.slider-thumb{display:block;height:18px;width:18px;border-radius:9999px;border:2px solid #5865f2;background:#fff;box-shadow:0 2px 4px #0000001a;transition:all .15s;cursor:grab}.slider-thumb:hover{border-color:#4752c4;box-shadow:0 2px 8px #5865f24d;transform:scale(1.1)}.slider-thumb:active{cursor:grabbing;transform:scale(1.05);box-shadow:0 2px 8px #5865f266}.slider-thumb:focus{outline:none;border-color:#5865f2;box-shadow:0 0 0 3px #5865f233}.slider-thumb[data-disabled]{pointer-events:none;cursor:not-allowed}.builder-page{min-height:100vh;padding:2.5rem 1.25rem 3rem;background:#f2f3f5;color:#2e3338}.builder-header{max-width:960px;margin:0 auto 2rem;text-align:center}.kicker{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#5865f2}.builder-header h1{font-size:clamp(2rem,4vw,2.6rem);font-weight:700;margin-bottom:.5rem}.builder-header .description{color:#4e5058;margin:0 auto;max-width:640px}.booth-link{margin-top:1rem}.booth-link a{display:inline-block;background:#fc4d50;color:#fff;padding:.6rem 1.5rem;border-radius:.375rem;font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color .15s}.booth-link a:hover{background:#e04346}.booth-link a:active{background:#c93a3d}.builder-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem}.preview-card,.controls-card{background:#fff;border:1px solid #d4dce5;border-radius:.5rem;padding:1.5rem;box-shadow:0 2px 10px #0000000d}.preview-card{display:flex;flex-direction:column;gap:1rem}.preview-content{position:sticky;top:1.5rem}.preview-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#4e5058}.counter-preview{min-height:260px;border-radius:.5rem;border:1px solid #d4dce5;background:#f6f7f9;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1rem}.counter-preview .counter-display{width:auto;padding:0;background:transparent;color:var(--preview-color);font-size:var(--preview-font-size);font-weight:var(--preview-font-weight);font-family:var(--preview-font-family);flex-direction:var(--preview-display-direction, row)}.counter-preview .counter-unit{font-size:var(--preview-unit-font-size);font-weight:var(--preview-unit-weight);order:var(--preview-unit-order, 1);margin-right:var(--preview-unit-margin-right, 0);margin-left:var(--preview-unit-margin-left, 0);margin-top:var(--preview-unit-margin-top, 0);align-self:var(--preview-unit-align-self, auto)}.counter-preview .counter-display-number{align-self:var(--preview-number-align-self, auto)}.unit-bottom-wrapper{flex-direction:column}.counter-display{letter-spacing:.05em}.counter-unit{font-size:1rem;letter-spacing:.2em}.preview-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.preview-input-group{display:flex;flex-direction:column;gap:.4rem}.preview-input-label{font-size:.8125rem;font-weight:600;color:#4e5058}.preview-input{height:38px;border-radius:.25rem;border:1px solid #d4dce5;background:#f6f7f9;color:#2e3338;padding:0 .75rem;font-size:.875rem;transition:border-color .15s,background-color .15s}.preview-input:hover{border-color:#b9c0ca}.preview-input:focus{border-color:#5865f2;background:#fff;outline:none}.preview-input[type=number]{font-variant-numeric:tabular-nums}.preview-helper{color:#6a7480;font-size:.875rem;margin-top:.5rem}.controls-card{display:flex;flex-direction:column;gap:1rem}.control-group{display:flex;flex-direction:column;gap:.4rem}.control-label{font-size:.875rem;font-weight:600;color:#2e3338;display:flex;align-items:center;justify-content:space-between}.control-label .value{font-weight:600;color:#2e3338}.control-group select{height:38px;border-radius:.25rem;border:1px solid #d4dce5;background:#f6f7f9;color:#2e3338;padding:0 .75rem;transition:border-color .15s,background-color .15s}.control-group select:hover{border-color:#b9c0ca}.control-group select:focus{border-color:#5865f2;background:#fff}.color-picker-wrapper .react-colorful{width:100%}.control-group input[type=text]{height:42px;border-radius:.25rem;border:1px solid #d4dce5;background:#f6f7f9;color:#2e3338;padding:0 .75rem;transition:border-color .15s,background-color .15s}.control-group input[type=text]:hover{border-color:#b9c0ca}.control-group input[type=text]:focus{border-color:#5865f2;background:#fff}.local-font-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.local-font-button{background:#5865f2;color:#fff;border-radius:.25rem;padding:.4rem 1rem;font-weight:500;font-size:.875rem;transition:background-color .15s}.local-font-button:hover{background:#4752c4}.local-font-button:active{background:#3c45a5}.control-hint{font-size:.8125rem;color:#4e5058;margin-top:.4rem}.control-hint.error{color:#f23f42}.segmented-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.segment{border-radius:.25rem;border:1px solid #d4dce5;padding:.5rem .75rem;text-align:center;background:#f6f7f9;position:relative;cursor:pointer;color:#4e5058;font-weight:500;font-size:.875rem;transition:all .15s ease}.segment:hover:not(.active){background:#ebedef;border-color:#b9c0ca}.segment input{position:absolute;opacity:0;inset:0;cursor:pointer}.segment.active{background:#5865f2;color:#fff;border-color:#5865f2;box-shadow:0 2px 4px #5865f24d}.output-card{margin-top:.5rem;background:#f6f7f9;border:1px solid #d4dce5;border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.output-head{display:flex;align-items:center;justify-content:space-between}.output-head button{background:#5865f2;color:#fff;border-radius:.25rem;padding:.45rem 1.2rem;font-weight:500;font-size:.875rem;border:none;transition:background-color .15s}.output-head button:hover{background:#4752c4}.output-head button:active{background:#3c45a5}.output-card textarea{width:100%;min-height:180px;border-radius:.25rem;background:#fff;border:1px solid #d4dce5;color:#2e3338;padding:.75rem;font-family:JetBrains Mono,SF Mono,Consolas,monospace;font-size:.8125rem;resize:vertical;white-space:pre-wrap;transition:border-color .15s}.output-card textarea:focus{border-color:#5865f2;outline:none}.copy-status{font-size:.8125rem;color:#3ba55d;font-weight:500;margin:0}@media(max-width:1024px){.builder-grid{grid-template-columns:1fr}}@media(max-width:640px){.builder-page{padding:1.5rem 1rem 2rem}.controls-card{padding:1.25rem}.output-card textarea{min-height:160px}}