.timer-interface{padding:16px;max-width:100%;font-family:var(--font-mono, "Menlo", "Monaco", "Courier New", monospace)}.timer-display{text-align:center;margin-bottom:24px}.time-display{font-size:40px;font-weight:700;margin-bottom:16px;color:var(--text-color, #1f2328);letter-spacing:-.5px;font-variant-numeric:tabular-nums}.time-separator{opacity:.4;margin:0 10px;font-weight:400}.progress-bar{width:100%;height:8px;background:var(--border-muted, #eaeef2);border-radius:4px;overflow:hidden;position:relative}.timer-progress{height:100%;width:0%;background:var(--focus-color, #0969da);border-radius:4px;transition:width .15s ease-out}.all-steps{margin-bottom:24px;display:flex;flex-direction:column;gap:8px}.step-details{background:var(--sidebar-bg, #f6f8fa);border-radius:8px;border:1px solid var(--border-muted, #eaeef2);overflow:hidden;transition:all .15s ease}.step-details.active{border-color:var(--focus-color, #0969da);box-shadow:0 0 0 1px var(--focus-color, #0969da)}.step-summary{padding:14px 16px;font-size:14px;font-weight:600;color:var(--text-color, #1f2328);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--sidebar-bg, #f6f8fa);border:none;outline:none;font-variant-numeric:tabular-nums;transition:all .12s ease}.step-summary:hover{background:var(--hover-bg, #f3f4f6)}.step-details.active .step-summary{background:var(--focus-color, #0969da);color:#fff}.step-instructions{padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px;background:var(--bg-color, #ffffff)}.instruction{padding:10px 14px;background:var(--bg-color, #ffffff);border:1px solid var(--border-muted, #eaeef2);border-radius:6px;font-size:13px;color:var(--text-color, #1f2328);line-height:1.5}.timer-controls{display:flex;justify-content:center;gap:12px}.control-btn{width:52px;height:52px;border:1px solid var(--border-muted, #eaeef2);border-radius:10px;background:var(--bg-color, #ffffff);color:var(--text-color, #1f2328);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s cubic-bezier(.02,.01,.47,1);box-shadow:var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04))}.control-btn:hover:not(:disabled){background:var(--hover-bg, #f3f4f6);box-shadow:0 2px 4px #00000014}.control-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 2px #0000001a}.control-btn:disabled{opacity:.4;cursor:not-allowed}.play-pause-btn{background:var(--focus-color, #0969da);color:#fff;border-color:var(--focus-color, #0969da)}.play-pause-btn:hover:not(:disabled){opacity:.9;box-shadow:0 2px 8px #0969da4d}html.dark .time-display{color:var(--text-color, #e6edf3)}html.dark .progress-bar{background:var(--border-muted, #30363d)}html.dark .timer-progress{background:var(--focus-color, #4493f8)}html.dark .step-details{background:var(--sidebar-bg, #161b22);border-color:var(--border-muted, #30363d)}html.dark .step-summary{color:var(--text-color, #e6edf3);background:var(--sidebar-bg, #161b22)}html.dark .step-summary:hover{background:var(--hover-bg, #21262d)}html.dark .step-details.active .step-summary{background:var(--focus-color, #4493f8);color:#fff}html.dark .step-instructions{background:var(--bg-color, #0d1117)}html.dark .instruction,html.dark .control-btn{background:var(--bg-color, #0d1117);border-color:var(--border-muted, #30363d);color:var(--text-color, #e6edf3)}html.dark .control-btn:hover:not(:disabled){background:var(--hover-bg, #21262d)}html.dark .play-pause-btn{background:var(--focus-color, #4493f8);border-color:var(--focus-color, #4493f8);color:#fff}html.dark .play-pause-btn:hover:not(:disabled){opacity:.9;box-shadow:0 2px 8px #4493f84d}:root{--bg-color: #ffffff;--text-color: #1f2328;--text-muted: #656d76;--border-color: #d0d7de;--border-muted: #eaeef2;--sidebar-bg: #f6f8fa;--toolbar-bg: #fafbfc;--editor-font-size: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08);--focus-color: #0969da;--hover-bg: #f3f4f6;--active-bg: #e5e7ea}html.dark{--bg-color: #0d1117;--text-color: #e6edf3;--text-muted: #7d8590;--border-color: #21262d;--border-muted: #30363d;--sidebar-bg: #161b22;--toolbar-bg: #010409;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3);--focus-color: #4493f8;--hover-bg: #21262d;--active-bg: #30363d}body{background-color:var(--bg-color);color:var(--text-color);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;height:100vh;overflow:hidden}.editor-section{flex:1;min-width:0;display:flex;flex-direction:column;background-color:var(--bg-color)}#editor{flex:1;min-height:0;font-size:var(--editor-font-size)}.controls{display:flex;justify-content:space-between;align-items:center;background-color:var(--toolbar-bg);border-bottom:1px solid var(--border-muted);padding:8px 12px;gap:12px;box-shadow:var(--shadow-sm);min-height:40px}.controls label{color:var(--text-color);font-size:13px;font-weight:500}.controls .toggles{display:flex;gap:4px;align-items:center}.recipe-controls{display:flex;align-items:center;gap:8px}#new-recipe-button,#share-button,#settings-button,#help-button{padding:6px 10px;border:1px solid var(--border-muted);background-color:var(--bg-color);color:var(--text-color);font-size:13px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .12s cubic-bezier(.02,.01,.47,1);box-shadow:var(--shadow-sm);height:28px;min-width:28px}#new-recipe-button:hover,#share-button:hover,#settings-button:hover,#help-button:hover{background-color:var(--hover-bg);border-color:var(--border-color);box-shadow:0 2px 4px #0000001a}#new-recipe-button:active,#share-button:active,#settings-button:active,#help-button:active{background-color:var(--active-bg);box-shadow:inset 0 1px 2px #0000001a;transform:translateY(1px)}#new-recipe-button:focus-visible,#share-button:focus-visible,#settings-button:focus-visible,#help-button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.sidebar{width:320px;border-left:1px solid var(--border-color);background-color:var(--sidebar-bg);color:var(--text-color);box-shadow:var(--shadow-sm)}.sidebar__controls{display:flex;background-color:var(--toolbar-bg);border-bottom:1px solid var(--border-muted);margin:0;padding:0}.sidebar button{background:none;border:none;color:var(--text-muted);cursor:pointer;text-decoration:none;padding:12px 16px;font-size:13px;font-weight:500;transition:all .12s cubic-bezier(.02,.01,.47,1);flex:1;border-bottom:2px solid transparent;position:relative}.sidebar button:hover{background-color:var(--hover-bg);color:var(--text-color)}.sidebar button[aria-selected=true]{color:var(--text-color);border-bottom-color:var(--focus-color);background-color:var(--bg-color)}.sidebar button:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.sidebar pre{margin:0;padding:12px;white-space:pre-wrap;word-wrap:break-word;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:12px;line-height:1.45;background-color:var(--bg-color);max-height:calc(100vh - 120px);overflow-y:auto}.sidebar pre::-webkit-scrollbar{width:8px}.sidebar pre::-webkit-scrollbar-track{background:transparent}.sidebar pre::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}.sidebar pre::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#console{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;outline:none;display:block;width:100%;cursor:text;border-radius:4px;transition:all .12s cubic-bezier(.02,.01,.47,1)}#console:focus{outline:2px solid var(--focus-color);outline-offset:-2px;background-color:var(--bg-color);box-shadow:inset 0 0 0 1px var(--focus-color)}input,select,button,label{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}#help-dialog,#preferences-dialog{border:1px solid var(--border-color);border-radius:12px;padding:24px;background-color:var(--bg-color);color:var(--text-color);max-width:480px;width:90vw;margin:auto;box-shadow:var(--shadow-md);font-size:14px}#preferences-dialog{max-width:360px}@media (max-width: 768px){#help-dialog,#preferences-dialog{width:95vw;max-width:none;padding:16px;border-radius:4px}}#help-dialog::backdrop,#preferences-dialog::backdrop{background-color:#00000080}#help-dialog h3,#help-dialog h4{margin-top:0;margin-bottom:12px}#help-dialog h4{font-size:15px;margin-top:20px}#help-dialog p{margin:0 0 16px;line-height:1.6}#help-dialog ul{margin:0 0 16px;padding-left:20px;line-height:1.8}#help-dialog li{margin-bottom:6px}#help-dialog code{background-color:var(--hover-bg);padding:2px 6px;border-radius:4px;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:13px}.help-examples{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}@media (max-width: 768px){.help-examples{grid-template-columns:1fr}}#help-dialog pre{background-color:var(--hover-bg);padding:12px;border-radius:6px;overflow-x:auto;margin:0;border:1px solid var(--border-muted)}#help-dialog pre code{background-color:transparent;padding:0;font-size:13px;line-height:1.5}#preferences-dialog h3{margin:0 0 20px;font-size:18px;font-weight:600;color:var(--text-color)}.preference-group{margin-bottom:16px}.preference-group label{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;cursor:pointer;color:var(--text-color)}.dialog-buttons{display:flex;justify-content:flex-end;margin-top:24px;gap:8px}.dialog-buttons button{padding:10px 20px;border:1px solid var(--border-color);background-color:var(--focus-color);color:#fff;font-size:14px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .12s cubic-bezier(.02,.01,.47,1);box-shadow:var(--shadow-sm)}.dialog-buttons button:hover{background-color:var(--focus-color);opacity:.9;box-shadow:0 2px 8px #00000026}.dialog-buttons button:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #0000001a}select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-color);color:var(--text-color);font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;cursor:pointer;min-width:120px;box-shadow:var(--shadow-sm);transition:all .12s cubic-bezier(.02,.01,.47,1)}select:hover{border-color:var(--focus-color);box-shadow:0 2px 4px #00000014}select:focus{outline:2px solid var(--focus-color);outline-offset:-1px;border-color:var(--focus-color)}@media (min-width: 769px) and (hover: hover) and (pointer: fine){select{appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23656d76' d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;padding-right:32px}html.dark select{background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%237d8590' d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'/></svg>")}}#recipe-select{min-width:200px}#diagram{display:none;padding:12px;overflow:auto;max-height:calc(100vh - 120px);background-color:var(--bg-color)}#diagram::-webkit-scrollbar{width:8px}#diagram::-webkit-scrollbar-track{background:transparent}#diagram::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}#diagram::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}#timer{display:none;padding:12px;overflow-y:auto;max-height:calc(100vh - 120px);background-color:var(--bg-color)}#timer::-webkit-scrollbar{width:8px}#timer::-webkit-scrollbar-track{background:transparent}#timer::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}#timer::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}.diagram-actions{display:flex;gap:8px;margin:12px}#export-diagram-button,#print-diagram-button{display:none;padding:10px 16px;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-color);font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;flex:1;box-shadow:var(--shadow-sm);transition:all .12s cubic-bezier(.02,.01,.47,1)}#export-diagram-button:hover,#print-diagram-button:hover{background-color:var(--hover-bg);border-color:var(--focus-color);box-shadow:0 2px 4px #00000014}#export-diagram-button:active,#print-diagram-button:active{background-color:var(--active-bg);transform:translateY(1px)}#export-diagram-button:focus-visible,#print-diagram-button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}@media (max-width: 768px){.app-container{flex-direction:column;height:auto}.sidebar{width:auto;border-left:none;border-top:1px solid var(--border-color)}.controls{flex-direction:column}}.cm-panel{padding:8px}@media print{body *{visibility:hidden}#diagram,#diagram *{visibility:visible}#diagram{position:absolute;left:0;top:0;width:100%;max-height:none;overflow:visible}.diagram-actions{display:none}}