.writing-component-container[data-astro-cid-phs5ncpi]{display:flex;flex-direction:column;width:100%}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode{flex-direction:row;gap:.5rem;align-items:flex-start;width:100%}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-controls[data-astro-cid-phs5ncpi]{width:100px;margin-top:0;flex-direction:column;align-items:stretch;gap:.5rem;flex-shrink:0;order:-1}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .action-buttons[data-astro-cid-phs5ncpi]{flex-direction:column;width:100%;gap:.5rem;margin-bottom:0}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .control-button[data-astro-cid-phs5ncpi]{width:100%;padding:.375rem .5rem;font-size:.813rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .orientation-toggle[data-astro-cid-phs5ncpi]{font-size:.7rem;padding:.375rem .25rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .stroke-indicator[data-astro-cid-phs5ncpi]{text-align:center;margin-top:auto;padding-top:.75rem;border-top:1px solid rgb(var(--fq-border) / .3);font-size:.75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .character-indicator-container[data-astro-cid-phs5ncpi]{text-align:center;width:100%;justify-content:center;font-size:.75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode{display:flex;flex-direction:row;align-items:flex-start}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode>div[data-astro-cid-phs5ncpi]:has(.writing-canvas-container){flex:1;display:flex;justify-content:center;align-items:flex-start;touch-action:auto;pointer-events:none}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-canvas-container[data-astro-cid-phs5ncpi]{pointer-events:auto;margin:0}@media(min-width:640px){.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-controls[data-astro-cid-phs5ncpi]{width:120px;gap:.75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode{gap:.75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .control-button[data-astro-cid-phs5ncpi]{padding:.425rem .625rem;font-size:.875rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .orientation-toggle[data-astro-cid-phs5ncpi]{font-size:.75rem;padding:.425rem .375rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .stroke-indicator[data-astro-cid-phs5ncpi],.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .character-indicator-container[data-astro-cid-phs5ncpi]{font-size:.813rem}}@media(min-width:1024px){.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-controls[data-astro-cid-phs5ncpi]{width:140px;gap:1rem;position:sticky;top:1rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode{gap:1rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .control-button[data-astro-cid-phs5ncpi]{padding:.5rem .75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .orientation-toggle[data-astro-cid-phs5ncpi]{font-size:.813rem;padding:.5rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .stroke-indicator[data-astro-cid-phs5ncpi]{padding-top:1rem;font-size:.875rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .character-indicator-container[data-astro-cid-phs5ncpi]{font-size:.875rem}}.writing-canvas-container[data-astro-cid-phs5ncpi]{position:relative;width:100%;padding-top:20%;touch-action:auto;border-radius:6px;overflow:hidden;transition:all .3s ease-out}.writing-canvas-wrapper[data-astro-cid-phs5ncpi]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto}.canvas-area[data-astro-cid-phs5ncpi]{width:100%}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .canvas-area[data-astro-cid-phs5ncpi]{flex:1;display:flex;justify-content:center;align-items:flex-start;margin-left:calc(var(--sidebar-width, 100px) * -.7);touch-action:auto;pointer-events:none}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical]{padding-top:0;position:relative;--sidebar-width: 100px;--max-width: calc((100vw - var(--sidebar-width) * 2) - 2rem);--max-height: calc(100vh - 80px) ;height:min(var(--max-height),calc(var(--max-width) * 5));width:calc(min(var(--max-height),calc(var(--max-width) * 5))/5);margin:0;overflow:hidden;isolation:isolate;pointer-events:auto}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical] .writing-canvas-wrapper[data-astro-cid-phs5ncpi]{position:relative;width:100%;height:100%;pointer-events:auto}@media(min-width:640px){.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .canvas-area[data-astro-cid-phs5ncpi]{--sidebar-width: 120px;margin-left:calc(var(--sidebar-width) * -.7)}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical]{--sidebar-width: 120px;--max-width: calc((100vw - var(--sidebar-width) * 2) - 2rem);--max-height: calc(100vh - 60px) ;height:min(var(--max-height),calc(var(--max-width) * 5));width:calc(min(var(--max-height),calc(var(--max-width) * 5))/5)}}@media(min-width:1024px){.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .canvas-area[data-astro-cid-phs5ncpi]{--sidebar-width: 140px;margin-left:calc(var(--sidebar-width) * -.7)}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical]{--sidebar-width: 140px;--max-width: calc((100vw - var(--sidebar-width) * 2) - 2rem);--max-height: calc(100vh - 50px) ;height:min(var(--max-height),calc(var(--max-width) * 5),1200px);width:calc(min(var(--max-height),calc(var(--max-width) * 5),1200px)/5)}}.writing-canvas[data-astro-cid-phs5ncpi]{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;display:block}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical] .writing-canvas[data-astro-cid-phs5ncpi]{position:relative;width:100%;height:100%}.canvas-background[data-astro-cid-phs5ncpi]{fill:rgb(var(--fq-bg-input))}.grid-line[data-astro-cid-phs5ncpi]{stroke:rgb(var(--fq-border));stroke-width:.7;stroke-dasharray:3,2;opacity:.7}.writing-area[data-astro-cid-phs5ncpi]{stroke:rgb(var(--fq-border));stroke-width:.5;stroke-dasharray:1,3;opacity:.3}.writing-controls[data-astro-cid-phs5ncpi]{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1rem}.character-indicator-container[data-astro-cid-phs5ncpi]{width:100%;display:flex;justify-content:flex-start;font-size:.875rem;color:rgb(var(--fq-text-secondary))}.action-buttons[data-astro-cid-phs5ncpi]{display:flex;flex-wrap:wrap;gap:.5rem}.stroke-indicator[data-astro-cid-phs5ncpi]{font-size:.875rem;color:rgb(var(--fq-text-secondary));padding:.25rem 0;white-space:nowrap}.control-button[data-astro-cid-phs5ncpi]{padding:.375rem .75rem;border-radius:.375rem;font-size:.875rem;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.hint-button[data-astro-cid-phs5ncpi]{background-color:rgb(var(--fq-primary));color:#fff}.hint-button[data-astro-cid-phs5ncpi]:hover{background-color:rgb(var(--fq-primary-hover))}.show-button[data-astro-cid-phs5ncpi],.clear-button[data-astro-cid-phs5ncpi],.orientation-toggle[data-astro-cid-phs5ncpi]{background-color:rgb(var(--fq-secondary));color:rgb(var(--fq-text-primary))}.show-button[data-astro-cid-phs5ncpi]:hover,.clear-button[data-astro-cid-phs5ncpi]:hover,.orientation-toggle[data-astro-cid-phs5ncpi]:hover{background-color:rgb(var(--fq-secondary-hover))}.control-button[data-astro-cid-phs5ncpi]:active{transform:translateY(1px)}.dark .grid-line[data-astro-cid-phs5ncpi]{stroke:#14141980;stroke-width:.5}.dark .writing-area[data-astro-cid-phs5ncpi]{stroke:#1414194d;stroke-width:.4}.user-layer path{transition:stroke .2s ease}.writing-canvas[data-astro-cid-phs5ncpi]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cstyle%3Eline%7Bstroke:rgba(90,90,90,0.8);stroke-width:1;stroke-dasharray:2,2;%7D%3C/style%3E%3Cline x1='0' y1='12' x2='24' y2='12'/%3E%3Cline x1='12' y1='0' x2='12' y2='24'/%3E%3C/svg%3E") 12 12,crosshair}.writing-canvas.drawing-active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cstyle%3Eline%7Bstroke:rgba(80,80,80,0.9);stroke-width:1;%7D%3C/style%3E%3Cline x1='0' y1='6' x2='12' y2='6'/%3E%3Cline x1='6' y1='0' x2='6' y2='12'/%3E%3C/svg%3E") 6 6,none!important}.dark .writing-canvas[data-astro-cid-phs5ncpi]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cstyle%3Eline%7Bstroke:%23ffffff;stroke-width:1.5;stroke-dasharray:2,2;%7D%3C/style%3E%3Cline x1='0' y1='12' x2='24' y2='12'/%3E%3Cline x1='12' y1='0' x2='12' y2='24'/%3E%3C/svg%3E") 12 12,crosshair}.dark .writing-canvas.drawing-active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cstyle%3Eline%7Bstroke:%23ffffff;stroke-width:1.5;%7D%3C/style%3E%3Cline x1='0' y1='6' x2='12' y2='6'/%3E%3Cline x1='6' y1='0' x2='6' y2='12'/%3E%3C/svg%3E") 6 6,none!important}.writing-component-container.vertical-mode .writing-canvas-card,.writing-component-container.vertical-mode .base-card{width:100%;margin:0}@media(prefers-reduced-motion:reduce){.hint-button[data-astro-cid-phs5ncpi],.clear-button[data-astro-cid-phs5ncpi],.show-button[data-astro-cid-phs5ncpi],.orientation-toggle[data-astro-cid-phs5ncpi],.writing-canvas-container[data-astro-cid-phs5ncpi]{transition:none}}@media(max-width:768px){.writing-canvas-container[data-astro-cid-phs5ncpi]{padding-top:22%}.writing-controls[data-astro-cid-phs5ncpi]{flex-direction:column;align-items:flex-start;gap:.5rem}.action-buttons[data-astro-cid-phs5ncpi]{width:100%;justify-content:space-between}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-controls[data-astro-cid-phs5ncpi]{width:80px;gap:.375rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode{gap:.5rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .control-button[data-astro-cid-phs5ncpi]{padding:.3rem .4rem;font-size:.75rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .orientation-toggle[data-astro-cid-phs5ncpi]{font-size:.65rem;padding:.3rem .2rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .canvas-area[data-astro-cid-phs5ncpi]{--sidebar-width: 80px;margin-left:calc(var(--sidebar-width) * -.7)}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical]{--sidebar-width: 80px;--max-width: calc((100vw - var(--sidebar-width) * 2) - 1rem);--max-height: calc(100vh - 100px) ;height:min(var(--max-height),calc(var(--max-width) * 5));width:calc(min(var(--max-height),calc(var(--max-width) * 5))/5)}}@media(max-width:400px){.control-button[data-astro-cid-phs5ncpi]{padding:.25rem .5rem;font-size:.813rem}.stroke-indicator[data-astro-cid-phs5ncpi]{font-size:.813rem}.action-buttons[data-astro-cid-phs5ncpi]{justify-content:flex-start;gap:.25rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .writing-controls[data-astro-cid-phs5ncpi]{width:70px;gap:.25rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .control-button[data-astro-cid-phs5ncpi]{padding:.25rem .3rem;font-size:.7rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .orientation-toggle[data-astro-cid-phs5ncpi]{font-size:.6rem;padding:.25rem .15rem;line-height:1.2}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .stroke-indicator[data-astro-cid-phs5ncpi],.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .character-indicator-container[data-astro-cid-phs5ncpi]{font-size:.7rem}.writing-component-container[data-astro-cid-phs5ncpi].vertical-mode .canvas-area[data-astro-cid-phs5ncpi]{--sidebar-width: 70px;margin-left:calc(var(--sidebar-width) * -.7)}.writing-canvas-container[data-astro-cid-phs5ncpi][data-orientation=vertical]{--sidebar-width: 70px;--max-width: calc((100vw - var(--sidebar-width) * 2) - 1rem);--max-height: calc(100vh - 110px) ;height:min(var(--max-height),calc(var(--max-width) * 5));width:calc(min(var(--max-height),calc(var(--max-width) * 5))/5)}}