@font-face{font-family:TegakiFont;src:url(/font.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#0B7A5E;overflow:hidden;overscroll-behavior:none}
html,body,canvas{touch-action:none}
body{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);color:#FBFDFF;font:700 15px/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans CJK JP",sans-serif;font-feature-settings:"palt";-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}

#stage{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;overflow:clip;background:#FBFDFF}
#paper{position:absolute;left:0;top:0;width:calc(100% + 128px);height:calc(100% + 128px);transform-origin:0 0;will-change:transform;background:linear-gradient(#A4DDED 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,#A4DDED 1px,transparent 1px) 0 0/64px 64px,linear-gradient(#D5EEF5 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,#D5EEF5 1px,transparent 1px) 0 0/16px 16px}
canvas{position:absolute;left:0;top:0;display:block;width:100%;height:100%;transform-origin:0 0;font-feature-settings:normal}
#ink{will-change:transform;pointer-events:none}

textarea{position:absolute;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;resize:none;white-space:pre;background:none;color:#1B3A9E;caret-color:#1B3A9E;font:400 16px/1.3 TegakiFont,"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;font-feature-settings:normal;tab-size:1;transform-origin:0 0;outline:2px dashed #0B7A5E;outline-offset:3px;-webkit-user-select:text;user-select:text}
#hint{position:absolute;left:0;right:0;top:50%;margin:0;text-align:center;color:#0B7A5E;pointer-events:none}
#note{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:max-content;max-width:min(300px,calc(100% - 24px));margin:0;padding:8px 12px;background:#FFF5A6;border:2px solid #0B7A5E;color:#1B3A9E;text-wrap:balance;pointer-events:none}
#note.err{color:#BE1848}

#tabs{position:absolute;right:0;bottom:0;display:flex;gap:8px;pointer-events:none}
#tabs button,#save{flex:none;min-width:64px;height:48px;padding:0 14px;background:#0B7A5E;border-radius:8px 8px 0 0;pointer-events:auto}
#save{position:absolute;left:0;bottom:0}

#shot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#FBFDFF;color:#0B7A5E}
#shot p{margin:0}
#shot img{min-height:0;max-width:100%;max-height:100%;border:2px solid #0B7A5E;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}

#ruler{flex:none;background:#0B7A5E}
#ticks{position:relative;height:8px;overflow:hidden}
#strip{position:absolute;left:0;top:0;width:calc(100% + 128px);height:8px;transform-origin:0 0;will-change:transform;background:linear-gradient(90deg,#FBFDFF 1px,transparent 1px) 0 0/64px 8px repeat-x,linear-gradient(90deg,#FBFDFF 1px,transparent 1px) 0 0/16px 4px repeat-x}
#holes,#bar{display:flex;height:56px;max-width:504px;margin:0 auto}

button{position:relative;flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none}
button:active{outline:2px solid #FBFDFF;outline-offset:-2px}
button:focus-visible{outline:3px solid #FFE733;outline-offset:-3px}
button:disabled{color:#5FAF98}
.hole svg{position:relative;display:block;width:28px;height:28px;margin:auto}
.hole[aria-pressed=true]{color:#1B3A9E}
.hole[aria-pressed=true]::before{content:"";position:absolute;inset:4px;background:#FFE733;clip-path:polygon(0 6%,100% 0,98% 96%,2% 100%)}
.glyph{position:relative;display:block;font-size:24px;line-height:28px;text-align:center}
#select:not([data-rect=true]) .marq,#select[data-rect=true] .lasso{display:none}
#badge{position:absolute;right:8px;bottom:8px;font-size:11px;line-height:1}
#bar button{font-size:16px}
#main{background:#FFE733;color:#1B3A9E}
#main:disabled{background:none;color:#FBFDFF}

@media (orientation:landscape) and (max-height:520px){
body{flex-direction:row}
#ruler{display:flex;width:64px}
#ticks{width:8px;height:auto}
#strip{width:8px;height:calc(100% + 128px);background:linear-gradient(#FBFDFF 1px,transparent 1px) 0 0/8px 64px repeat-y,linear-gradient(#FBFDFF 1px,transparent 1px) 0 0/4px 16px repeat-y}
#holes,#bar{flex:1;flex-direction:column;width:56px;height:auto;max-width:none;margin:0}
button{width:100%;height:auto}
#bar button{font-size:13px;word-break:keep-all}
#tabs{flex-direction:column;align-items:flex-end}
#tabs button{border-radius:8px 0 0 8px}
#save{left:auto;right:0;top:0;bottom:auto;width:auto;border-radius:0 0 0 8px}
}
@media (orientation:landscape) and (max-height:352px){
#ruler{width:120px}
#holes,#bar{display:grid;grid-template-columns:1fr 1fr;width:112px}
}