:root{--ink:#24231f;--muted:#77746c;--line:#d9d5ca;--canvas:#f2efe6;--panel:#fbfaf5;--night:#1d2026;--yellow:#ffcd3c;--focus:#0e7b68}.app-shell{background:radial-gradient(circle at 14% 12%,#ffffffb8,#0000 25rem),radial-gradient(circle at 92% 100%,#ccad7b42,#0000 28rem),repeating-linear-gradient(135deg,#3a352b08 0 1px,#0000 1px 9px),#d8d4c9;min-height:100vh;padding:16px}.topbar{color:#f7f4eb;background:var(--night);border:1px solid #353842;grid-template-columns:190px 1fr auto;align-items:center;gap:24px;height:76px;padding:0 20px;display:grid;box-shadow:0 14px 38px #1c1b162b}.brand{color:inherit;letter-spacing:.04em;align-items:center;gap:7px;font:900 14px/.85 Zen Kaku Gothic New,sans-serif;text-decoration:none;display:flex}.brand-mark{color:var(--yellow);font-size:35px;line-height:.5;transform:rotate(90deg)}.room-title{align-items:baseline;gap:13px;min-width:0;display:flex}.room-title strong{letter-spacing:.02em;font-size:15px}.eyebrow{color:var(--muted);letter-spacing:.14em;margin:0;font-size:10px;font-weight:900}.topbar .eyebrow{color:#9599a5}.room-status{color:#b8bdc8;font-size:11px}.room-status i,.save-status span{color:#61c46b;font-style:normal}.top-actions{gap:8px;display:flex}.quiet-button,.share-button,.image-button,.icon-button,.text-button,.tone-button,.dot-upload-button,.zoom-controls button,.reset-button,.delete-button{border:0;transition:transform .16s,background .16s,color .16s,box-shadow .16s}.quiet-button:focus-visible,.share-button:focus-visible,.image-button:focus-visible,.icon-button:focus-visible,.text-button:focus-visible,.tone-button:focus-visible,.dot-upload-button:focus-visible,.zoom-controls button:focus-visible,.reset-button:focus-visible,.delete-button:focus-visible,.board-item:focus-visible{outline-offset:3px;outline:3px solid #ffd75a}.quiet-button:hover,.share-button:hover,.image-button:hover,.icon-button:hover,.text-button:hover,.tone-button:hover,.dot-upload-button:hover,.zoom-controls button:hover,.reset-button:hover,.delete-button:hover{transform:translateY(-2px)}.quiet-button{color:#dce0e5;background:#333741;padding:9px 12px;font-size:12px}.share-button{color:#202018;background:var(--yellow);padding:9px 13px;font-size:12px;font-weight:900}.image-button{color:#f6f4ed;background:#156f66;align-items:center;padding:9px 12px;font-size:12px;font-weight:900;display:inline-flex;position:relative;overflow:hidden}.image-button:before{content:"◌";margin-right:6px;font-size:15px;line-height:.6}.image-button input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.board-layout{background:var(--panel);border:1px solid #bcb9ae;border-top:0;grid-template-columns:210px minmax(0,1fr) 256px;min-height:calc(100vh - 108px);display:grid;box-shadow:0 16px 42px #2d271824}.side-panel,.inspector{background:#ece9df;padding:27px 16px}.side-panel{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.side-heading{color:#757168;letter-spacing:.14em;justify-content:space-between;align-items:center;margin:0 5px 11px;font-size:10px;font-weight:900;display:flex}.icon-button{color:#36352f;background:#dbd7ca;width:23px;height:23px;font-size:18px;line-height:1}.board-list{gap:4px;display:grid}.board-item{color:#66635b;text-align:left;background:0 0;border:1px solid #0000;grid-template-columns:24px minmax(0,1fr) 17px;align-items:center;min-height:42px;padding:0 7px;display:grid}.board-item b{color:#aaa59b;font-size:10px}.board-item span{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;overflow:hidden}.board-item em{color:#9a968d;text-align:right;font-size:10px;font-style:normal}.board-item:hover{background:#e2dfd4}.board-item.active{color:#292821;background:#fffdf7;border-color:#d2cec1;box-shadow:3px 3px #d3cfc2}.board-item.active b{color:#d88b00}.members-heading{margin-top:37px}.members{gap:12px;display:grid}.members>div{grid-template-columns:27px 1fr 8px;align-items:center;gap:8px;display:grid}.avatar{color:#20211e;border-radius:50%;place-items:center;width:27px;height:27px;font-size:10px;font-weight:900;display:grid}.amber{background:#ffc847}.mint{background:#91d8c7}.rose{background:#ea9f93}.members p{color:#424039;margin:0;font-size:11px;font-weight:700;line-height:1.1}.members small{color:#88847b;margin-top:3px;font-size:9px;font-weight:500;display:block}.presence{background:#47a95e;border-radius:50%;width:7px;height:7px}.presence.idle{background:#d9a820}.tip{color:#77736a;border-top:1px solid #d6d2c7;gap:9px;margin-top:36px;padding:12px 10px;display:flex}.tip span{color:#cf9512}.tip p{margin:0;font-size:10px;line-height:1.65}.workspace{background:var(--canvas);flex-direction:column;min-width:0;display:flex}.workspace-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:end;padding:27px 34px 22px;display:flex}.workspace h1{color:#292820;letter-spacing:.04em;margin:5px 0 0;font-family:Shippori Mincho,serif;font-size:clamp(23px,2.2vw,34px)}.save-status{color:#868178;margin:0 0 4px;font-size:10px}.save-status span{margin-right:5px;font-size:8px}.canvas-toolbar{border-bottom:1px solid var(--line);background:#fbfaf5;align-items:center;gap:7px;min-height:54px;padding:9px 26px;display:flex;overflow-x:auto}.tone-button,.text-button,.dot-upload-button,.draw-tool{color:#5a574f;background:0 0;flex:none;align-items:center;gap:6px;padding:7px 8px;font-size:10px;font-weight:700;display:inline-flex}.tone-button:hover,.text-button:hover{background:#eae7dd}.dot-upload-button{color:#11655d;background:#ddf1ea;border:1px solid #a9d5c9}.dot-upload-button:hover{background:#c6e7dc}.paste-hint{color:#989389;white-space:nowrap;flex:none;font-size:9px}.draw-tool{border:1px solid #d5d0c4}.draw-tool:hover{background:#eae7dd}.draw-tool.active{color:#fbfaf5;background:#283933;border-color:#283933;box-shadow:2px 2px #c7c2b6}.draw-tool.select-tool.active{color:#3d3a33;background:#e7e3d9;border-color:#c8c2b5}.ink-swatches{flex:none;gap:4px;padding-left:3px;display:inline-flex}.ink-swatches button{border:2px solid #fbfaf5;border-radius:50%;width:16px;height:16px;padding:0;box-shadow:0 0 0 1px #bdb8aa}.ink-swatches button.active{transform:scale(1.13);box-shadow:0 0 0 2px #1c6e61}.ink-swatches button:first-child{background:#253b36}.ink-swatches button:nth-child(2){background:#157667}.ink-swatches button:nth-child(3){background:#d06b51}.ink-swatches button:nth-child(4){background:#e2a52f}.ink-swatches button:nth-child(5){background:#7964b5}.color-picker{background:repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 50% / 6px 6px;border:1px solid #aaa496;border-radius:3px;flex:none;width:19px;height:19px;display:inline-flex;overflow:hidden}.color-picker input{cursor:pointer;background:0 0;border:0;width:26px;height:26px;padding:0;transform:translate(-4px,-4px)}.layer-visibility{color:#837e73;flex:none;align-items:center;gap:3px;padding-inline:3px;font-size:9px;display:inline-flex}.layer-visibility small{color:#aaa397;letter-spacing:.08em;margin-right:2px;font-size:8px}.layer-visibility button{color:#aaa397;background:#efede5;border:1px solid #d7d3c8;padding:4px 5px;font-size:9px}.layer-visibility button.visible{color:#245f55;background:#e0f0e9;border-color:#a5d0c2}.pixel-tools{background:#e8e4d8;border:1px solid #d5d0c4;flex:none;gap:2px;padding:2px;display:inline-flex}.pixel-tools button{color:#69645a;background:0 0;border:0;padding:5px 6px;font-size:9px;font-weight:800}.pixel-tools button.active{color:#fbfaf5;background:#2b6156}.pixel-resolution{color:#887f70;flex:none;font-family:monospace;font-size:9px}.size-control{color:#827e75;flex:none;align-items:center;gap:5px;font-size:9px;font-weight:700;display:inline-flex}.size-control input{accent-color:#157667;width:52px}.clear-drawing{color:#9b5148;background:0 0;border:1px dashed #cdada8;flex:none;padding:6px 7px;font-size:9px}.clear-drawing:hover{color:#fff;background:#b65043}.tone-button i{border-radius:50%;width:10px;height:10px}.tone-button.lemon i{background:#ffcf3c}.tone-button.aqua i{background:#8edcdb}.tone-button.coral i{background:#f19f81}.tone-button.lavender i{background:#c6b5ee}.tone-button.paper i{background:#f9f5df;border:1px solid #c3bcad}.toolbar-divider{background:#d4d0c5;width:1px;height:21px;margin:0 3px}.canvas-scroll{background:#e7e4dc;flex:1;min-height:420px;position:relative;overflow:auto}.canvas-stage{min-width:100%;min-height:100%}.canvas{transform-origin:0 0;background-color:#f7f4ea;background-image:radial-gradient(#bbb7aa 1.1px,#0000 1.2px),linear-gradient(90deg,#d7d3c64d 1px,#0000 1px),linear-gradient(#d7d3c64d 1px,#0000 1px);background-size:20px 20px,100px 100px,100px 100px;width:1680px;height:1040px;position:relative;overflow:hidden}.canvas:after{pointer-events:none;content:"";background:linear-gradient(90deg,#ffffff54,#0000 20% 80%,#cfc2a02b);position:absolute;inset:0}.canvas-scroll.is-drop-target .canvas:before{z-index:9;color:#11655d;content:"画像を落として、点にする";letter-spacing:.12em;pointer-events:none;background:#def4ebd1;border:3px dashed #158273;place-items:center;font-family:Shippori Mincho,serif;font-size:27px;font-weight:700;display:grid;position:absolute;inset:22px;box-shadow:inset 0 0 0 9px #ffffff8c}.canvas-label{z-index:1;color:#b4afa3;letter-spacing:.18em;font-size:10px;font-weight:900;position:absolute}.label-top{top:44px;left:54px}.label-bottom{letter-spacing:.08em;font-family:Shippori Mincho,serif;font-size:14px;bottom:42px;right:62px}.pixel-grid{z-index:9;pointer-events:none;background-image:linear-gradient(90deg,#28373140 1px,#0000 1px),linear-gradient(#28373140 1px,#0000 1px);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #2837312e}.drawing-layer{z-index:2;pointer-events:none;touch-action:none;width:1680px;height:1040px;position:absolute;inset:0}.drawing-layer.drawing-active{z-index:8;pointer-events:auto;cursor:crosshair}.drawing-layer.pixel-active{cursor:cell;image-rendering:pixelated}.drawing-layer.layer-hidden{display:none}.normal-drawing-layer{z-index:3}.note{z-index:3;cursor:grab;border:1px solid #35302526;flex-direction:column;padding:12px 14px 14px;transition:box-shadow .16s,transform .16s;display:flex;position:absolute;box-shadow:4px 5px #342f251f,12px 13px 25px #3f392617}.note:hover{z-index:5;transform:rotate(-.3deg)translateY(-2px);box-shadow:5px 6px #342f2529,14px 16px 30px #3f392621}.note:active{cursor:grabbing}.note.selected{z-index:6;outline-offset:4px;outline:3px solid #2e806e}.note-lemon{background:#ffe16e}.note-aqua{background:#a8e3df}.note-coral{background:#f9b495}.note-lavender{background:#d2c4f2}.note-paper{background:#fffdf4}.note-head{justify-content:space-between;align-items:center;height:20px;display:flex}.note-grip{color:#33302873;letter-spacing:-4px;font-size:17px;line-height:1;transform:rotate(90deg)}.owner{color:#3e3b31;border:1px solid #2a271e40;border-radius:50%;place-items:center;width:21px;height:21px;font-size:9px;font-weight:900;display:grid}.note input,.note textarea{color:#353228;resize:none;background:0 0;border:0;outline:0;width:100%}.note input{margin:10px 0 5px;font-size:15px;font-weight:900;line-height:1.3}.note textarea{flex:1;min-height:82px;font-size:12px;line-height:1.65}.note textarea::selection{background:#ffffff8c}.note input::selection{background:#ffffff8c}.dot-image{z-index:2;cursor:grab;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fbfaf5b0;border:1px solid #45413524;margin:0;padding:10px;transition:transform .16s,box-shadow .16s;position:absolute;box-shadow:5px 6px #40392b1f,13px 17px 29px #40392b1a}.dot-image:hover{z-index:4;transform:rotate(.4deg)translateY(-2px);box-shadow:6px 7px #40392b2b,14px 20px 32px #40392b26}.dot-image:active{cursor:grabbing}.dot-image img{width:100%;height:auto;image-rendering:pixelated;-webkit-user-select:none;user-select:none;display:block}.dot-image-meta{color:#575349;letter-spacing:.04em;justify-content:space-between;align-items:center;gap:12px;min-height:19px;margin-bottom:7px;font-size:9px;font-weight:900;display:flex}.dot-image-meta span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dot-image-meta span:first-letter{color:#157667}.dot-image-meta button{color:#7a685b;background:0 0;border:1px solid #d7d0c0;border-radius:50%;flex:none;width:19px;height:19px;font-size:15px;line-height:1}.dot-image-meta button:hover{color:#fff;background:#b65043;border-color:#b65043}.workspace-footer{color:#837f76;border-top:1px solid var(--line);background:#fbfaf5;justify-content:space-between;align-items:center;min-height:49px;padding:8px 26px;font-size:10px;display:flex}.footer-meta{align-items:center;gap:12px;display:flex}.footer-meta a{color:#5f766c;letter-spacing:.04em;text-underline-offset:3px;font-weight:900;text-decoration:underline}.footer-meta a:hover{color:#0e7b68}.zoom-controls{align-items:center;gap:4px;display:flex}.zoom-controls button{color:#514f47;background:#eae7dd;width:25px;height:25px;font-size:16px;line-height:1}.zoom-controls output{color:#58554e;text-align:center;width:38px;font-size:10px}.inspector{flex-direction:column;gap:13px;display:flex}.preview-note{border:1px solid #36302524;min-height:145px;padding:14px;box-shadow:4px 4px #49412b1f}.preview-note span{color:#454035;border:1px solid #302b1f38;border-radius:50%;place-items:center;width:20px;height:20px;margin-bottom:13px;font-size:9px;font-weight:900;display:grid}.preview-note strong{color:#3c392f;font-size:13px;display:block}.preview-note p{color:#514d40;white-space:pre-line;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin:8px 0 0;font-size:10px;line-height:1.65;display:-webkit-box;overflow:hidden}.field-label{color:#77736b;letter-spacing:.08em;gap:6px;font-size:10px;font-weight:900;display:grid}.field-label select{color:#4a483f;background:#f8f6ef;border:1px solid #d4d0c4;outline:0;width:100%;padding:8px;font-size:12px}.field-label select:focus{border-color:var(--focus);box-shadow:0 0 0 2px #0e7b682b}.delete-button{color:#a4483c;background:0 0;border:1px solid #d4afa8;margin-top:4px;padding:9px;font-size:11px}.delete-button:hover{color:#fff;background:#b65043}.reset-button{color:#726f67;background:0 0;border:1px dashed #bdb8aa;margin-top:auto;padding:9px;font-size:10px}.reset-button:hover{color:#3f3d37;background:#e3e0d6}.empty-detail{color:#827e75;font-size:11px;line-height:1.8}@media (width<=1050px){.board-layout{grid-template-columns:190px minmax(0,1fr)}.inspector{display:none}}@media (width<=730px){.app-shell{padding:0}.topbar{grid-template-columns:1fr auto;gap:12px;height:auto;padding:13px 15px}.room-title,.top-actions .quiet-button,.top-actions .image-button{display:none}.board-layout{min-height:calc(100vh - 65px);display:block}.side-panel{display:none}.workspace-head{padding:21px 18px 17px}.workspace h1{font-size:24px}.canvas-toolbar,.workspace-footer{padding-inline:12px}.save-status,.footer-meta>span{display:none}.workspace-footer{justify-content:space-between}.canvas-scroll{min-height:66vh}.paste-hint{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}:root{color:#24231f;font-synthesis:none;text-rendering:optimizelegibility;background:#d4d2ca;font-family:Zen Kaku Gothic New,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}