*{box-sizing:border-box}:root{font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--ink);background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg: #eef2f7;--surface: #ffffff;--border: #dde5ef;--border-strong: #c6d3e4;--ink: #1d2c42;--muted: #61708a;--faint: #93a1b8;--navy: #27436b;--navy-deep: #17263d;--teal: #2e8f86;--danger: #b3564d;--danger-bg: #faf1f0}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}#root{width:100%;min-height:100vh;overflow-x:hidden}button{font-family:inherit;color:inherit}.appShell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);overflow-x:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:760px;margin:0 auto;padding:14px 16px 6px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brandIcon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--navy);color:#dce7f5;flex-shrink:0}.brandTitle{font-size:16px;font-weight:700;color:var(--navy-deep);line-height:1.3}.brandSub{font-size:11px;color:var(--muted)}.brandSubError{color:var(--danger)}.iconBtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}.iconBtn:hover{background:#f2f6fb;border-color:var(--border-strong)}.iconBtnSmall{width:34px;height:34px}.menuWrap{position:relative}.menuBackdrop{position:fixed;inset:0;z-index:1090;background:transparent}.menuPanel{position:absolute;top:calc(100% + 6px);right:0;z-index:1100;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #17263d24;padding:6px;display:flex;flex-direction:column}.menuItem{border:none;background:transparent;text-align:left;font-size:14px;color:var(--ink);padding:11px 12px;border-radius:8px;cursor:pointer;transition:background .15s}.menuItem:hover:not(:disabled){background:#f2f6fb}.menuItem:disabled{color:var(--faint);cursor:not-allowed}.menuItemDanger{color:var(--danger)}.menuDivider{height:1px;background:var(--border);margin:4px 8px}.patternTabs{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:760px;margin:0 auto;padding:8px 16px 0}.patternTabList{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}.patternTabList::-webkit-scrollbar{display:none}.patternTab{padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.patternTab:hover{border-color:var(--border-strong)}.patternTabActive{background:var(--navy);border-color:var(--navy);color:#fff}.patternTabActions{display:flex;gap:6px;flex-shrink:0}.content{display:flex;flex-direction:column;gap:12px;width:100%;max-width:760px;margin:0 auto;padding:12px 16px 48px;flex:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}.timelineCard{padding:16px 14px 12px}.sectionHeader{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}.sectionTitle{font-size:14px;font-weight:700;color:var(--navy-deep);margin:0}.sectionSub{font-size:11px;color:var(--faint)}.hint{margin:10px 0 0;text-align:center;font-size:12px;color:var(--faint)}.quickAdd{display:flex;flex-wrap:wrap;gap:8px}.quickAddChip{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 15px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.quickAddChip:hover{background:#f2f6fb;border-color:var(--border-strong)}.quickAddChip:active{transform:scale(.97)}.quickAddDot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.emptyList{margin:4px 0;font-size:13px;color:var(--muted)}.segmentRows{list-style:none;margin:0;padding:0}.segmentRows li+li{border-top:1px solid var(--border)}.segmentRow{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 4px;border:none;background:transparent;cursor:pointer;text-align:left;font-size:14px;transition:background .15s}.segmentRow:hover{background:#f6f9fc}.segmentRowDot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.segmentRowLabel{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.segmentRowTime{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.segmentRowDuration{font-size:11px;color:var(--faint);white-space:nowrap}.segmentRowChevron{display:flex;color:var(--faint)}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.fieldLabel{font-size:12px;font-weight:600;color:var(--muted)}.fieldOptional{font-weight:400;color:var(--faint)}.input{padding:10px 12px;font-size:16px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink);transition:border-color .15s;width:100%;max-width:100%;min-width:0}.input:focus{outline:none;border-color:var(--teal)}.input[type=text],select.input{-webkit-appearance:none;appearance:none}.timeSelectWrapper{display:flex;align-items:center;gap:6px;width:100%}.timeSelectField{flex:1 1 0;min-width:0;font-variant-numeric:tabular-nums;text-align:center;padding:10px 22px 10px 8px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath d='M1 1l5 5 5-5' stroke='%2361708a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 7px center;background-size:10px;cursor:pointer}.timeSelectSeparator{color:var(--muted);font-weight:600;flex:0 0 auto}.btnPrimary{padding:11px 22px;font-size:15px;font-weight:600;border-radius:10px;border:none;cursor:pointer;background:var(--navy);color:#fff;transition:background .15s}.btnPrimary:hover{background:#1f3757}.btnPrimary:disabled{background:var(--faint);cursor:not-allowed}.btnDanger{padding:11px 18px;font-size:14px;font-weight:600;border-radius:10px;border:1px solid #dcb9b4;cursor:pointer;background:transparent;color:var(--danger);transition:background .15s,border-color .15s}.btnDanger:hover:not(:disabled){background:var(--danger-bg);border-color:var(--danger)}.btnDanger:disabled{opacity:.45;cursor:not-allowed}.sheetOverlay{position:fixed;inset:0;background:#17263d73;z-index:1000;display:flex;align-items:flex-end;justify-content:center}.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:20px 20px 0 0;max-height:90vh;max-height:90dvh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .22s ease-out}.sheet:focus{outline:none}@keyframes sheetUp{0%{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}.sheetGrip{width:40px;height:4px;border-radius:2px;background:var(--border-strong);margin:10px auto 0}.sheetHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 10px}.sheetTitle{font-size:16px;font-weight:700;color:var(--navy-deep)}.sheetClose{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:#f2f6fb;color:var(--muted);cursor:pointer}.sheetClose:hover{background:#e7edf6;color:var(--ink)}.sheetBody{padding:6px 20px 16px;display:flex;flex-direction:column;gap:16px}.sheetFooter{display:flex;justify-content:space-between;gap:12px;padding:12px 20px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}.sheetTimeRow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}.sheetTimeArrow{display:flex;align-items:center;color:var(--faint);padding-bottom:12px}.sheetDuration{margin-top:-8px;text-align:center;font-size:12px;color:var(--muted)}@media(min-width:700px){.sheetOverlay{align-items:center;padding:24px}.sheet{border-radius:18px}.sheetGrip{display:none}}.categoryPills{display:flex;flex-wrap:wrap;gap:8px}.categoryPill{display:flex;align-items:center;gap:7px;padding:8px 14px;min-height:38px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.categoryPill:hover{border-color:var(--border-strong)}.categoryPillActive{color:#fff}.categoryPillActive .categoryPillDot{background:#ffffffd9!important}.categoryPillDot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.colorSwatches{display:flex;flex-wrap:wrap;gap:12px}.colorSwatch{width:30px;height:30px;border-radius:50%;border:none;padding:0;cursor:pointer}.colorSwatchActive{outline:2px solid var(--teal);outline-offset:3px}.choiceBtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;transition:background .15s,border-color .15s}.choiceBtn:hover{background:#f2f6fb;border-color:var(--border-strong)}.choiceBtnTitle{font-size:15px;font-weight:600;color:var(--ink)}.choiceBtnSub{font-size:12px;color:var(--muted)}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);z-index:1200;background:var(--navy-deep);color:#fff;font-size:13px;padding:11px 20px;border-radius:999px;box-shadow:0 8px 24px #17263d40;max-width:calc(100vw - 32px);text-align:center;animation:toastIn .2s ease-out}.toastNg{background:var(--danger)}@keyframes toastIn{0%{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%);opacity:1}}.timelineExport{width:100%;overflow:visible}.timelineSheetItem{display:flex;flex-direction:column;gap:8px}.timelineHeader{display:flex;justify-content:space-between;align-items:center}.timelinePatternName{font-size:15px;font-weight:700;color:var(--navy-deep)}.timelineHeaderRight{font-size:11px;color:var(--faint)}.timelineScale{position:relative;height:18px;margin:0 1px}.timelineHour{position:absolute;transform:translate(-50%);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}.timelineTrack{position:relative;min-height:120px;border-radius:10px;background:repeating-linear-gradient(90deg,#e3eaf3 0,#e3eaf3 1px,transparent 1px,transparent calc(100% / 24)),linear-gradient(#f7fafd,#f7fafd);border:1px solid var(--border);overflow:hidden}.timelineExportSheetItem .timelineTrack{overflow:visible}.timelineEmpty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint);padding:0 24px;text-align:center}.timelineBlock{position:absolute;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2);transition:box-shadow .1s}.timelineBlockInteractive{cursor:pointer}.timelineBlockInteractive:hover{z-index:10;box-shadow:0 4px 12px #17263d33}.timelineBlockEditing{outline:3px solid var(--teal);outline-offset:2px;z-index:10}.timelineBlockLabel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px;line-height:1.3}.timelineBlockLabelHidden{opacity:0}.timelineBlockName{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.timelineBlockTime{font-size:12px;opacity:.9;white-space:nowrap;font-variant-numeric:tabular-nums}@media(max-width:480px){.timelineBlockName{font-size:12px}.timelineBlockTime{font-size:10px}}.timelineBlockThin{border-radius:6px}.timelineBlockThin .timelineBlockLabel{padding:2px 6px}.timelineBlockThin .timelineBlockName{font-size:10px}.timelineBlockThin .timelineWrap{width:12px;height:12px}.timelineBlockThin .timelineWrap:after{font-size:10px}.timelineStack{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;gap:1px;z-index:50}.timelineStackItem{display:flex;align-items:center;gap:5px;height:16px;border:none;background:transparent;padding:0 2px;cursor:pointer;font-size:10px;max-width:100%}.timelineStackDot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.timelineStackName{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timelineStackTime{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.timelineWrap{position:absolute;top:50%;width:18px;height:18px;transform:translateY(-50%);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.timelineWrapRight{right:4px}.timelineWrapRight:after{content:"›";font-size:14px;font-weight:700;color:var(--muted)}.timelineWrapLeft{left:4px}.timelineWrapLeft:after{content:"‹";font-size:14px;font-weight:700;color:var(--muted)}.exportStage{position:absolute;left:-9999px;top:-9999px;width:1200px;overflow:visible}.exportSheet{background:#fff;padding:40px;width:1200px;overflow:visible}.exportSheetHeader{margin-bottom:32px}.exportSheetTitle{font-size:28px;font-weight:700;color:var(--navy-deep);margin-bottom:8px}.exportSheetMeta{font-size:14px;color:var(--muted)}.exportSheetBody{display:flex;flex-direction:column;gap:40px;overflow:visible}.exportSheetRow{background:#fff;overflow:visible}.timelineExportSheetItem{background:#fff;width:100%;overflow:visible}.timelineExportSheetItem .timelineExport{width:100%;min-width:100%}.timelineExportSheetItem .timelineTrack{min-height:140px;overflow:visible}.timelineExportSheetItem .timelineHour{font-size:11px}.timelineExportSheetItem .timelineScale{height:24px}.timelineExportSheetItem .timelineBlockName{font-size:14px}.timelineExportSheetItem .timelineBlockTime{font-size:12px}.timelineExportSheetItem .timelineStackItem{font-size:11px;height:18px}.timelineExportSheetItem .timelineStackDot{width:8px;height:8px}.loginPage{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy-deep);padding:20px}.loginCard{background:#fff;border-radius:18px;padding:36px 32px;width:100%;max-width:400px;box-shadow:0 20px 60px #0000004d}.loginIcon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--navy);color:#dce7f5;margin:0 auto 16px}.loginTitle{font-size:22px;font-weight:700;color:var(--navy-deep);margin:0 0 6px;text-align:center}.loginSubtitle{font-size:13px;color:var(--muted);text-align:center;margin:0 0 28px}.loginForm{display:flex;flex-direction:column;gap:18px}.loginField{display:flex;flex-direction:column;gap:8px}.loginLabel{font-size:13px;font-weight:600;color:var(--ink)}.loginInput{padding:12px 16px;font-size:16px;border:1px solid var(--border-strong);border-radius:10px;transition:border-color .15s;outline:none}.loginInput:focus{border-color:var(--teal)}.loginInput::placeholder{color:var(--faint)}.loginError{padding:12px;background:var(--danger-bg);border:1px solid #e5c5c1;border-radius:10px;color:var(--danger);font-size:14px}.loginButton{padding:14px 24px;font-size:16px;font-weight:600;border:none;border-radius:10px;background:var(--navy);color:#fff;cursor:pointer;transition:background .15s}.loginButton:hover:not(:disabled){background:#1f3757}.loginButton:disabled{opacity:.7;cursor:not-allowed}.loadingScreen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);gap:16px}.loadingSpinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loadingText{font-size:15px;color:var(--muted)}