:root{--base-bg-page: #ffffff;--base-text-primary: #222222;--palette-gray-100: #f5f5f5;--palette-gray-200: #e0e0e0;--palette-gray-400: #dddddd;--palette-blue-100: #cfdfff;--palette-blue-500: #4285f4;--palette-red-500: #e54848;--color-text: var(--base-text-primary);--color-bg-page: var(--base-bg-page);--color-bg-primary: var(--palette-gray-100);--color-bg-hover: var(--palette-gray-200);--color-bg-active: var(--palette-blue-100)}html,body{margin:0;padding:0}html{font-family:Noto Sans TC,Microsoft JhengHei,sans-serif;background:var(--color-bg-page);color:var(--color-text)}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--z-sheet-head: 100;--color-border: var(--palette-gray-400);--color-border-active: var(--palette-blue-500);--color-border-invalid: var(--palette-red-500);--border-normal: 1px solid var(--color-border);--border-medium: 2px solid var(--color-border);--border-bold: 3px solid var(--color-border);--font-weight-medium: 500;--font-weight-bold: 700}.app{display:grid;grid-template-columns:100px 1fr;height:100vh}.sheet-nav{display:flex;flex-direction:column;overflow-y:auto;background-color:var(--color-bg-primary);border-right:var(--border-normal)}.sheet-nav__item{display:flex;flex-shrink:0;align-items:center;justify-content:center;height:48px;font-size:16px;cursor:pointer}.sheet-nav__item:hover{background-color:var(--color-bg-hover)}.sheet-nav__item--active{background-color:var(--color-bg-active);font-weight:var(--font-weight-medium)}.sheet-nav__item>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sheet-editor{height:100%;overflow:auto}.sheet__grid{display:grid;align-content:start}.sheet__head>.sheet__cell{position:sticky;top:0;z-index:var(--z-sheet-head);background-color:var(--color-bg-page);border-bottom:var(--border-bold);font-weight:var(--font-weight-bold)}.sheet__row{display:contents}.sheet__cell{position:relative;display:flex;align-items:center;min-width:32px;height:32px;padding:0 8px;font-size:16px;border:var(--border-normal);white-space:nowrap;cursor:default}.sheet__cell--active{border-color:var(--color-border-active);box-shadow:inset 0 0 0 2px var(--color-border-active)}.sheet__cell--invalid:after{position:absolute;content:"";top:0;right:0;width:0;height:0;border-top:10px solid var(--color-border-invalid);border-left:10px solid transparent;pointer-events:none}.sheet__cell>input{position:absolute;width:100%;height:100%;padding:0;margin:0;border:none;outline:none;background:transparent;font:inherit;color:inherit}.sheet__cell>input+span{visibility:hidden;pointer-events:none}