@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap";:root{font-family:Noto Sans JP,sans-serif;color:#17364d;background:#edf5f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #20a9e0;outline-offset:2px}.page{min-height:100vh;background:radial-gradient(circle at 92% 4%,rgba(105,201,235,.22),transparent 30%),#edf5f9}.page.painting-fill,.page.painting-fill *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 25c-1.8 0-3 1.2-3 3 2.8.4 6.1-.2 7.2-2.6l.7-1.7-3.7-2.9-.7 1.8c-.2.6-.2 1.2-.5 1.7-.2.4-.5.7-1 .7Z' fill='%2342c5ef' stroke='%2317364d' stroke-width='1.5'/%3E%3Cpath d='m9 20 3.9 3.1L27 6.7c.8-1 .6-2.4-.4-3.2s-2.5-.6-3.3.4L9 20Z' fill='%23f7fcff' stroke='%2317364d' stroke-width='2'/%3E%3C/svg%3E") 5 27,crosshair!important}.page.painting-mark,.page.painting-mark *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23f7fcff' stroke='%2317364d' stroke-width='2'/%3E%3Cpath d='m10 10 12 12m0-12L10 22' stroke='%2320a9e0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,crosshair!important}.page.painting-erase,.page.painting-erase *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='m5.5 20.5 11-14c1-1.3 2.9-1.5 4.2-.5l5.8 4.6c1.3 1 1.5 2.9.5 4.2L17.4 27H11l-5-3.9c-.8-.7-1-1.8-.5-2.6Z' fill='%2365d5f5' stroke='%2317364d' stroke-width='2'/%3E%3Cpath d='m10 15 10 7.8' stroke='%2317364d' stroke-width='2'/%3E%3Cpath d='M11 27h12' stroke='%2317364d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 7 24,crosshair!important}.topbar{height:84px;padding:0 clamp(24px,5vw,78px);border-bottom:1px solid #cfcdc5;display:flex;align-items:center;justify-content:flex-start;gap:clamp(20px,3vw,42px)}.brand{color:#17364d;text-decoration:none;display:flex;align-items:center;gap:12px;font-family:DM Mono;font-size:12px;line-height:1.25;letter-spacing:.14em}.brand span:last-child{white-space:nowrap}.brand b{font-size:16px}.brand-mark{width:34px;height:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(45deg)}.brand-mark i{background:#17364d;border-radius:1px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#20a9e0}.top-actions{display:flex;align-items:center;gap:8px}.mode-switch{height:42px;display:flex;padding:3px;border:1px solid #c7c5bd;background:#ffffff47}.mode-switch button{min-width:82px;padding:0 12px;border:0;background:transparent;color:#777c79;font-size:12px;font-weight:700;cursor:pointer}.mode-switch button.active{color:#fff;background:#176b99}.icon-button{border:1px solid #cfcdc5;background:#ffffff47;height:42px;width:44px;font-size:24px;cursor:pointer}.icon-button:disabled,.clear-button:disabled{opacity:.3;cursor:default}.export-button{height:42px;padding:0 6px 0 19px;margin:0;border:0;color:#fff;background:#17364d;display:flex;align-items:center;gap:15px;font-size:14px;font-weight:700;cursor:pointer}.export-button b{display:grid;place-items:center;width:31px;height:31px;background:#42c5ef;color:#17364d;font-size:17px}.import-button{background:#176b99}.import-button b{background:#bdefff}.manual-button{border:1px solid #176b99;background:transparent;color:#176b99}.manual-button b{background:#dff5fc;color:#176b99}.workspace{width:100%;margin:0;padding:52px clamp(24px,4.5vw,64px) 64px;display:grid;grid-template-columns:304px minmax(0,1fr);gap:clamp(35px,5vw,75px);align-items:start}.panel{padding-top:0}.mode-label{margin-bottom:10px}.panel-mode-switch{width:100%;margin-bottom:12px}.panel-mode-switch button{min-width:0;flex:1}.panel-top-rule{margin-bottom:22px;border-top:2px solid #17364d}.field-group{margin-bottom:27px}.field-group label,.label{display:block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.07em}.field-group input{width:100%;height:44px;background:#ffffff6b;border:1px solid #c7c5bd;padding:0 12px;font-size:15px;font-weight:600}.field-group input:disabled{color:#777c79;opacity:.65}.creation-picker{display:grid;grid-template-columns:1fr 1fr}.creation-picker button{min-height:44px;padding:8px;border:1px solid #b8ced9;background:#ffffff52;color:#607989;font-size:12px;font-weight:700;cursor:pointer}.creation-picker button+button{border-left:0}.creation-picker button.active{border-color:#176b99;background:#176b99;color:#fff}.input-method-picker{display:grid;grid-template-columns:repeat(3,1fr)}.input-method-picker button{min-height:48px;padding:7px 3px;border:1px solid #b8ced9;border-right:0;background:#ffffff52;color:#607989;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;cursor:pointer}.input-method-picker button:last-child{border-right:1px solid #b8ced9}.input-method-picker button.active{border-color:#176b99;background:#176b99;color:#fff}.input-method-picker button:disabled{cursor:default;opacity:.45}.input-method-picker button.active:disabled{opacity:.7}.input-method-icon{position:relative;flex:0 0 18px;width:18px;height:18px;border:2px solid currentColor;background:#fff}.history-field{margin-top:-6px}.history-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.history-controls button{height:42px;padding:0 8px;border:1px solid #6a96ad;background:#ffffff6b;display:flex;align-items:center;justify-content:space-between;color:#245b78;font-size:12px;font-weight:700;cursor:pointer}.history-controls button b{width:27px;height:27px;display:grid;place-items:center;background:#176b99;color:#fff;font:500 17px DM Mono}.history-controls button:disabled{opacity:.35;cursor:default}.auto-icon{background:linear-gradient(135deg,#17364d 0 48%,#fff 52% 100%)}.black-icon{border-color:#17364d;background:#17364d}.white-icon:before,.white-icon:after{content:"";position:absolute;left:2px;right:2px;top:7px;height:2px;background:currentColor;transform:rotate(45deg)}.white-icon:after{transform:rotate(-45deg)}.input-method-picker button.active .input-method-icon{border-color:#fff}.input-method-picker button.active .black-icon{background:#fff}.clue-input-help,.clue-input-error{margin:8px 0 0;font-size:11px;line-height:1.6}.clue-input-help{color:#607989}.clue-input-error{color:#b44545;font-weight:700}.size-picker{display:grid;grid-template-columns:repeat(4,1fr)}.size-picker button{padding:10px 2px 9px;border:1px solid #c8c6be;border-right:0;background:#ffffff40;cursor:pointer}.size-picker button:last-child{border-right:1px solid #c8c6be}.size-picker button.active{color:#fff;background:#176b99;border-color:#176b99}.size-picker button:disabled{cursor:default;opacity:.55}.size-picker button.active:disabled{opacity:1}.size-picker b{display:block;font-family:DM Mono;font-size:13px}.size-picker small{display:block;font-family:DM Mono;font-size:9px;letter-spacing:.12em;opacity:.65;margin-top:3px}.teacher-message{position:relative;min-height:148px;margin:0 0 16px;padding:12px 18px 12px 122px;border:1px solid #a8d7e8;background:#f7fcff;display:flex;align-items:center}.teacher-message:before{content:"";position:absolute;left:108px;top:calc(50% - 6px);width:12px;height:12px;border-left:1px solid #a8d7e8;border-bottom:1px solid #a8d7e8;background:#f7fcff;transform:rotate(45deg)}.teacher-message img{position:absolute;left:10px;top:50%;width:98px;height:98px;object-fit:contain;transform:translateY(-50%)}.teacher-message p{position:relative;margin:0;color:#245b78;font-size:14px;font-weight:700;line-height:1.75}.play-helper-content{position:relative;width:100%}.hint-button{width:100%;min-height:40px;margin-top:13px;border:1px solid #176b99;background:#176b99;color:#fff;font-size:12px;font-weight:700;cursor:pointer}.hint-button:hover{background:#125b83}.hint-button:disabled{border-color:#9fb2bb;background:#c5d1d6;color:#6f8189;cursor:default}.teacher-log-section{min-width:0}.step-controls{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.teacher-step-controls{margin:0 0 16px}.step-controls button{height:39px;padding:0 5px;border:1px solid #6a96ad;color:#17364d;background:#65d5f5;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.step-controls button span{font:500 11px DM Mono;letter-spacing:.1em}.step-controls button b{width:27px;height:27px;display:grid;place-items:center;color:#fff;background:#17364d;font:500 15px DM Mono}.step-controls button:disabled{color:#8d9691;background:#4c5551;border-color:#59615e;cursor:default}.step-controls button:disabled b{color:#89918d}.step-history{margin:0 0 8px;border:1px solid #c9c6bd;background:#ffffff3d}.step-history-title{height:36px;padding:0 10px;border-bottom:1px solid #d2cfc7;display:flex;align-items:center;justify-content:space-between;font:500 10px DM Mono;letter-spacing:.1em}.step-history-title b{color:#167cae;font-weight:500}.step-list{max-height:190px;padding:5px;overflow-y:auto}.step-list button{width:100%;height:34px;padding:0 8px;border:0;border-bottom:1px solid #ddd9d0;background:transparent;display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;color:#777c79;text-align:left;cursor:pointer}.step-list button:last-child{border-bottom:0}.step-list button:hover{background:#e5f1f6}.step-list button.active{color:#17364d;background:#dceef6}.step-list button i{width:5px;height:5px;border:1px solid #999d99;transform:rotate(45deg)}.step-list button.active i{border-color:#1689bd;background:#42c5ef}.step-list button span{font:500 11px DM Mono;letter-spacing:.06em}.step-list button b{color:#a4a6a1;font:500 9px DM Mono;letter-spacing:.08em}.step-list button.active b{color:#167cae}.restore-board-button{width:100%;min-height:44px;margin-top:8px;border:1px solid #176b99;background:#176b99;color:#fff;font-size:13px;font-weight:700;cursor:pointer}.clear-button{width:100%;min-height:44px;margin-top:16px;padding:10px 14px;border:1px solid #c75b5b;background:#fff0f0;color:#a23f3f;font-size:13px;font-weight:700;box-shadow:inset 4px 0 #c75b5b;cursor:pointer}.clear-button:hover:not(:disabled){background:#ffe2e2;border-color:#ad4141;color:#8f3030}.restoration-notice{position:absolute;z-index:25;left:50%;top:10px;width:min(430px,calc(100vw - 32px));padding:15px 42px 15px 17px;border:1px solid #79b8d3;border-left:5px solid #1689bd;background:#f7fcff;color:#245b78;text-align:left;white-space:pre-line;font-size:13px;font-weight:700;line-height:1.55;box-shadow:8px 8px #17364d29;cursor:pointer;transform:translate(-50%)}.restoration-notice:after{content:"×";position:absolute;right:14px;top:12px;color:#607989;font-size:17px}.restoration-notice.success{border-left-color:#23835c}.restoration-notice.warning{border-left-color:#d29b28;background:#fffaf0}.restoration-notice.error{border-left-color:#b44545;background:#fff2f2;color:#873838}.notice-enter-active,.notice-leave-active{transition:opacity .2s ease,transform .25s ease}.notice-enter-from,.notice-leave-to{opacity:0;transform:translate(-50%,-10px)}.editor-area{min-width:0;position:relative;container-type:inline-size}.clear-message{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);min-width:230px;padding:24px 40px 20px;border:2px solid #17364d;outline:5px solid rgba(237,245,249,.9);background:#42c5ef;color:#17364d;text-align:center;box-shadow:8px 8px #17364d38;cursor:pointer}.clear-message small{display:block;font:500 9px DM Mono;letter-spacing:.2em}.clear-message b{display:block;margin-top:2px;font:500 44px DM Mono;letter-spacing:.08em}.clear-message span{position:absolute;right:12px;top:9px}.clear-enter-active{transition:opacity .25s ease,transform .35s cubic-bezier(.2,1.5,.4,1)}.clear-leave-active{transition:opacity .18s ease}.clear-enter-from{opacity:0;transform:translate(-50%,-42%) rotate(-2deg) scale(.8)}.clear-leave-to{opacity:0}.board-wrap{--cell: clamp(30px, min(var(--cell-fit), var(--cell-fit-height)), 38px);position:relative;display:grid;grid-template-columns:calc(var(--row-clues) * 25px + 20px) calc(var(--cols) * var(--cell));grid-template-rows:calc(var(--column-clues) * 22px + 18px) calc(var(--rows) * var(--cell));width:max-content;max-width:100%}.board-wrap.play-board,.board-wrap.play-board *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.board-wrap.play-board .corner,.board-wrap.play-board .column-clues,.board-wrap.play-board .row-clues{touch-action:manipulation}.corner{position:relative;border-right:1px solid #b7b5ad;border-bottom:1px solid #b7b5ad;overflow:hidden;font-family:DM Mono;font-size:9px;color:#858b88}.corner i{position:absolute;width:160%;border-top:1px solid #d0cec7;transform:rotate(26deg);left:-18%;top:50%}.corner span{position:absolute;bottom:8px;left:8px}.corner b{position:absolute;top:8px;right:8px;font-weight:400}.column-clues{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));align-items:stretch;border-bottom:1px solid #17364d}.column-clue{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding-bottom:7px;font:500 13px DM Mono}.column-clue textarea{width:calc(100% - 4px);height:calc(100% - 6px);min-height:0;margin:3px 2px;padding:5px 2px;resize:none;overflow:hidden;border:1px solid #a9c6d5;border-radius:0;background:#ffffffb8;color:#17364d;text-align:center;font:500 12px/1.45 DM Mono}.column-clue textarea.invalid{border-color:#c45c5c;background:#fff0f0}.column-clue.pointerFocused{background:#20a9e012;box-shadow:inset 0 -2px #168fc48c}.column-clue.focused{background:#20a9e029;box-shadow:inset 0 -3px #168fc4}.column-clue.hintFocused{background:#eeae302e;box-shadow:inset 0 -3px #d58e16}.row-clues{display:grid;grid-template-rows:repeat(var(--rows),var(--cell));border-right:1px solid #17364d}.row-clue{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-right:10px;font:500 13px DM Mono}.row-clue input{width:calc(100% - 12px);height:calc(100% - 6px);margin:3px 6px;padding:0 8px;border:1px solid #a9c6d5;border-radius:0;background:#ffffffb8;color:#17364d;text-align:right;font:500 12px DM Mono}.row-clue input.invalid{border-color:#c45c5c;background:#fff0f0}.row-clue.pointerFocused{background:#20a9e012;box-shadow:inset -2px 0 #168fc48c}.row-clue.focused{background:#20a9e029;box-shadow:inset -3px 0 #168fc4}.row-clue.hintFocused{background:#eeae302e;box-shadow:inset -3px 0 #d58e16}.zero{color:#b1b2ad}.play-clue{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease,opacity .15s ease}.play-clue:hover{color:#168fc4}.play-clue.confirmed{color:#82909a;opacity:.65;text-decoration:line-through 2px #168fc4;text-decoration-skip-ink:none}.grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));border:2px solid #17364d;border-top:0;border-left:0;background:#f9fdff;touch-action:none;-webkit-user-select:none;user-select:none}.grid.readonly .cell{cursor:default}.grid.readonly .cell:hover{background:transparent}.cell{position:relative;width:var(--cell);height:var(--cell);margin:0;padding:0;border:0;border-right:1px solid #d0cec6;border-bottom:1px solid #d0cec6;border-radius:0;background:transparent;cursor:crosshair}.cell:hover{background:#e3f2f8}.cell.pointerLineFocused{background:#20a9e00f}.cell.pointerLineFocused:hover{background:#20a9e01f}.cell.pointerFocused{background:#20a9e02e;box-shadow:inset 0 0 0 2px #20a9e0a6}.cell.lineFocused{background:#20a9e01a;box-shadow:inset 0 0 0 1px #168fc438}.cell.focused{background:#20a9e057;box-shadow:inset 0 0 0 2px #20a9e0}.cell.filled{background:#17364d;box-shadow:inset 0 0 0 1px #edf5f9}.cell.filled.pointerLineFocused{background:#1d465e;box-shadow:inset 0 0 0 1px #65d5f580}.cell.filled.pointerFocused{background:#24516b;box-shadow:inset 0 0 0 2px #65d5f5b8}.cell.filled.lineFocused{box-shadow:inset 0 0 0 1px #579bb9}.cell.filled.focused{box-shadow:inset 0 0 0 2px #42c5ef}.cell.hintLineFocused{background:#eeae301f;box-shadow:inset 0 0 0 1px #d58e1666}.cell.hintFocused{background:#eeae304d;box-shadow:inset 0 0 0 2px #d58e16}.cell.filled.hintLineFocused{background:#55462e;box-shadow:inset 0 0 0 1px #ffca5b9e}.cell.filled.hintFocused{background:#65502b;box-shadow:inset 0 0 0 2px #ffca5b}.cell.marked:after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:#8d9691;font:400 clamp(13px,calc(var(--cell) * .58),21px) "DM Mono"}.cell.fifthCol{border-right:2px solid #78807d}.cell.fifthRow{border-bottom:2px solid #78807d}.modal-backdrop{position:fixed;z-index:30;inset:0;padding:20px;background:#0f2b3d85;display:grid;place-items:center}.size-modal{width:min(420px,100%);padding:28px;border:1px solid #8ebed2;background:#f7fcff;box-shadow:12px 12px #17364d33}.size-modal>small{color:#1689bd;font:500 10px DM Mono;letter-spacing:.16em}.size-modal h2{margin:5px 0 22px;color:#17364d;font-size:20px}.custom-size-fields{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px}.custom-size-fields label span{display:block;margin-bottom:7px;color:#426d82;font-size:12px;font-weight:700}.custom-size-fields input{width:100%;height:48px;border:1px solid #a9c6d5;background:#fff;color:#17364d;text-align:center;font:500 17px DM Mono}.custom-size-fields>b{padding-bottom:12px;color:#607989}.size-modal>p{margin:10px 0 22px;color:#607989;font-size:12px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal-actions button{height:42px;border:1px solid #a9c6d5;background:transparent;color:#426d82;font-size:13px;font-weight:700;cursor:pointer}.modal-actions button:last-child{border-color:#176b99;background:#176b99;color:#fff}.export-modal{width:min(620px,100%);max-height:calc(100vh - 40px);overflow-y:auto}.manual-modal{width:min(720px,100%)}.manual-content{display:grid;gap:14px}.manual-content section{padding:16px 18px;border:1px solid #b8d2df;background:#ffffff8c}.manual-content h3{margin:0 0 9px;color:#176b99;font-size:15px}.manual-content p{margin:0;color:#426d82;font-size:13px;line-height:1.75}.manual-content p+p{margin-top:8px}.manual-content b{color:#17364d}.manual-content a{color:#176b99;font-weight:700;overflow-wrap:anywhere}.export-option{padding:17px;border:1px solid #b8d2df;background:#ffffff8c;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.export-option+.export-option{margin-top:12px}.export-option b{font-size:14px}.export-option p{margin:5px 0 0;color:#607989;font-size:11px;line-height:1.55}.export-option button,.export-option a,.file-select-button{min-height:40px;padding:0 15px;border:1px solid #176b99;background:#176b99;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}.export-option button:disabled{opacity:.4;cursor:default}.url-option{grid-template-columns:1fr}.export-url-field input{width:100%;height:43px;padding:0 11px;border:1px solid #a9c6d5;background:#fff;color:#17364d;font:500 11px DM Mono}.export-url-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-url-actions a{border-color:#a9c6d5;background:transparent;color:#176b99}.export-close-action{margin-top:18px;grid-template-columns:1fr}.import-file-option{position:relative;cursor:pointer}.import-file-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.import-file-option:focus-within{outline:3px solid #20a9e0;outline-offset:2px}.import-url-button{width:100%}.import-error{margin:12px 0 0;padding:10px 12px;border-left:3px solid #b44545;background:#fff0f0;color:#9c3737;font-size:12px;font-weight:700;line-height:1.5}@media(max-width:850px){.export-button{margin-left:0;padding-left:6px;gap:0}.export-button>span{display:none}.workspace{grid-template-columns:1fr}.panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.mode-label,.panel-mode-switch,.panel-top-rule,.teacher-message,.teacher-log-section,.play-helper-field,.clear-button{grid-column:1 / -1}.editor-area{overflow-x:auto;padding-bottom:10px}.board-wrap{--cell: clamp(30px, min(var(--cell-fit), var(--cell-fit-height-stacked)), 38px);margin:0}}@media(max-width:540px){.topbar{height:70px;padding:0 18px}.brand span:last-child{display:none}.top-actions{gap:4px}.mode-switch button{padding:0 5px}.workspace{padding:32px 12px 42px;gap:24px}.panel{grid-template-columns:1fr;padding:18px 6px 0}.field-group{margin-bottom:20px}.board-wrap{--cell: min(34px, var(--cell-fit-mobile), var(--cell-fit-height-stacked));grid-template-columns:calc(var(--row-clues) * 21px + 12px) calc(var(--cols) * var(--cell))}.row-clue{gap:5px;padding-right:6px;font-size:11px}.column-clue{font-size:11px}.export-option{grid-template-columns:1fr}.export-option .download-button{width:100%}.export-url-actions{grid-template-columns:1fr}}