:root{--papier: #f6f3ec;--encre: #161310;--discret: #8b8378;--trait: rgba(22, 19, 16, .12);--fond-panneau: #fbf9f4}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--papier);color:var(--encre);font-family:Hiragino Mincho ProN,Yu Mincho,Songti SC,Georgia,serif;font-weight:400;-webkit-font-smoothing:antialiased}#scene{display:grid;grid-template-columns:1fr 280px;height:100vh}#stage{display:flex;align-items:center;justify-content:center;padding:3rem}#specimen{width:min(72vh,100%);height:min(72vh,100%);aspect-ratio:1 / 1}.toile-specimen{width:100%;height:100%;display:block}#panel{background:var(--fond-panneau);border-left:1px solid var(--trait);padding:2.4rem 1.8rem;display:flex;flex-direction:column;gap:2rem;overflow-y:auto}.titre{display:flex;flex-direction:column;gap:.3rem}.titre .kanji{font-size:1.5rem;letter-spacing:.15em}.titre .romaji{font-size:.7rem;letter-spacing:.35em;color:var(--discret);text-transform:lowercase}.controles{display:flex;flex-direction:column;gap:1.7rem}.rang{display:flex;flex-direction:column;gap:.55rem}.tete{display:flex;justify-content:space-between;align-items:baseline}.tete-droite{display:flex;align-items:baseline;gap:.5rem}.valeur{font-size:.66rem;letter-spacing:.06em;color:var(--discret);font-variant-numeric:tabular-nums}.etiquette{font-size:.9rem;letter-spacing:.02em;cursor:default}.valeur{font-family:SFMono-Regular,ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--discret);font-variant-numeric:tabular-nums}.bornes{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.04em;color:var(--discret)}.groupe{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--discret);border-top:1px solid var(--trait);padding-top:1.4rem;margin-top:.4rem}.section{margin-top:.9rem}.section-tete{width:100%;appearance:none;border:none;border-bottom:1px solid var(--encre);background:none;color:var(--encre);font-family:inherit;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;padding:1.5rem 0 .45rem;margin-bottom:.3rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.section-tete .chev{font-size:.9rem}.section-corps{display:flex;flex-direction:column;gap:1.7rem;padding-top:.8rem}.tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--trait);border:1px solid var(--trait)}.tab{flex:1 0 auto;appearance:none;border:none;background:var(--fond-panneau);color:var(--discret);font-family:inherit;font-size:.72rem;padding:.35rem .5rem;cursor:pointer}.tab.actif{background:var(--encre);color:var(--papier)}.verrou{appearance:none;border:none;background:none;color:var(--discret);font-size:.85rem;line-height:1;padding:0 0 0 .5rem;cursor:pointer}.verrou.actif{color:var(--encre)}.actions{display:flex;gap:.6rem;margin-top:.4rem}.action{flex:1;appearance:none;border:1px solid var(--trait);background:var(--fond-panneau);color:var(--encre);font-family:inherit;font-size:.82rem;letter-spacing:.02em;padding:.55rem 0;cursor:pointer}.action:hover{background:var(--encre);color:var(--papier)}.action-large{flex:1;background:var(--encre);color:var(--papier)}.action-large:hover{opacity:.85}.toast{position:fixed;bottom:1.6rem;left:50%;transform:translate(-50%) translateY(.6rem);background:var(--encre);color:var(--papier);font-size:.78rem;letter-spacing:.03em;padding:.5rem 1rem;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.toast.vu{opacity:1;transform:translate(-50%) translateY(0)}.courbe{width:100%;height:96px;cursor:crosshair;touch-action:none}.segmente{display:flex;gap:1px;background:var(--trait);border:1px solid var(--trait)}.segmente button{flex:1;appearance:none;border:none;background:var(--fond-panneau);color:var(--discret);font-family:inherit;font-size:.8rem;padding:.4rem 0;cursor:pointer;letter-spacing:.02em}.segmente button.actif{background:var(--encre);color:var(--papier)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--trait);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--encre);border:none}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--encre);border:none}#verif{max-width:1100px;margin:0 auto;padding:3rem 2.4rem 5rem}.verif-tete{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;border-bottom:1px solid var(--trait);padding-bottom:1.2rem;margin-bottom:2rem}.verif-tete .kanji{font-size:1.5rem;letter-spacing:.15em}.verif-titre{color:var(--encre);letter-spacing:.04em}.verif-compte{font-size:.72rem;color:var(--discret);margin-left:auto;font-family:SFMono-Regular,ui-monospace,monospace}.verif-section{font-size:.82rem;font-weight:400;color:var(--discret);letter-spacing:.08em;margin:2.4rem 0 1rem}.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem}#grille-kana{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.cellule{display:flex;flex-direction:column;align-items:center;gap:.3rem}.cellule figcaption{font-size:.68rem;color:var(--discret);font-variant-numeric:tabular-nums}@media(max-width:720px){#scene{grid-template-columns:1fr;grid-template-rows:1fr auto}#panel{border-left:none;border-top:1px solid var(--trait)}}.pied{margin-top:auto;padding:.9rem 0 0;border-top:1px solid var(--trait);font-size:.62rem;letter-spacing:.16em;color:var(--discret)}.titre{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:.6rem}.titre .romaji{width:100%}.langues{display:flex;gap:.8rem;margin-left:auto;font-size:.66rem;letter-spacing:.12em;color:var(--discret)}.lang-opt{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid transparent;padding:.1rem 0;cursor:pointer;letter-spacing:inherit}.lang-opt:hover{color:var(--encre)}.lang-opt.actif{color:var(--encre);border-color:var(--encre)}.texte{width:100%;box-sizing:border-box;font:inherit;font-size:.86rem;line-height:1.7;padding:.5rem .6rem;background:var(--papier);color:var(--encre);border:1px solid rgba(22,19,16,.28);resize:vertical;outline:none}.texte:focus{border-color:var(--encre)}.reference{width:100%;font:inherit;font-size:.8rem;padding:.4rem .5rem;background:var(--papier);color:var(--encre);border:1px solid rgba(22,19,16,.28);outline:none}.note{margin-top:.35rem;font-size:.62rem;line-height:1.6;color:var(--discret);letter-spacing:.04em}.pied{margin-top:.6rem}.reference.chargement{background-image:radial-gradient(circle,var(--encre) 40%,transparent 42%);background-repeat:no-repeat;background-position:right .6rem center;background-size:.55rem .55rem;animation:pulse .9s ease-in-out infinite}@keyframes pulse{0%,to{background-size:.3rem .3rem}50%{background-size:.65rem .65rem}}.specimen{width:100%;margin:0 0 6px;font:inherit;font-size:.8rem;padding:.35rem .5rem;border:1px solid var(--trait-fort);background:var(--papier);color:var(--encre)}:root{--discret: #5f584f;--shu: #b8372a}#scene{display:flex;justify-content:center;height:100vh}#stage{flex:0 0 auto;width:min(calc(100vh - 2rem),calc(100vw - 340px));padding:26px 16px 19px 32px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}#toile-cadre{flex:1 1 auto;min-height:0;position:relative}#toile-cadre .toile-specimen{position:absolute;inset:0}#panel{flex:0 0 320px;height:100vh;padding:1.4rem 1.2rem 3rem;gap:0}.titre{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--trait);margin-bottom:1.2rem}.titre .kanji{font-size:1.3rem}.titre .romaji{width:100%;font-size:.85rem;letter-spacing:.2em;color:var(--discret)}.outils-btn{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.88rem;letter-spacing:.08em;color:var(--encre);background:#fff;border:1px solid var(--encre);padding:.35rem .7rem;cursor:pointer}.outils-btn:hover{background:var(--encre);color:var(--papier)}.outils-btn .fleche-menu{color:var(--shu);font-size:.75rem}.outils-btn:hover .fleche-menu{color:var(--papier)}.controles{gap:0}.etape{border:2px solid var(--encre);background:#fff;padding:.85rem .9rem .8rem;display:flex;flex-direction:column;gap:.9rem}.etape-tete{display:flex;align-items:center;gap:.7rem}.etape-num{flex:none;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--shu);color:#fff;font-size:1.1rem;font-weight:700;line-height:1}.etape-titre{font-size:1.05rem;font-weight:700;letter-spacing:.08em;color:var(--encre)}.fleche{text-align:center;color:var(--shu);font-size:1.6rem;line-height:1;margin:.3rem 0;font-weight:700}.etape .specimen{font-size:.9rem;min-height:44px;margin:0;background:#fff;border:1px solid var(--encre)}.etape .texte{background:#fff;border:2px solid var(--encre);font-size:1rem}.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem}.tuiles button{font:inherit;background:#fff;border:1px solid var(--trait);color:var(--encre);cursor:pointer;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.35rem .2rem}.tuiles button:hover{border-color:var(--encre)}.tuiles button.actif{outline:3px solid var(--encre);outline-offset:-3px;font-weight:700}.tuiles img{width:48px;height:48px;display:block}.tuiles span{font-size:.88rem}.etape .action,.bas .action{min-height:44px;font-size:.9rem;border:1px solid var(--encre);width:100%}.etape .action.majeure{background:var(--encre);color:var(--papier)}.etiquette{font-size:.9rem}.valeur{font-size:.85rem;color:var(--encre)}.bornes,.bornes span{font-size:.8rem;color:var(--encre);opacity:1}.note{font-size:.88rem;color:var(--encre)}details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}.affiner{border:2px dashed var(--encre);background:#fff;padding:0 .9rem}.affiner>summary{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700;letter-spacing:.08em;padding:.95rem 0}.affiner>summary:after{content:"＋";margin-left:auto}.affiner[open]>summary:after{content:"−"}.affiner[open]>summary{border-bottom:2px solid var(--encre);margin-bottom:.6rem}.affiner[open]{padding-bottom:.6rem}.sous{margin:0 0 .45rem}.sous>summary{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:700;letter-spacing:.05em;padding:.6rem .6rem .6rem .8rem;min-height:44px;border:2px solid var(--encre);background:#fff;color:var(--encre)}.sous>summary:after{content:"＋";margin-left:auto;width:1.6rem;height:1.6rem;flex:none;display:flex;align-items:center;justify-content:center;background:var(--shu);color:#fff;font-weight:700}.sous>summary:hover{background:var(--papier);color:var(--encre)}.sous[open]{border:2px solid var(--encre);margin-bottom:.8rem}.sous[open]>summary{border:0;background:var(--encre);color:var(--papier)}.sous[open]>summary:hover{background:var(--encre);color:var(--papier)}.sous[open]>summary:after{content:"−";background:var(--papier);color:var(--encre)}.sous[open]>*:not(summary){margin:.8rem .8rem 0}.sous[open]>*:last-child{margin-bottom:.8rem}.sous .rang+.rang{margin-top:1.1rem}.case{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.3rem 0;cursor:pointer}.case input{accent-color:var(--encre);width:1.1rem;height:1.1rem}.actions.bas{margin-top:1.2rem}.vers-kotoba{display:block;text-align:center;font-size:.9rem;color:var(--encre);margin:.8rem 0 .4rem}.vers-kotoba:hover{color:var(--shu)}#panel>.langues{justify-content:center;margin:.2rem 0;font-size:.9rem;color:var(--encre);gap:0}#panel>.langues .lang-opt{padding:.5rem .4rem;min-width:44px;min-height:44px}.chien{display:block;width:fit-content;margin:.6rem auto .4rem}.chien .fig{display:block;position:relative;transition:transform .35s ease}.chien img{display:block;height:120px;width:auto}.chien:hover .fig{transform:translateY(-6px)}.chien .queue{position:absolute;left:0;top:0;height:100%;width:auto;transform-origin:86% 88.5%;animation:remue .55s ease-in-out infinite alternate}@keyframes remue{0%{transform:rotate(-7deg)}to{transform:rotate(9deg)}}@media(prefers-reduced-motion:reduce){.chien .queue{animation:none}}.pied{font-size:.8rem;color:var(--encre)}.propositions{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:.8rem;flex:none;min-height:4.6rem;width:100%}.propositions[hidden]{display:none}#gallery{display:grid;grid-template-columns:repeat(8,minmax(0,4.4rem));gap:.3rem;flex:0 1 auto;min-width:0}#gallery canvas{width:100%;height:auto;aspect-ratio:1;cursor:pointer;border:1px solid var(--trait);background:#fff;display:block}#gallery canvas:hover{border-color:var(--encre)}.propos-tete{display:flex;flex-direction:column;gap:.25rem}.propos-de,.propos-fermer,.propos-ouvrir{width:2.6rem;height:2.1rem;padding:0;display:flex;align-items:center;justify-content:center;font:inherit;font-size:1.2rem;color:var(--encre);background:#fff;border:1px solid var(--encre);cursor:pointer}.propos-de:hover,.propos-fermer:hover,.propos-ouvrir:hover{background:var(--encre);color:var(--papier)}.propos-ouvrir{margin:.8rem auto 0;flex:none;width:2.6rem;min-height:4.6rem}.propos-ouvrir[hidden]{display:none}@media(max-width:820px){#scene{display:block;height:auto}#stage{position:sticky;top:0;z-index:5;width:100%;height:58svh;min-height:15rem;padding:.6rem .8rem;background:var(--papier);border-bottom:1px solid var(--trait)}#panel{height:auto;border-left:0}.propositions{min-height:3.6rem;margin-top:.4rem}#gallery{display:flex;overflow-x:auto;max-width:calc(100vw - 5rem)}#gallery canvas{flex:none;width:3.4rem;height:3.4rem}.propos-de,.propos-fermer{width:2.75rem;height:1.7rem}}
