:root {
            	color-scheme: light ;
            	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            	background-color: #f5f5f5;
            	color: #222;
            }

            body {
            	margin: 0;
            	padding: 0;
            }

            main {
            	max-width: 960px;
            	margin: 0 auto;
            	padding: 32px 24px 48px;
            	background: #ffffff;
            	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            	border-radius: 16px;
            }

            h1 {
            	margin-top: 0;
            	font-size: 2rem;
            	letter-spacing: -0.01em;
            }

            form {
            	display: grid;
            	gap: 24px;
            }

            fieldset {
            	border: 1px solid #dedede;
            	border-radius: 12px;
            	padding: 20px;
            }

            fieldset legend {
            	padding: 0 8px;
            	font-weight: 600;
            }

            .field-grid {
            	display: grid;
            	gap: 16px;
            }

            .two-col {
            	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            }

            label {
            	display: flex;
            	flex-direction: column;
            	font-size: 0.9rem;
            	gap: 6px;
            	font-weight: 500;
            }

            input[type="text"],
            textarea {
            	border: 1px solid #c5c5c5;
            	border-radius: 8px;
            	padding: 10px 12px;
            	font-size: 0.95rem;
            	font-family: inherit;
            	background: #fafafa;
            }

            textarea {
            	min-height: 96px;
            	resize: vertical;
            }

            .section-block {
            	border: 1px solid #dedede;
            	border-radius: 12px;
            	padding: 16px;
            	display: flex;
            	flex-direction: column;
            	gap: 16px;
            }

            .section-block header {
            	display: flex;
            	align-items: center;
            	justify-content: space-between;
            	gap: 12px;
            }

            .section-block h2 {
            	margin: 0;
            	font-size: 1.1rem;
            }

            .entries {
            	display: grid;
            	gap: 12px;
            }

            .entry {
            	border: 1px solid #e2e2e2;
            	border-radius: 10px;
            	padding: 12px;
            	display: grid, gap: 12px;
            	background: #fafafa;
            }

            .entry-heading {
            	font-weight: 600;
            	font-size: 0.95rem;
            	text-transform: capitalize;
            }

            .entry-controls {
            	display: flex;
            	justify-content: flex-end;
            }

            button {
            	border: none;
            	border-radius: 999px;
            	padding: 10px 16px;
            	font-size: 0.9rem;
            	font-weight: 600;
            	cursor: pointer;
            	background: #2d67ff;
            	color: #fff;
            	transition: background 0.2s ease;
            }

            button[disabled] {
            	opacity: 0.6;
            	cursor: not-allowed;
            }

            .secondary {
            	background: #ececec;
            	color: #333;
            }

            .danger {
            	background: #ff4f5e;
            }

            .small {
            	padding: 6px 10px;
            	font-size: 0.8rem;
            }

            .actions {
            	display: flex;
            	flex-wrap: wrap;
            	gap: 12px;
            	align-items: center;
            }

            .output-block {
            	display: grid;
            	gap: 12px;
            }

            .output-block textarea {
            	font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            	min-height: 220px;
            }

            .child-actions {
            	display: flex;
            	align-items: center;
            	justify-content: space-between;
            	gap: 12px;
            	font-size: 0.85rem;
            	font-weight: 600;
            }

            .child-entries {
            	display: grid;
            	gap: 8px;
            	border-left: 2px dashed #dedede;
            	padding-left: 12px;
            }

            .child-entry {
            	border: 1px dashed #d0d0d0;
            	border-radius: 8px;
            	padding: 10px;
            	background: #fff;
            	display: grid;
            	gap: 10px;
            }

            @media (max-width: 720px) {
            	main {
            		padding: 24px 18px 32px;
            	}

            	.section-block header {
            		flex-direction: column;
            		align-items: flex-start;
            	}

            	button {
            		width: 100%;
            		justify-content: center;
            	}

            	.entry-controls {
            		justify-content: center;
            	}

            	.child-actions {
            		flex-direction: column;
            		align-items: flex-start;
            	}
            }