*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overscroll-behavior:none;background:#0a0a12;color:#e8e6f0;font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP",serif;-webkit-font-smoothing:antialiased}canvas{display:block;touch-action:none}button{font-family:inherit;cursor:pointer}.screen{min-height:100dvh;display:flex;flex-direction:column;padding:24px}.center{align-items:center;justify-content:center;text-align:center;gap:28px}.primary{background:linear-gradient(135deg,#2a2a45,#1a1a2e);color:#e8e6f0;border:1px solid #4a4a6a;border-radius:999px;padding:14px 44px;font-size:16px;letter-spacing:.2em;transition:opacity .2s,transform .2s}.primary:disabled{opacity:.35;cursor:default}.primary:not(:disabled):active{transform:scale(.97)}.ghost{background:none;border:none;color:#9a96b0;font-size:13px;letter-spacing:.15em;text-decoration:underline;text-underline-offset:4px}.app-title{font-size:34px;font-weight:500;letter-spacing:.45em;text-indent:.45em}.app-lead{font-size:14px;line-height:2.2;color:#b8b4c8;letter-spacing:.12em}.form-title{font-size:18px;font-weight:500;letter-spacing:.2em}.field{display:flex;flex-direction:column;gap:8px;width:min(320px,80vw);text-align:left}.field span{font-size:12px;color:#9a96b0;letter-spacing:.15em}.field input{background:#14141f;border:1px solid #33334d;border-radius:8px;padding:12px 14px;color:#e8e6f0;font-size:16px;font-family:inherit}.field input:focus{outline:none;border-color:#6a6a9a}.form-note{font-size:11px;color:#76728c;letter-spacing:.08em}.question{justify-content:center;gap:30px;max-width:560px;margin:0 auto;width:100%}.q-progress{color:#5a5675;font-size:11px;letter-spacing:.6em}.q-text{font-size:21px;font-weight:500;line-height:1.9;letter-spacing:.1em}.q-options{display:flex;flex-direction:column;gap:12px}.option{background:rgba(30,30,50,.55);border:1px solid #303050;border-radius:12px;padding:16px 18px;color:#d8d4e8;font-size:14.5px;line-height:1.7;letter-spacing:.06em;text-align:left;transition:border-color .2s,background .2s,transform .15s}.option:active{border-color:#8a86c0;background:rgba(50,50,80,.7);transform:scale(.985)}.result{padding:0;position:relative}.gem-canvas-wrap{position:absolute;inset:0}.gem-canvas-wrap canvas{width:100%;height:100%}.webgl-fallback{display:grid;place-items:center;height:100dvh;padding:24px;text-align:center;line-height:2}.fps-stats{top:8px;left:8px;font-family:monospace;font-size:11px;color:#9f9;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px}.fps-stats,.reveal-caption{position:absolute;pointer-events:none}.reveal-caption{bottom:56px;width:100%;text-align:center;font-size:13px;color:#b8b4c8;letter-spacing:.25em;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.45}50%{opacity:1}}.stone-name-vertical{position:absolute;top:max(40px,env(safe-area-inset-top));right:26px;writing-mode:vertical-rl;display:flex;gap:10px;pointer-events:none;animation:fadein 1.2s ease-out}.stone-kanji{font-size:30px;letter-spacing:.32em;text-shadow:0 0 18px rgba(0,0,0,.8)}.stone-reading{font-size:12px;color:#b8b4c8;letter-spacing:.4em;text-shadow:0 0 12px rgba(0,0,0,.8)}@keyframes fadein{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.result-footer{position:absolute;bottom:0;width:100%;padding:20px 24px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px;background:linear-gradient(transparent,rgba(8,8,16,.85) 55%);animation:fadein 1.2s ease-out .3s backwards}.stone-desc{font-size:13px;color:#c8c4d8;letter-spacing:.1em;line-height:1.9;text-align:center}.result-actions{display:flex;align-items:center;gap:22px}.save-note{font-size:11px;color:#9a96b0;letter-spacing:.1em}.app-header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 22px 12px;pointer-events:none}.app-header a{pointer-events:auto;text-decoration:none;color:#b8b4c8}.app-header-title{font-size:13px;letter-spacing:.28em;color:#8e8aa6}.app-header-link{font-size:12px;letter-spacing:.22em;color:#b8b4c8;border:1px solid #33334d;border-radius:999px;padding:6px 16px;transition:border-color .2s,color .2s}.app-header-link:active{border-color:#8a86c0;color:#e8e6f0}.gemlist{padding:0 16px 40px;gap:0;max-width:920px;margin:0 auto;width:100%}.gemlist-header{text-align:center;padding:78px 0 26px}.gemlist-title{font-size:26px;font-weight:500;letter-spacing:.4em;text-indent:.4em}.gemlist-lead{margin-top:12px;font-size:12px;color:#8e8aa6;letter-spacing:.1em}.gem-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}@media (min-width:560px){.gem-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:820px){.gem-grid{grid-template-columns:repeat(4,1fr)}}.gem-card{display:flex;flex-direction:column;gap:10px;padding:12px 12px 16px;border-radius:14px;border:1px solid #1e1e30;background:linear-gradient(160deg,rgba(26,26,42,.5),rgba(12,12,22,.5));text-decoration:none;color:inherit;transition:border-color .2s,transform .15s,background .2s}.gem-card:active{transform:scale(.98);border-color:#6a6a9a}@media (hover:hover){.gem-card:hover{border-color:#4a4a6a;background:linear-gradient(160deg,rgba(34,34,54,.6),rgba(14,14,26,.6))}}.gem-card-thumb{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;background-color:#0a0a12;background-size:cover;background-position:50%}.gem-card-thumb.is-loading{background-image:linear-gradient(100deg,#14141f 30%,#1e1e30 50%,#14141f 70%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.gem-card-name{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}.gem-card-kanji{font-size:16px;letter-spacing:.18em;color:#e8e6f0}.gem-card-reading{font-size:10px;letter-spacing:.2em;color:#8e8aa6}.back-link{position:absolute;top:max(20px,env(safe-area-inset-top));left:18px;z-index:10;font-size:12px;letter-spacing:.16em;color:#c8c4d8;text-decoration:none;background:rgba(8,8,16,.5);border:1px solid #2a2a40;border-radius:999px;padding:7px 16px;text-shadow:0 0 10px rgba(0,0,0,.8)}.back-link:active{border-color:#8a86c0}