:root{--bw-black: #000000;--bw-white: #ffffff;--bw-pillar: #d9d9d9;--bw-goal: #1f1f1f;--grid-line: var(--bw-black);--grid-cell: var(--bw-white);--grid-pillar: var(--bw-pillar);--grid-goal: var(--bw-goal);--grid-text: var(--bw-black);--grid-goal-text: var(--bw-white);--line-thin: 3px;--line-thick: 9px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;background:var(--bw-white);color:var(--bw-black);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#app{--app-pad: 20px;--switch-h: 40px;--toolbar-h: 40px;--stack-gap: 12px;--sidebar-w: 320px;--board-size: min( calc(100vw - var(--sidebar-w) - 2 * var(--app-pad)), calc(100vh - 2 * var(--app-pad) - var(--toolbar-h) - var(--stack-gap)) );height:100%;width:100%;display:flex;flex-direction:row}body.mode-view #app{--sidebar-w: 0px}.board-area{position:relative;flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--stack-gap);padding:var(--app-pad)}.toolbar{position:relative;z-index:80;flex:none;width:min(var(--board-size),980px);min-height:var(--toolbar-h);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 4px}.external-browser-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:#0000007a}.external-browser-dialog__panel{position:relative;width:min(420px,100%);padding:24px;border:3px solid var(--bw-black);border-radius:8px;background:var(--bw-white);color:var(--bw-black);box-shadow:0 18px 50px #0000003d}.external-browser-dialog__title{padding-right:64px;font-size:22px;line-height:1.15}.external-browser-dialog__copy{margin-top:12px;font-size:15px;line-height:1.45;color:#333}.external-browser-dialog__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.external-browser-dialog__primary,.external-browser-dialog__secondary,.external-browser-dialog__close{height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}.external-browser-dialog__primary{padding:0 16px;border:none;background:var(--bw-black);color:var(--bw-white);text-decoration:none}.external-browser-dialog__secondary{padding:0 14px;border:2px solid var(--bw-black);background:var(--bw-white);color:var(--bw-black)}.external-browser-dialog__close{position:absolute;top:12px;right:12px;padding:0 10px;border:none;background:var(--bw-pillar);color:var(--bw-black)}.board-viewport{position:relative;width:var(--board-size);height:var(--board-size);overflow:hidden;touch-action:none}.mode-switch{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--switch-h);padding:4px;background:var(--bw-pillar);border-radius:999px;-webkit-user-select:none;user-select:none}.mode-switch__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--bw-black);border-radius:999px;transition:transform .22s cubic-bezier(.22,1,.36,1)}.mode-switch.is-view .mode-switch__thumb{transform:translate(100%)}.mode-switch__option{position:relative;z-index:1;min-width:72px;padding:0 18px;border:none;background:transparent;font:inherit;font-weight:600;color:var(--bw-black);cursor:pointer;transition:color .22s ease}.mode-switch__option.is-active{color:var(--bw-white)}.board{position:absolute;top:0;left:0;width:300%;height:300%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--line-thick);padding:var(--line-thick);background:var(--grid-line);transform-origin:top left;transition:transform .28s cubic-bezier(.22,1,.36,1)}.block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--line-thin);background:var(--grid-line);min-width:0;min-height:0}.cell{background:var(--grid-cell);position:relative;overflow:hidden;min-width:0;min-height:0;container-type:size}.cell.pillar{background:var(--grid-pillar)}.cell.goal{background:var(--grid-goal)}.cell.goal .cell-text{color:var(--grid-goal-text);caret-color:var(--grid-goal-text)}.cell.pillar .cell-text,.cell.goal .cell-text{font-weight:700}.cell-done{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:none;align-items:center;justify-content:center;background:#0000008c;pointer-events:none}.board-viewport.mode-view .cell.is-done .cell-done{display:flex}.cell-done__icon{width:50cqmin;height:50cqmin;color:var(--grid-goal-text);stroke-width:2.5}.cell-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:8%;text-align:center;font-size:clamp(21px,15cqmin,84px);line-height:1.2;font-weight:500;color:var(--grid-text);caret-color:var(--grid-text);word-break:normal;overflow-wrap:normal;white-space:pre-wrap;overflow:auto;scrollbar-width:none;outline:none;cursor:text;-webkit-user-select:text;user-select:text}.cell-text:focus{align-items:flex-start;justify-content:flex-start;text-align:left;font-size:clamp(18px,9cqmin,48px)}.cell-text::-webkit-scrollbar{display:none}.board-viewport:not(.zoomed) .cell-text,.board-viewport.mode-view .cell-text{pointer-events:none}.board-viewport.mode-view .cell-text{-webkit-user-select:none;user-select:none}@media(max-width:600px){.cell-text{font-size:clamp(9px,11cqmin,54px)}.cell-text:focus{font-size:16px}}.cell-text:empty:before{content:"​";display:block}.sidebar{flex:none;width:var(--sidebar-w);height:100%;padding:28px 24px;border-right:var(--line-thin) solid var(--bw-black);overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:var(--bw-white)}body.mode-view .sidebar{display:none}.sidebar__title{font-size:22px;font-weight:700}.sidebar__meta{display:flex;flex-direction:column;gap:4px;margin-top:-6px;font-size:13px;font-weight:600;line-height:1.35;color:#444}.sidebar__meta a{color:var(--bw-black);text-decoration:underline;text-underline-offset:3px}.sidebar__lead{font-size:14px;line-height:1.5;color:#333}.sidebar-ai{display:flex;flex-direction:column;gap:8px}.sidebar-ai__input{width:100%;min-height:88px;max-height:220px;padding:10px 12px;border:2px solid var(--bw-black);border-radius:8px;background:var(--bw-white);color:var(--bw-black);font:inherit;font-size:13px;line-height:1.4;resize:none;overflow-y:auto}.sidebar-ai__input::placeholder{color:#666}.sidebar-ai__button{height:40px;border:none;border-radius:8px;background:var(--bw-black);color:var(--bw-white);font:inherit;font-size:14px;font-weight:800;cursor:pointer}.sidebar-ai__button:disabled{cursor:wait;opacity:.75}.sidebar__heading{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}.sidebar__list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5;color:#333}.sidebar__list li{padding-left:16px;position:relative}.sidebar__list li:before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--bw-black)}.sidebar kbd{font-family:inherit;font-size:12px;font-weight:600;padding:1px 6px;border:1px solid var(--bw-black);border-radius:5px;background:var(--bw-pillar)}.sidebar-toggle{display:none;position:fixed;top:12px;left:12px;z-index:60;width:44px;height:44px;align-items:center;justify-content:center;border:none;border-radius:12px;background:var(--bw-black);color:var(--bw-white);cursor:pointer}.sidebar-toggle svg{width:24px;height:24px}.sidebar-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:#00000073}.sidebar__close{display:none;align-self:flex-end;width:40px;height:40px;align-items:center;justify-content:center;border:none;border-radius:10px;background:var(--bw-pillar);color:var(--bw-black);cursor:pointer}.sidebar__close svg{width:22px;height:22px}@media(max-width:600px){#app{--sidebar-w: 0px}.sidebar{position:fixed;top:0;left:0;z-index:100;width:min(320px,85vw);transform:translate(-100%);transition:transform .26s cubic-bezier(.22,1,.36,1)}body.sidebar-open .sidebar{transform:translate(0);box-shadow:0 0 40px #0000004d}body:not(.mode-view) .sidebar-toggle{display:flex}body.sidebar-open .sidebar-backdrop{display:block}.sidebar__close{display:flex}}.zoom-hint{position:absolute;left:0;right:0;bottom:calc((var(--app-pad) + (100vh - 2 * var(--app-pad) - var(--toolbar-h) - var(--stack-gap) - var(--board-size)) / 2) / 2);transform:translateY(50%);font-size:14px;font-weight:600;color:#555;text-align:center;opacity:0;transition:opacity .24s ease;pointer-events:none}@media(max-width:600px){.board-viewport.zoomed~.zoom-hint{opacity:1}}.color-picker{position:relative;flex:none}.color-picker__toggle{height:var(--switch-h);width:92px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border:none;border-radius:8px;background:var(--bw-black);color:var(--bw-white);font:inherit;cursor:pointer}.color-picker__toggle svg{width:20px;height:20px;flex:none}.color-picker__preview{display:inline-flex;align-items:center;gap:2px}.color-picker__preview-swatch{width:10px;height:18px;border:1px solid rgba(255,255,255,.85)}.color-picker__menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:120;width:240px;display:none;grid-auto-rows:minmax(40px,auto);gap:2px;padding:6px;transform:translate(-50%);background:var(--bw-white);border:2px solid var(--bw-black);border-radius:8px;box-shadow:0 8px 30px #0000002e}.color-picker.is-open .color-picker__menu{display:grid}.color-picker__item{width:100%;min-height:40px;display:grid;grid-template-columns:auto 1fr 18px;align-items:center;gap:10px;padding:8px 10px;border:none;border-radius:6px;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;color:var(--bw-black);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}.color-picker__item:hover,.color-picker__item.is-active{background:var(--bw-pillar)}.color-picker__swatches{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--bw-black);border-radius:999px;background:var(--bw-white)}.color-picker__swatch{width:13px;height:13px;border:1px solid rgba(0,0,0,.28);border-radius:50%}.color-picker__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-picker__check{width:17px;height:17px;opacity:0}.color-picker__item.is-active .color-picker__check{opacity:1}.export{position:relative;flex:none}.export__toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;height:var(--switch-h);border:none;border-radius:8px;background:var(--bw-black);color:var(--bw-white);font:inherit;font-size:14px;font-weight:700;cursor:pointer}.export__toggle svg{width:21px;height:21px}.export__menu{position:absolute;top:calc(100% + 10px);right:0;z-index:120;min-width:220px;display:none;flex-direction:column;padding:6px;background:var(--bw-white);border:var(--line-thin) solid var(--bw-black);border-radius:8px;box-shadow:0 8px 30px #0000002e}.export.is-open .export__menu{display:flex}.export__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--bw-black);text-align:left;cursor:pointer}.export__item:hover{background:var(--bw-pillar)}.export__item svg{width:18px;height:18px;flex:none}.cloud{flex:none;display:flex;align-items:center;gap:10px;min-width:0}.cloud [hidden]{display:none!important}.cloud-picker{position:relative;flex:none;width:220px}.cloud-picker__button{width:220px;height:var(--switch-h);border:2px solid var(--bw-black);border-radius:8px;background:var(--bw-white);color:var(--bw-black);display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;font-size:13px;font-weight:600;line-height:1.25;padding:0 12px 0 14px;cursor:pointer}.cloud-picker__button svg{width:18px;height:18px;flex:none}.cloud-picker__label{min-width:0;padding-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cloud-picker__menu{position:absolute;top:calc(100% + 10px);left:0;z-index:120;width:260px;max-height:min(320px,calc(100vh - 160px));display:none;flex-direction:column;padding:6px;overflow:auto;background:var(--bw-white);border:2px solid var(--bw-black);border-radius:8px;box-shadow:0 8px 30px #0000002e}.cloud-picker.is-open .cloud-picker__menu{display:flex}.cloud-picker__item{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:var(--bw-black);font:inherit;font-size:13px;font-weight:650;text-align:left;cursor:pointer}.cloud-picker__item svg{width:17px;height:17px;flex:none}.cloud-picker__item-label{min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cloud-picker__delete{width:28px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#555;cursor:pointer}.cloud-picker__delete:hover,.cloud-picker__delete:focus-visible{background:var(--bw-black);color:var(--bw-white);outline:none}.cloud-picker__delete svg{width:16px;height:16px}.cloud-picker__item:hover,.cloud-picker__item.is-active{background:var(--bw-pillar)}.cloud__button{height:var(--switch-h);padding:0 16px;border:none;border-radius:8px;background:var(--bw-black);color:var(--bw-white);font:inherit;font-size:14px;font-weight:700;cursor:pointer}.cloud__auth-slot{width:92px;height:var(--switch-h);display:flex;align-items:center;justify-content:center;flex:none}.cloud__text-button{height:var(--switch-h);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 8px;border:none;background:transparent;color:var(--bw-black);font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}.cloud__text-button svg{width:18px;height:18px}.cloud-action{position:relative;flex:none}.cloud__icon-button{width:var(--switch-h);height:var(--switch-h);display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:var(--bw-black);color:var(--bw-white);cursor:pointer}.cloud__icon-button svg{width:20px;height:20px}.cloud__icon-button.is-saving svg{animation:toolbar-spin .85s linear infinite}.cloud__icon-button.is-error{background:#b00020}.cloud-tooltip{position:absolute;top:calc(100% + 8px);left:50%;z-index:130;transform:translate(-50%);padding:6px 9px;border-radius:7px;background:var(--bw-black);color:var(--bw-white);font-size:12px;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px #0000002e}@keyframes toolbar-spin{to{transform:rotate(360deg)}}.share-title{height:var(--switch-h);max-width:var(--board-size);display:flex;align-items:center;justify-content:center;color:var(--bw-black);font-size:16px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-area--shared{width:100%}@media(max-width:600px){#app{--toolbar-h: 96px}.toolbar{width:min(var(--board-size),calc(100vw - 24px));height:auto;flex-wrap:wrap;justify-content:center;gap:10px 12px}.mode-switch{order:0;width:min(58vw,220px)}.cloud{order:1;flex:1 1 100%;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}.export,.color-picker{order:0}.color-picker__toggle{height:44px;width:92px}.color-picker__menu{width:min(230px,calc(100vw - 24px))}.export__toggle{height:44px;padding:0 14px}.cloud-picker,.cloud-picker__button{width:min(100%,280px)}.cloud-picker__menu{width:100%}.cloud__button,.cloud__text-button,.cloud__icon-button,.cloud-action{flex:none}.cloud__auth-slot{width:92px;flex:none}.cloud__icon-button{width:52px;height:44px}}