.sygilogram-open,.sygilogram-add { min-height:44px; }
.sygilogram-add { min-width:44px; }
.sygilogram-dialog { width:min(1120px,96vw);max-width:96vw;height:min(860px,94dvh);max-height:94dvh;padding:0;margin:auto;border:1px solid #40434b;background:#000;color:#f4f7ff;overflow:hidden; }
.sygilogram-dialog[open] { display:flex;flex-direction:column; }
.sygilogram-dialog::backdrop {background:rgb(0 0 0 / .8);}
.sygilogram-heading {display:flex;flex:none;align-items:center;justify-content:space-between;gap:1rem;padding:12px 20px;border-bottom:1px solid #24262c;}
.sygilogram-heading h2 {margin:0;font:16px 'Courier New',monospace;letter-spacing:.06em;}
.sygilogram-done {min-width:64px;min-height:44px;color:inherit;background:transparent;border:1px solid #777;border-radius:2px;}
.sygilogram-tools {display:flex;flex-wrap:wrap;flex:none;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid #24262c;}
.sygilogram-tools button,.sygilogram-tools select,.sygilogram-node-actions button {min-height:44px;color:var(--paper);background:#08090c;border:1px solid #555b65;border-radius:2px;padding:5px 9px;font:14px var(--body);}
.sygilogram-tools select {flex:1;min-width:110px;max-width:260px;margin-top:0;width:auto;}
.sygilogram-tools [data-sygil-select] {min-width:64px;}
.sygilogram-tools button[aria-pressed=true] {border-color:#f4f7ff;background:#252936;}
.sygilogram-stage {position:relative;flex:1;min-height:0;overflow:hidden;font-family:'Courier New',monospace;}
.sygilogram-stage canvas {position:absolute;inset:0;width:100%;height:100%;touch-action:none;}
.sygilogram-stage .sygilogram-flight {z-index:4;pointer-events:none;}
.sygilogram-dock {position:absolute;z-index:5;bottom:16px;left:5%;width:90%;background:rgb(3 4 3 / .96);font-family:var(--body);}
.sygilogram-dock label {display:block;margin:0 0 4px;font:14px var(--body);}
.sygilogram-dock textarea {display:block;resize:none;width:100%;min-height:90px;max-height:120px;box-sizing:border-box;color:var(--paper);background:#060706;border:1px solid #555;padding:16px 17px;font:17px/1.45 var(--body);letter-spacing:normal;}
.sygilogram-notice {margin:0 0 6px;color:#d7b9b9;font:14px/1.35 var(--body);}
.sygilogram-notice:empty {display:none;}
.sygilogram-measurer {position:absolute;top:0;left:0;display:block;visibility:hidden;white-space:pre;pointer-events:none;}
.sygilogram-draft-wrap {min-height:112px;}
.sygilogram-editing .sygilogram-draft-wrap {visibility:hidden;}
.sygilogram-node-editor {position:absolute;bottom:0;left:0;right:0;min-height:112px;background:#08090c;padding:4px 0;}
.sygilogram-node-editor[hidden] {display:none!important;}
.sygilogram-node-editor input {box-sizing:border-box;width:100%;min-height:44px;margin:0 0 4px;padding:6px 10px;color:var(--paper);background:#08090c;border:1px solid #88909d;font:17px/1.45 var(--body);}
.sygilogram-node-actions {display:flex;gap:8px;}
/* No layout wrapper around the real writing form; only a transparent viewport layer. */
.sygilogram-air-shell {position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:70;pointer-events:none;background:transparent;border:0;}
.sygilogram-air-shell[hidden] {display:none!important;}
.sygilogram-ambient {position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;overflow:visible;pointer-events:none;}
.sygilogram-ambient canvas {pointer-events:none;}

.sygilogram-ambient .sygilogram-dock {display:none;left:max(12px,calc((100% - 760px)/2));width:min(760px,calc(100% - 24px));bottom:12px;pointer-events:auto;}
.sygilogram-ambient.sygilogram-editing .sygilogram-dock {display:block;min-height:112px;}
.sygilogram-ambient .sygilogram-draft-wrap {display:none;}
.sygilogram-hit {position:absolute;z-index:3;height:44px;margin:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:transparent;pointer-events:auto;touch-action:none;cursor:grab;}
.sygilogram-hit:focus-visible {outline:1px solid #bbb;outline-offset:2px;}
.sygilogram-hit[hidden] {display:none;}
.sygilogram-dismiss {position:absolute;z-index:6;right:12px;top:12px;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--muted);font:24px var(--body);pointer-events:auto;}
.sygilogram-writing .game-pages,.sygilogram-writing>.page-heading {opacity:.13;transition:opacity .25s;}
@media(max-width:700px) {
 .sygilogram-dialog {width:100vw;max-width:100vw;height:min(100dvh,var(--sygilogram-vh,100dvh));max-height:100dvh;border:0;}
 .sygilogram-heading {padding:max(8px,env(safe-area-inset-top)) 12px 8px;}
 .sygilogram-dock {left:12px;width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));}
 .sygilogram-tools {gap:5px;padding:4px 8px;}
 .sygilogram-tools button,.sygilogram-tools select {font-size:13px;padding-inline:6px;}
}
@media(prefers-reduced-motion:reduce) {.sygilogram-writing .game-pages,.sygilogram-writing>.page-heading {transition:none;}}

/* Reading and shaping share the same stable arrangement. */
.sygilogram-ambient canvas {transition:opacity .22s ease;}
.sygilogram-ambient.sygilogram-reading canvas {opacity:.16;}
.sygilogram-presence .game-pages,.sygilogram-presence>.page-heading {transition:opacity .22s ease;}
.sygilogram-hold {position:absolute;z-index:7;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none;}
.sygilogram-hold svg {width:44px;height:44px;transform:rotate(-90deg);}
.sygilogram-hold circle {fill:none;stroke:#f4f7ff;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:sygilogram-hold var(--sygil-hold-duration,.4s) linear forwards;}
.sygilogram-hold-ready circle {stroke-width:2.5;stroke-dashoffset:0;animation:none;}
.sygilogram-hit,.sygilogram-hold {-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
@keyframes sygilogram-hold {to {stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce) {.sygilogram-ambient canvas,.sygilogram-presence .game-pages,.sygilogram-presence>.page-heading {transition:none;} .sygilogram-hold circle {animation:none;stroke-dashoffset:0;}}

/* Native prose and text fields retain normal selection; graph hits never cover them. */
.sygilogram-ambient canvas:not(.sygilogram-flight) {clip-path:inset(var(--sygil-clip-top,0px) 0 var(--sygil-clip-bottom,0px));}
.sygilogram-ambient:not(.has-draft)~.sygilogram-dismiss {display:none;}

/* Reading gives native prose the touch surface; one outside tap restores shaping. */
.sygilogram-reading .sygilogram-hit {pointer-events:none;}

/* Only dimmed story text yields selection ownership to the active sygil.
   Native textarea selection and reading-mode copy remain untouched. */
.sygilogram-writing .game-pages,.sygilogram-writing .game-pages *,
.sygilogram-writing>.page-heading,.sygilogram-writing>.page-heading * {
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* The word itself becomes editable. No secondary panel or displaced draft. */
.sygilogram-inline-editor {position:absolute;z-index:8;transform:translate(-50%,-50%);height:44px;display:flex;align-items:center;justify-content:center;gap:0;color:#f4f7ff;background:rgb(0 0 0 / .92);border:1px solid rgb(244 247 255 / .45);padding:0 8px;pointer-events:auto;box-sizing:border-box;font:17px/1.2 'Courier New',monospace;}
.sygilogram-inline-editor input {display:block;flex:1;min-width:0;width:1ch;height:40px;margin:0;padding:0;border:0;outline:0;box-shadow:none;border-radius:0;color:inherit;background:transparent;text-align:center;font:inherit;letter-spacing:normal;-webkit-user-select:text;user-select:text;touch-action:manipulation;}
.sygilogram-inline-editor>span {pointer-events:none;-webkit-user-select:none;user-select:none;}
.sygilogram-inline-birth {animation:sygilogram-thread-settle .32s ease-out;}
@keyframes sygilogram-thread-settle {from {border-color:rgb(244 247 255 / .85);box-shadow:0 0 9px rgb(220 230 255 / .12);}to {border-color:rgb(244 247 255 / .45);box-shadow:none;}}
@media(prefers-reduced-motion:reduce) {.sygilogram-inline-birth{animation:none;}}

/* A precise mouse can re-enter a faint painted node. Touch reading retains
   its native page-selection surface; desktop targets shrink to visible ink. */
@media(hover:hover) and (pointer:fine){
 .sygilogram-reading .sygilogram-hit {pointer-events:auto;}
}

/* Reading means the composition is absent, not a field of invisible hits. */
.sygilogram-ambient.sygilogram-reading {visibility:hidden;pointer-events:none;}
.sygilogram-ambient.sygilogram-reading canvas {opacity:0;}
.sygilogram-ambient.sygilogram-reading .sygilogram-hit {pointer-events:none;}
.sygilogram-is-reading>.sygilogram-dismiss {visibility:hidden;pointer-events:none;}


@media(max-width:699px){
 .sygilogram-inline-editor{background:transparent;}
}