:root{--ground:#e8e6e1;--paper:#fff;--ink:#1b1b19;--mute:#85837c;--faint:#aeaba3;--line:#cfccc5;--ui:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;--gutter:16px;--under:148px;--name-size:12px;--name-line:20px;--name-gap:36px;--head:calc(3 * var(--name-line) + var(--name-gap))}*{box-sizing:border-box}html{background:var(--ground);-webkit-text-size-adjust:100%}body{background:var(--ground);min-height:100dvh;color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;margin:0}.hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#work{--top:calc(var(--gutter) * 1.5);--sheet:min(calc(100vw - 2 * var(--gutter)), calc(100dvh - var(--head) - var(--under) - var(--top) - 2 * var(--gutter)), 76vh);min-height:100dvh;padding:calc(var(--top) + env(safe-area-inset-top)) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;display:flex}#name{--kana:calc(1em + .16em);margin:0 0 var(--name-gap);font-size:var(--name-size);font-weight:400;line-height:var(--name-line);letter-spacing:.16em;text-align:left;color:var(--mute);flex:none}#name span{white-space:nowrap;display:block}#name span:nth-child(3){padding-left:calc(2 * var(--kana))}#name span:nth-child(4){padding-left:var(--kana)}#stage{width:var(--sheet);aspect-ratio:1;background:var(--paper);flex:none;box-shadow:0 1px 2px #28241c0f,0 8px 28px #28241c0d}#stage svg{will-change:transform;width:100%;height:100%;display:block}#under{width:max(var(--sheet), min(20em, 100%));max-width:100%;height:var(--under);text-align:center;padding-top:20px}#under p{margin:0}#entry{justify-content:center;display:flex}#title{width:min(16em,100%);font:inherit;letter-spacing:.06em;text-align:center;color:var(--ink);border:0;border-bottom:1px solid var(--ink);background:0 0;border-radius:0;outline:none;padding:6px 0 7px;font-size:18px}#title::placeholder{color:var(--faint);letter-spacing:.1em}#title:focus-visible{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}#title[aria-invalid=true]{border-bottom-style:dashed}#caption{letter-spacing:.12em;min-height:38px;color:var(--ink);padding-top:8px;font-size:15px}#examples{letter-spacing:.08em;color:var(--mute);font-size:13px;margin-top:14px!important}#examples .lead{margin-right:.6em}#examples a{white-space:nowrap;color:var(--ink);margin:0 .45em;padding:6px 0;text-decoration:none;display:inline-block}#examples a:hover,#examples a:focus-visible{text-underline-offset:4px;outline:none;text-decoration:underline;text-decoration-thickness:1px}#actions{flex-wrap:wrap;justify-content:center;gap:0 .8em;display:flex;margin-top:10px!important}#actions button,#about-open,dialog button{font:inherit;color:var(--mute);cursor:pointer;background:0 0;border:0;border-radius:0}#actions button{letter-spacing:.1em;min-height:44px;padding:0 10px;font-size:13px}#actions button:hover,#actions a:hover,#about-open:hover,dialog button:hover{color:var(--ink)}#actions button:focus-visible,#actions a:focus-visible,#about-open:focus-visible,dialog button:focus-visible{color:var(--ink);outline:1px solid var(--ink);outline-offset:2px}#share[aria-expanded=true]{color:var(--ink)}#share-menu{flex-basis:100%;order:1;justify-content:center;gap:0 .8em;display:flex}#share-menu[hidden]{display:none}#share-menu a,#share-menu button{min-height:36px;font:inherit;letter-spacing:.1em;color:var(--mute);cursor:pointer;background:0 0;border:0;border-radius:0;align-items:center;padding:0 10px;font-size:12px;text-decoration:none;display:inline-flex}#share-menu [hidden]{display:none}#note{letter-spacing:.04em;min-height:20px;color:var(--mute);overflow-wrap:anywhere;font-size:12px;margin-top:6px!important}body[data-mode=write] #caption,body[data-mode=view] #entry,body[data-mode=view] #examples,#examples[hidden],body:not([data-state=shown]) #actions,body[data-mode=write] #try,body[data-state=shown] #examples{display:none}body[data-state=working] #stage svg{opacity:.35;transition:opacity .2s}#about-open{right:calc(var(--gutter) + env(safe-area-inset-right));bottom:calc(var(--gutter) + env(safe-area-inset-bottom));letter-spacing:.1em;padding:8px 4px;font-size:12px;position:fixed}dialog{--pad:30px;width:min(34em, calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - 4 * var(--gutter));padding:0 var(--pad) 24px;border:1px solid var(--line);background:var(--paper);color:var(--ink);letter-spacing:.02em;border-radius:0;font-size:14px;line-height:2}dialog::backdrop{background:#e8e6e1e0}dialog p{outline:none;margin:0 0 12px}dialog .aside{color:var(--mute);font-size:12px}dialog dl{color:var(--mute);grid-template-columns:max-content 1fr;gap:2px 14px;margin:16px 0 0;font-size:12px;line-height:1.8;display:grid}dialog dd{margin:0}dialog .record{margin:16px 0 0;line-height:1.8}#about-bar{z-index:1;height:44px;margin:0 calc(-1 * var(--pad) + 2px) 0;background:var(--paper);justify-content:flex-end;display:flex;position:sticky;top:0}#about-close{width:44px;height:44px;padding:0;font-size:20px;line-height:1}@media (width<=520px){:root{--under:148px;--name-line:18px;--name-gap:26px}#work{--top:20px;--sheet:min(calc(100vw - 2 * var(--gutter)), calc(100dvh - var(--head) - var(--under) - var(--top) - 1.5 * var(--gutter)), 76vh);justify-content:flex-start}dialog{--pad:22px;padding-bottom:18px;font-size:13.5px;line-height:1.95}}@media (prefers-reduced-motion:reduce){body[data-state=working] #stage svg{transition:none}}