*,:before,:after{box-sizing:border-box}body{margin:0}img{max-width:100%;display:block}:root{--bg:#fdf8f4;--bg2:#fef4f7;--surface:#fff;--border:#e8d8cc;--text:#5c4a3a;--text-secondary:#8a7060;--heading:#3a2a1a;--pink:#f5b8c4;--pink-dark:#e8839a;--green:#a8d5a2;--green-dark:#6dbf6b;--lavender:#c4b0f5;--lavender-dark:#9c7ee8;--sky:#b8d4f5;--sky-dark:#6ea8e8;--honey:#f5d8a0;--honey-dark:#e8b84b;--accent:var(--pink-dark);--accent-bg:#f5b8c433;--shadow:0 4px 20px #b478641f;--shadow-hover:0 8px 32px #b4786438;--radius:16px;--radius-sm:8px;--radius-lg:24px;--sans:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--heading-font:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}*{box-sizing:border-box}body{min-height:100svh;margin:0}#root{flex-direction:column;width:100%;min-height:100svh;display:flex}#root-inner{flex-direction:column;min-height:100svh;display:flex}h1,h2,h3{font-family:var(--heading-font);color:var(--heading);font-weight:700;line-height:1.3}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:var(--sans)}.site-header{background:var(--surface);border-bottom:2px solid var(--pink);z-index:100;position:sticky;top:0;box-shadow:0 2px 12px #f5b8c440}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:14px 24px;display:flex}.logo-area{align-items:center;gap:10px;text-decoration:none;display:flex}.logo-cat{font-size:28px}.logo-text{flex-direction:column;line-height:1.1;display:flex}.logo-ja{color:var(--heading);letter-spacing:2px;font-size:20px;font-weight:900}.logo-en{color:var(--text-secondary);letter-spacing:.5px;font-size:11px}.header-nav{align-items:center;gap:20px;display:flex}.header-nav a{color:var(--text);border-radius:var(--radius-sm);padding:6px 12px;font-size:14px;font-weight:500;transition:background .2s,color .2s}.header-nav a:hover{background:var(--accent-bg);color:var(--accent);text-decoration:none}.header-flowers{background:linear-gradient(90deg, var(--pink) 0%, var(--honey) 50%, var(--green) 100%);opacity:.7;justify-content:center;gap:12px;padding:4px 0;font-size:16px;display:flex}.hero-section{text-align:center;background:linear-gradient(135deg,#fef4f7 0%,#fdf9ee 50%,#f4fdf4 100%);padding:80px 24px 64px;position:relative;overflow:hidden}.hero-content{z-index:1;max-width:680px;margin:0 auto;position:relative}.hero-cat{margin-bottom:20px;font-size:72px;animation:3s ease-in-out infinite float;display:block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-title{flex-direction:column;align-items:center;gap:6px;margin:0 0 20px;display:flex}.hero-title-ja{color:var(--heading);letter-spacing:6px;font-size:56px;font-weight:900}.hero-title-sub{color:var(--text-secondary);letter-spacing:1px;font-size:20px;font-weight:400}.hero-desc{color:var(--text-secondary);margin-bottom:28px;font-size:16px;line-height:1.8}.hero-badges{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.badge{background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:500}.hero-deco{pointer-events:none;position:absolute;inset:0}.deco-flower{opacity:.5;font-size:28px;animation:4s ease-in-out infinite sway;position:absolute}.deco-1{animation-delay:0s;top:10%;left:5%}.deco-2{animation-delay:.7s;top:20%;right:8%}.deco-3{animation-delay:1.4s;bottom:15%;left:10%}.deco-4{animation-delay:2.1s;top:60%;right:5%}.deco-5{animation-delay:.3s;bottom:5%;right:20%}.deco-stone{opacity:.4;font-size:24px;position:absolute;bottom:8%;left:30%}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.app-grid-section{width:100%;max-width:1100px;margin:0 auto;padding:48px 24px}.section-tabs{justify-content:center;gap:10px;margin-bottom:36px;display:flex}.tab-btn{background:var(--surface);border:2px solid var(--border);color:var(--text);border-radius:100px;padding:8px 20px;font-size:14px;font-weight:600;transition:all .2s}.tab-btn:hover{border-color:var(--pink);color:var(--accent)}.tab-btn.active{background:var(--pink);border-color:var(--pink-dark);color:var(--heading);box-shadow:0 3px 10px #f5b8c480}.app-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.app-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);color:var(--text);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:24px 20px 20px;text-decoration:none;transition:all .2s;display:flex;position:relative;overflow:hidden}.app-card:hover{border-color:var(--pink);box-shadow:var(--shadow-hover);text-decoration:none;transform:translateY(-4px)}.card-emoji{font-size:40px;line-height:1}.card-new-badge{background:var(--pink-dark);color:#fff;letter-spacing:.5px;border-radius:100px;padding:2px 8px;font-size:10px;font-weight:700;position:absolute;top:12px;right:12px}.card-body{flex:1}.card-tag{color:var(--heading);border-radius:100px;margin-bottom:8px;padding:2px 10px;font-size:11px;font-weight:700;display:inline-block}.card-title{color:var(--heading);margin:0 0 6px;font-size:17px;font-weight:700}.card-desc{color:var(--text-secondary);font-size:13px;line-height:1.5}.card-arrow{text-align:right;color:var(--text-secondary);font-size:18px;transition:transform .2s}.app-card:hover .card-arrow{color:var(--accent);transform:translate(4px)}.about-section{background:linear-gradient(135deg,#fef4f7 0%,#f4fdf4 100%);padding:64px 24px}.about-inner{text-align:center;max-width:700px;margin:0 auto}.about-cat{margin-bottom:16px;font-size:64px}.about-title{margin:0 0 20px;font-size:28px}.about-body{color:var(--text-secondary);margin-bottom:40px;font-size:15px;line-height:1.9}.about-stats{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.stat-item{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:6px;padding:20px;display:flex}.stat-num{color:var(--accent);font-size:32px;font-weight:900}.stat-label{color:var(--text-secondary);font-size:12px}.site-footer{background:var(--heading);color:#ffffffb3;text-align:center;margin-top:auto;padding:32px 24px 24px}.footer-deco{letter-spacing:8px;opacity:.5;margin-bottom:20px;font-size:18px}.footer-inner{flex-direction:column;align-items:center;gap:8px;display:flex}.footer-logo{align-items:center;gap:8px;font-size:20px;display:flex}.footer-logo-cat{font-size:24px}.footer-logo-name{color:#fff;letter-spacing:2px;font-weight:700}.footer-copy{margin:0;font-size:13px}.footer-cr{opacity:.5;margin:0;font-size:12px}.page-wrapper{width:100%;max-width:860px;margin:0 auto;padding:24px 24px 64px}.back-link{color:var(--text-secondary);border:1.5px solid var(--border);border-radius:100px;margin-bottom:24px;padding:6px 14px;font-size:14px;font-weight:500;transition:all .2s;display:inline-block}.back-link:hover{border-color:var(--pink);color:var(--accent);text-decoration:none}.tool-page,.game-page{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px 36px}.tool-title,.game-title{margin:0 0 8px;font-size:26px}.tool-desc,.game-desc{color:var(--text-secondary);margin:0 0 32px;font-size:14px}.btn-go{background:var(--pink-dark);color:#fff;border-radius:var(--radius-sm);border:none;margin-top:12px;padding:10px 24px;font-size:15px;font-weight:700;transition:all .2s}.btn-go:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 4px 14px #e8839a66}.btn-go.large{padding:14px 40px;font-size:18px}.btn-go:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-reset{background:var(--surface);color:var(--text);border:2px solid var(--border);border-radius:var(--radius-sm);padding:7px 16px;font-size:13px;font-weight:600;transition:all .2s}.btn-reset:hover{border-color:var(--pink);color:var(--accent)}.btn-clear{color:var(--pink-dark);border:2px solid var(--pink);border-radius:var(--radius-sm);background:#fff0f4;margin-top:8px;padding:7px 16px;font-size:13px;font-weight:600;transition:all .2s}.btn-clear:hover{background:var(--pink);color:#fff}.copy-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:14px;transition:all .2s}.copy-btn:hover{border-color:var(--green-dark)}.game-meta{flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:20px;font-size:15px;display:flex}.game-clear{border:2px solid var(--green-dark);border-radius:var(--radius-sm);color:#166534;background:#f0fdf4;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;padding:16px 24px;font-size:16px;font-weight:700;display:flex}.card-grid{grid-template-columns:repeat(4,1fr);gap:12px;max-width:540px;display:grid}.mem-card{aspect-ratio:1;background:var(--pink);border:3px solid var(--pink-dark);border-radius:var(--radius);justify-content:center;align-items:center;font-size:0;transition:all .25s;display:flex;position:relative;overflow:hidden}.mem-card:hover:not(.flipped):not(.matched){background:var(--pink-dark);transform:scale(1.04)}.mem-card .card-front{font-size:36px;display:none}.mem-card .card-back{font-size:26px;display:block}.mem-card.flipped .card-front{display:block}.mem-card.flipped .card-back{display:none}.mem-card.matched{background:var(--green);border-color:var(--green-dark);cursor:default}.color-main{flex-wrap:wrap;align-items:flex-start;gap:32px;margin-bottom:40px;display:flex}.color-preview{border-radius:var(--radius);border:3px solid var(--border);width:160px;height:160px;box-shadow:var(--shadow);flex-shrink:0;justify-content:center;align-items:flex-end;padding-bottom:12px;transition:background-color .3s;display:flex}.preview-label{color:#333;background:#ffffffd9;border-radius:100px;padding:3px 10px;font-family:monospace;font-size:13px;font-weight:700}.color-inputs{flex-direction:column;flex:1;gap:16px;min-width:260px;display:flex}.input-group{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.input-group label{width:80px;color:var(--text-secondary);font-size:13px;font-weight:700}.input-group input[type=text],.input-group input[type=number]{border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--heading);background:var(--bg);width:140px;padding:7px 12px;font-family:monospace;font-size:14px;transition:border-color .2s}.input-group input:focus{border-color:var(--pink-dark);outline:none}.rgb-trio{gap:8px;display:flex}.rgb-item{flex-direction:column;align-items:center;gap:4px;display:flex}.rgb-item span{color:var(--text-secondary);font-size:11px;font-weight:700}.rgb-item input{border:2px solid var(--border);border-radius:var(--radius-sm);text-align:center;background:var(--bg);width:64px;padding:6px 8px;font-size:14px}.rgb-item input:focus{border-color:var(--pink-dark);outline:none}.hsl-display{color:var(--heading);background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;font-family:monospace;font-size:14px}.color-picker{border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface);width:56px;height:40px;padding:2px}.palette-section h3{margin:0 0 12px;font-size:16px}.palette-row{flex-wrap:wrap;gap:12px;display:flex}.palette-swatch{border-radius:var(--radius-sm);border:2px solid #00000014;justify-content:center;align-items:flex-end;width:72px;height:56px;padding-bottom:4px;transition:all .2s;display:flex;box-shadow:0 2px 8px #00000014}.palette-swatch:hover{box-shadow:var(--shadow-hover);transform:scale(1.08)}.swatch-name{color:#333;background:#fffc;border-radius:100px;padding:1px 6px;font-size:10px;font-weight:600}.unit-tabs{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.unit-form{flex-direction:column;gap:10px;max-width:480px;display:flex}.unit-row{align-items:center;gap:12px;display:flex}.unit-input{border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--heading);background:var(--bg);flex:1;padding:10px 14px;font-family:monospace;font-size:18px;transition:border-color .2s}.unit-input:focus{border-color:var(--pink-dark);outline:none}.unit-select{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--heading);cursor:pointer;min-width:100px;padding:10px 14px;font-size:14px}.unit-result{border:2px solid var(--green-dark);border-radius:var(--radius-sm);color:var(--heading);background:#f0fdf4;flex:1;padding:10px 14px;font-family:monospace;font-size:22px;font-weight:700}.unit-arrow{text-align:center;color:var(--text-secondary);font-size:20px}.date-card{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);margin-bottom:20px;padding:24px}.date-card h3{margin:0 0 16px;font-size:16px}.date-row{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;display:flex}.date-group{flex-direction:column;gap:4px;display:flex}.date-group label{color:var(--text-secondary);font-size:12px;font-weight:700}.date-group input{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--heading);padding:8px 12px;font-size:14px}.date-group input:focus{border-color:var(--pink-dark);outline:none}.date-sep{color:var(--text-secondary);margin-top:20px;font-size:20px}.date-result{color:var(--text);background:var(--accent-bg);border-radius:var(--radius-sm);border:1.5px solid var(--pink);padding:10px 16px;font-size:16px}.date-result strong{color:var(--accent)}.text-area{border:2px solid var(--border);border-radius:var(--radius);width:100%;font-size:14px;font-family:var(--sans);color:var(--heading);background:var(--bg);resize:vertical;padding:14px 16px;line-height:1.7;transition:border-color .2s}.text-area:focus{border-color:var(--pink-dark);outline:none}.text-stats{flex-wrap:wrap;gap:12px;margin:16px 0;display:flex}.stat-box{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:2px;min-width:90px;padding:12px 16px;display:flex}.stat-n{color:var(--accent);font-family:monospace;font-size:22px;font-weight:900}.stat-box span:last-child{color:var(--text-secondary);font-size:11px}.text-actions{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.tool-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:7px 14px;font-size:13px;font-weight:600;transition:all .2s}.tool-btn:hover{border-color:var(--lavender-dark);color:var(--lavender-dark);background:#c4b0f51a}.base-form{margin-bottom:28px}.base-results{flex-direction:column;gap:10px;display:flex}.base-result-row{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:12px;padding:12px 16px;display:flex}.base-label{color:var(--text-secondary);min-width:160px;font-size:13px;font-weight:700}.base-value{color:var(--heading);word-break:break-all;flex:1;font-family:monospace;font-size:16px;font-weight:700}.random-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;display:grid}.random-card{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:24px;display:flex}.random-card h3{margin:0;font-size:17px}.lot-textarea{border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;font-size:13px;font-family:var(--sans);color:var(--heading);background:var(--surface);resize:vertical;padding:10px 12px}.lot-textarea:focus{border-color:var(--green-dark);outline:none}.range-row{align-items:center;gap:8px;display:flex}.range-row .unit-input{flex:none;width:90px;padding:8px 10px;font-size:15px}.random-result{color:var(--heading);background:var(--accent-bg);border:1.5px solid var(--pink);border-radius:var(--radius-sm);text-align:center;padding:10px 14px;font-size:17px;font-weight:700}.random-result.big{font-family:monospace;font-size:36px}.result-sub{color:var(--text-secondary);margin-left:8px;font-size:13px;font-weight:400}.sign-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:32px;display:grid}.sign-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);font-family:var(--sans);flex-direction:column;align-items:center;gap:4px;padding:12px 8px;transition:all .2s;display:flex}.sign-btn:hover{border-color:var(--lavender-dark);transform:translateY(-2px)}.sign-btn.active{background:var(--lavender);border-color:var(--lavender-dark);box-shadow:0 4px 14px #c4b0f566}.sign-emoji{font-size:24px}.sign-name{color:var(--heading);font-size:13px;font-weight:700}.sign-period{color:var(--text-secondary);font-size:10px}.fortune-card{border:2px solid var(--lavender);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fef4f7 0%,#f9f4fe 100%);padding:32px;box-shadow:0 4px 24px #c4b0f540}.fortune-header{justify-content:center;align-items:center;gap:12px;margin-bottom:20px;display:flex}.fortune-sign-emoji{font-size:40px}.fortune-sign-name{color:var(--heading);font-size:22px;font-weight:900}.fortune-cat{font-size:32px}.fortune-overall{color:var(--text);text-align:center;margin-bottom:20px;font-size:16px;line-height:1.7}.fortune-details{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:16px;display:flex}.fortune-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);flex:1;min-width:200px;padding:10px 18px;font-size:14px}.fortune-neko{text-align:center;color:var(--text-secondary);font-size:13px;font-style:italic}.typing-meta{flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:24px;font-size:16px;display:flex}.timer{color:var(--green-dark);border:2px solid var(--green-dark);border-radius:var(--radius-sm);background:#f0fdf4;padding:6px 14px;font-family:monospace;font-size:20px;font-weight:900}.timer.danger{color:#dc2626;background:#fef2f2;border-color:#dc2626;animation:.5s ease-in-out infinite alternate pulse}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.06)}}.typing-area{flex-direction:column;align-items:center;gap:20px;display:flex}.target-word{letter-spacing:4px;color:var(--heading);min-height:72px;font-size:48px;font-weight:900}.typing-input{border:3px solid var(--green-dark);border-radius:var(--radius);font-size:24px;font-family:var(--sans);color:var(--heading);background:var(--bg);text-align:center;width:100%;max-width:420px;padding:14px 24px;transition:border-color .2s}.typing-input:focus{border-color:var(--pink-dark);outline:none;box-shadow:0 0 0 4px #f5b8c44d}@media (width<=768px){.hero-title-ja{font-size:40px}.hero-cat{font-size:56px}.header-nav{display:none}.tool-page,.game-page{padding:24px 18px}.card-grid{grid-template-columns:repeat(3,1fr)}.about-stats{grid-template-columns:repeat(3,1fr);gap:10px}.color-main{flex-direction:column}.color-preview{width:100%;height:100px}}@media (width<=480px){.card-grid{grid-template-columns:repeat(2,1fr)}.app-grid{grid-template-columns:1fr}}